Dev Space

Customize & extend the power of Alteryx. SDKs, APIs, custom tools, and more!

Example of a drop-down field picker

SeanAdams
17 - Castor
17 - Castor

Hey all (cc @TashaA )

 

Been playing with the new Platform SDK - and it's very exciting that the UI has a built-in test harness so that you can see how your UI will look before deploying.

 

Could anyone point me to an example tool built in the new SDK that uses a combo-box to select which field from the incoming input should be processed?    I can't find any documentation that covers this in the new react frontends.

 

In the old SDK - it used to be done like this:

<ayx data-ui-props='{type: "DropDown", widgetId:"rootFolderDropDown", searchable: true}'
data-item-props="{
dataName: 'rootFolderFieldSelect',
dataType: 'FieldSelector',
anchorIndex:'0',
connectionIndex:'0'
}"></ayx>

2 REPLIES 2
jpquinn605
Alteryx
Alteryx

Hey Sean! Just as an FYI, Tasha is no longer with the company. So, feel free to tag me in questions specifically related to the UI side of tool development. 

 

As far as an example. You have a couple of choices here. You can use the Autocomplete component or the TextField component with the select prop. In order to pass it the fields, you'll supply those as your options. That could look something like this: 

 

const [model, handleUpdateModel] = UiSdkContext

<Autocomplete
  options={model.Meta.fields[0][0].fields}
  getOptionLabel: option => option.name}
  renderInput={params => <TextField {...params} fullWidth id="ac-debug" label="debug" 
    margin="normal" />}
/>

 

For more details on accessing model/meta information, check out these docs: 
https://alteryx.github.io/react-comms/#/Designer%20Api/Usage

Additionally, we encourage you to communicate with us by filing an issue in our public GitHub repositories found below:
https://github.com/alteryx/react-comms

https://github.com/alteryx/alteryx-ui

https://github.com/alteryx/dev-harness

 

Thanks Sean! 

SeanAdams
17 - Castor
17 - Castor

@jpquinn605 - I'm super impressed - watched your inspire talk (which you did a great job of, by the way) so it's great to have the legend himself helping out on the dev boards!'

 

Thank you for your detailed answer - it gives me some fun stuff to play with this weekend - and I'll let you know how it goes.    This particular case seems to be a very common pattern, so it's great that there's and easy solution.    

Also - appreciate the invitation to add to the discussion on GitHub - not done this before with a public project, so this is good learning.

 

Thanks for coming back on this post Jordan - great to have you on this discussion board adding your voice!

Have a good weekend

Sean