Open Data-Engineer-Loading opened 1 year ago
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.
Hi @kingedward35 ! I've been through the documentation and followed what you mentioned but it doesn't work.
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.
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 (
) }
const Tool = () => { return ( <DesignerApi messages={{}} defaultConfig={{ Configuration: { ranking: "top", rows: 1 } }}>
</DesignerApi>
) }
ReactDOM.render(
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?
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 ?