component. I would like to use the same component to select dataelements, indicators, etc. I have added the dhis/analytics project to mine and able to display the component but am unsure how to implement the functions? Thank you
Apologies, I’m not able to find a <DataDimension /> component in the DHIS2 UI library. Please share where this component is from so we get a better understanding of it. This might be a custom react component which handles the props you listed but the naming is just a name i.e. what it’s inside the DataDimension component is what you should be looking for. The way the component handles these props might give you a clue.
Thank you for your response, I will investigate further. The component is an import from the dhis/analytics app and is used in the data-visualizer-app to select Dataelements, etc.
I would like to use the same component in my app but the way it is used in the data-visualizer is a bit confusing to me.
Sorry to bother you with this again.
I get this error when trying to make a selection of a dataelement:- Uncaught runtime errors: × ERROR selectedDimensions.map is not a function TypeError: selectedDimensions.map is not a function
displayNameProp defines which prop to use for the display name, such as displayName or displayShortName.
infoBoxMessage is optional and will display within the component itself if provided
onSelect is the callback used when a selection is made. This should store the selection in your preferred location (such as component state, redux store etc), the key thing is that the function updates whatever prop is passed into selectedDimensions.
selectedDimensions expects an array of objects, e.g. [{id: 'Uvn6LCg7dVU', name: 'ANC 1 Coverage', type: 'INDICATOR'}]. The array can of course be empty as well by just passing in [].
onCalculationSave is only for when you want to be able to create calculations, so for your use case you can probably skip this one.
This seems to indicate that you’re not passing in an array to selectedDimensions. I don’t have the full context / code here, but maybe try selectedDimensions={selectedDimensions.items} (assuming that’s the actual array of items). You could extend it to selectedDimensions={selectedDimensions?.items || []} if you want to check for null values.
Hi @mohlson . Thank you very much for pointing me in the right direction.
I do get the value when calling my handler in my component but the values do not appear in the ‘Selected Items’ area/box.
so this is my code now
const DataElementPicker =(props) => {
const displayNameProperty = 'displayName'
const infoBoxMessage = 'InfoBox message'
const [selectedDimensions, setSelectedDimensions] = useState([]);
const handleDimensionSelect = (selectedDimensions) => {
// Handle the selected dimensions here
// This function will be called when dimensions are selected in DataDimension
setSelectedDimensions(selectedDimensions);
};
props.dataElementHandler(selectedDimensions);
return (
<div className="container">
<DataDimension
displayNameProp={displayNameProperty}
infoBoxMessage={infoBoxMessage}
onSelect={handleDimensionSelect}
selectedDimensions={selectedDimensions?.item || []}
/>
</div>
)
This doesn’t look right. Wouldn’t .item just refer to a single item? Instead of the list of all selected dimensions?
Either way, it’s quite tricky to review code and understand what’s going on without a proper example. Would it maybe be possible for you to set up a simple example of this on a site like https://codesandbox.io/ ?
I changed my handler to this:-
const handleSelectItems = (selectedDimensions) => {
if (selectedDimensions && Array.isArray(selectedDimensions.items)) {
const selectedItems = selectedDimensions.items;
setSelectedItems(selectedItems);
onSelectedItems(selectedItems);
} else {
console.error('Selected dimensions object is not as expected:', selectedDimensions);
}
}
and the Datadimension render:-
<DataDimension
onSelect={handleSelectItems}
selectedDimensions={selectedItems}
displayNameProp={displayNameProperty} // Provide the appropriate display name property
infoBoxMessage={infoBoxMessage}
// Other props as needed
/>
