Custom Tool UI

[Deepta]

Hello! I've been trying to create a custom UI for a tool I'm making using this, as a reference. My issue here is that the UI simply doesn't show up in my configuration tab. when I first load the tool there's a black flash on the tab and then a blank configuration tab stares at me.

I tried to add a warning similar to the one in my reference and got an error saying "none_type" has no method len() in it.

I've been trying to find other examples of custom tools with UI but there aren't many.

I also looked into the ayx_workspace.json and the UI has no path references. could this be a possible issue?

Please help me with any resource or suggestions. Thanks in advance.

[aneeshnazar]

Hi - I'd need to see the YXI to be sure, but it sounds like there could be a build issue with the UI component. Could you try running 

npm run build

in the UI directory for your tool? If this doesn't report any errors, try running 

npm run start

This should open the UI component in your browser, where you should have access to the browser's development/debugging capabilities

[JarrodT]

To add to @aneeshnazar 's comments, you can also see the console logs in designer by turning on HTML Developer Tools. In designer click Options -> Advanced Options -> Show HTML Developer Tools. When you click on a tool that uses HTML, a window will popup that has all of the html activity. This can also be achieved with F12 in the UI harness mentioned above. Adding console.log() to the UI file can help if you have issues with UI elements after the build. If I recall correctly, "None type" errors occurred for me when my default values weren't present or weren't updating correctly, causing the UI element to produce an error. 

[Deepta]

My issue persists in designer. I also looked into dev-harness which had the same issue. I was able to resolve dev-harness issues by deleting my cloned repo and re-cloning it again. A possible fault was node incompatibility. I'm using the Alteryx sdk so I'm not sure if @JarrodT 's suggestion to use HTML Developer Tools could help since my UI could have react components failing. But I'll try it. Below is my error for running a | npm run build | command in the UI directory.

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: error:0308010C:digital envelope routines::unsupported

[Deepta]

I'm currently trying to update my nodejs in conda but apparently the minimum requirement is 14.21.3 but the existing conda does not have any versions of nodejs after 14.18.3

Does this mean that v12 of nodejs is also incompatible? If I do not have access to a nodejs higher than 14.18.3 in conda what should I do?
The closest node available was v18. Safe to say, it isn't supported. Is there a way I can obtain v14.21.3 specifically ?

[Deepta]

I believe it's the node versions that causes this issue. Because, as suggested by @aneeshnazar I couldn't build it due to node errors and as @JarrodT suggested my browser shows node modules not existing or incompatible. 

My first approach was to find a conda source that would allow me to install 14.21.3 but found none. Will have to either wait for a source to pop up or look for standalone version.

I thought I'd install python and node packages outside of conda since their release version will allow for selective download. Here the issue is 'pip install ayx-python-sdk' simply doesn't run. It fails after giving me a long log and mentions this is not a problem because of pip. I will attach the logs here. I'm out of venues to try. Please suggest alternatives.

[aneeshnazar]

Are you able to use node 15+? Node 14 is a minimum version - later versions SHOULD work, and I see a few of those available through conda

[Deepta]

All modules offered between v14 and  v18 are for linux architectures. The most nearest version is v18 and you can see that in my previous post screenshots that it isn't compatible. There are no versions between v14 and v18 for windows OS in anaconda for conda installations. Please provide me with a link if there is one as I could be wrong about not being able to find one.

[JarrodT]

@Deepta I don't recall using conda for installing node on my machine. I just downloaded the version directly from the node.js download page. https://nodejs.org/en/download/releases The 14.21.3 versions are posted here: https://nodejs.org/download/release/v14.21.3/ 

[Deepta]

Thank you @JarrodT . I was able to get NodeJs working and I'm a bit confused with UI and Configuration. So I used the 'Sample filter tool with UI' resource in the UI and UI didn't show up in the designer or in the toolbar so I tried it in dev-harness when it still didn't show I did inspect element [as you kindly reminded earlier] and it said 

Cannot read properties of 'fields'

so I thought it could be because I changed 'dev-harness specific code segment' in the index.tsx. So I tried changing it to single-input-single-out.tsx template in the tool-templates folder. I still couldn't see a UI in the configuration tab. But in dev-harness under tool I was able to see the editable UI under tool-name but nothing under configuration except for a summary of my inputs and my editable UI would promptly disappear when I changed the middle meta column to anything else. Does this mean UI is seen seperately and configuration is seen seperately? If this is the case why am I not able to see 'sample filter ui' since it's code clearly includes configuration [dev-harness may not accept its code but clearly example code must work in designer]. Please help.