How is it possible to feed a ListBox with field names from input anchor ?

[jeanbaptistepinet-data]

I tried to use the field names of my input to build a ListBox that the user can use.
I successfully built an array containing options but can't pass it to the ListBox component. Do you have an example showing how to do so ?

[kingedward35]

Hello Jean-Bi. Thanks for reaching out. Here is a link to our current documentation with demos on how to use our components and here is a link to examples of how to use the ListBox component. If you click the View Code link underneath the Simple ListBox demo, it should have an example of how to pass the array to the LIstBox component. Let me know if this helps and hopefully this answers your question. Thanks.

[jeanbaptistepinet-data]

Hi @kingedward35 ! I've been through the documentation and followed what you mentioned but it doesn't work.

[kingedward35]

Hi Jean-Bi. Can you provide a code sample of what you are trying with the context you are trying to use the ListBox component in? This would be very useful in trying to understand what is preventing you from getting the ListBox to work in your particular use case. Thanks.

[jeanbaptistepinet-data]

Hi @kingedward35, here is my code sample !

`import React, { useContext, useEffect, useCallback, useState } from 'react';
import ReactDOM from 'react-dom';
import { AyxAppWrapper, Box, Grid, Typography, makeStyles, Theme, Radio, FormControl, FormLabel, RadioGroup, FormControlLabel, Paper, NumericInput, InputLabel, ListBox, Container } from '@alteryx/ui';
import { Alteryx } from '@alteryx/icons';
import { Context as UiSdkContext, DesignerApi } from '@alteryx/react-comms';

const useStyles = makeStyles((theme: Theme) => ({
alteryx: {
color: theme.palette.primary.main,
height: '125px',
width: '125px'
}
}));

const initialModelState = {
ranking: "top",
rows: 1
};

const initialData = [
{ name: 'First', value: 'First' },
{ name: 'Second', value: 'Second' },
{ name: 'Third', value: 'Third' },
{ name: 'Fourth', value: 'Fourth'}
];

const App = () => {
const classes = useStyles();
const [model, handleUpdateModel] = useContext(UiSdkContext);

var fieldsList = model.Meta?.fields[0][0].fields;
let choices = [
{ name: 'First', value: 'First' }
];

for (let i = 0; i < fieldsList?.length; i++) {
choices[i] = { name : fieldsList?.[i]?.name, value : fieldsList?.[i]?.name };
}

console.log(choices);

const handleRankingChange = event => {
const newModel = { ...model };
newModel.Configuration = { ...newModel.Configuration, ranking: event.target.value };
handleUpdateModel(newModel);
};

const handleRowsChange = value => {
const newModel = { ...model };
newModel.Configuration = { ...newModel.Configuration, rows: value };
handleUpdateModel(newModel);
};

const [items, setItems] = useState(choices);

const onChange = useCallback(
(event, selectedItems, action) => {
const { itemsIndex, selected } = action;
if (itemsIndex === 'all') {
setItems(
items.map(({ value, ...item }) => ({
...item,
value,
selected
}))
);
} else {
const updatedItems = [...items];
updatedItems[itemsIndex].selected = selected;
setItems(updatedItems);
}
},
[choices, items]
);

// Dev Harness Specific Code ---------- Start
// The following code is specifically a dev harness functionality.
// If you're developing a tool for Designer, you'll want to remove this
// and check out our docs for guidance
useEffect(() => {
handleUpdateModel(model)
}, []);
// Dev Harness Specific Code ---------- End

return (




Ranking type

<FormControlLabel control={} label="Top" value="top"/>
<FormControlLabel control={} label="Bottom" value="bottom"/>





Number of rows
<NumericInput id="simple-numeric-input" onChange={value => handleRowsChange(value)} value={model.Configuration.rows}/>









)
}

const Tool = () => {
return (
<DesignerApi messages={{}} defaultConfig={{ Configuration: { ranking: "top", rows: 1 } }}>




)
}

ReactDOM.render(
,
document.getElementById('app')
);
`

[kingedward35]

Hey Jean-Bi,

After looking at your code, I don't see the ListBox component being used. Is there some code missing that I am not seeing?