Custom Tool UI

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.

Developer

Custom Tools

Python

SDK

.yxi

Accepted answers

All comments

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

jarrodthuener

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 @jarrodthuener '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 ?
Image 8-15-23 at 4.56 PM.jpeg

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 @jarrodthuener 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.

log.txt

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.

jarrodthuener

@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 @jarrodthuener . 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.

Image 8-16-23 at 3.28 PM.jpeg

jarrodthuener

@Deepta, can you look at line 108 in your index.tsx file and maybe add a console.log right before that line to see what values are being passed through? It seems that there is something missing from the object being processed by generateData. I think I've come across this in the past when I was trying to reference values that weren't in my default Configuration object, so it would error because it was trying to perform an operation on a missing object, much like the none_type error.

Deepta

@jarrodthuener After looking into it I believe this is what happened. There is a map inside the function generateData whose input is the meta of the previous tool [possibly a table] since there is no tool it maps nothing hence an error pops up. But in "sample filter UI" this is handled in the backend so there are no issues. Image 8-17-23 at 4.25 PM.jpeg Image 8-17-23 at 4.24 PM.jpeg

I still don't understand why this UI or the UI of "sample filter UI" doesn't appear in the designer.

jarrodthuener

Maybe try adding a couple of console.log statements to see what is actually being processed:

// create field name list from metadata

const generateData = (data) => {

console.log("generateData",{data});

return data.map((item) => {

console.log("generateData - Item", {data});

item.primary = item.name;

item.value = item.name;

return item.name

});

};

Maybe the map isn't getting the right portion of the object.

Deepta

Image 8-18-23 at 1.46 PM.jpeg

Since there is no meta from the previous tool or input nothing is passed into the function and thus map is not called initially. The 'undefined' you see is when I swap to 'no input' after circling back from 'us address' in meta. 'generateData -item is never called since the function doesn't get any data passed into it.

jarrodthuener

hey @Deepta , sorry for the delay. I have a feeling that the model.Meta object may be handled correctly somewhere. When I used the example script just now, I noticed the meta reference was looking at fields[0][0] but that was empty for me. By changing it to fields[1][0], it seemed to pull the list.

I recently built a tool with 2 inputs and created a handler for the metadata:

// create field name list from metadata

const generateData = (data, connectionId) => {

// If the data isn't filled in, then use these default properties.

console.log("Index - generateData",{data});

if (JSON.stringify(data)=="{}" || !data) {

return ([]); //create a simple lookup table for "missing data" value

} else {

return data?.fields[connectionId][0].fields.map((item) => {

item.primary = item.name;

item.value = item.name;

console.log("generateData",{item})

return item.name

});

};

Then when calling the generateData function in the autocomplete, it looked like this:

<Autocomplete

id="Autocomplete"

options={generateData(model.Meta,1)} // was model.Meta?.fields[0][0].fields

renderInput={params => (

<TextField

{...params}

fullWidth

id="ac-meta"

label="Meta Data"

margin="normal"

placeholder="Select Column..."

)}

onChange={handleResourceEvent("fieldSelect")} // was handleFieldSelect

value={model.Configuration.fieldSelect}

the handleResourceEvent was a new function I created to dynamically handle events like field select (because i was using it multiple times):

// to handle class objects you have to break down the data into a newValue which equals the json object.

const handleResourceEvent = (key) => (_, newValue) =>{

const newModel = { ...model };

newModel.Configuration = {...newModel.Configuration, [key]:newValue};

handleUpdateModel(newModel);

};

Hopefully, that helps you get your autocomplete element working. Let me know if you have any questions though.

- Jarrod

Deepta

Hey @jarrodthuener just as you said I had mentioned previously that I understand why "map" is throwing up as an error. This as you said is because I don't have another component attached to this UI since it's trying to read the input metadata. This is handled in the backend and I had sent a link as well showing how I'd handle this. My issue as before is that all this is displayed on dev-harness when I need it to show up on designer. I'll attach how the error is handled below.

Screenshot 2023-08-23 122044.png

Quick Links

This months top contributors

atcodedog05 19458

Qiu 15866

binu_acs 15708

MarqueeCrew 13708

apathetichell 13703