How to access list attribute value in a pluggable widget (in Javascript) ?

1
Hi,  I’m trying to create a custom lis pluggable widget (for web) in Javascript. I have a datasource property defined in the xml: In studio pro, I’ve given the widget a list of Item entities: At run time, I’ve created 4 items: And I’m trying to get the 4 items and display their values in my custom widget: The result is like this: I know item.ListAttributeValue is not the right way to access the list attribute values. But I can’t figure out how to do it with Javascript.. Anyone having xp to work with List objects in pluggable widget can help please?
asked
1 answers
3

To get a list of attributes from a datasource (in Docs at Property Values 4.9:

const attributeValue = this.props.myAttributeOnDatasource.get(this.props.myDataSource.items[0]);
// note: the '.get' was missing from the documentation, but the console reports that doing otherwise is deprecated and will be removed in Mendix 10.0, so I added it here

So, it appears that having an attribute property with `datasource` set to your datasource property key is required. It looks like this:

<propertyGroup caption="Preset">
    <property key="presetObject" type="datasource" required="true" isList="true">
        <caption>Object</caption>
        <description>List of preset objects to pull the presets from</description>
    </property>
    <property key="presetAttribute" type="attribute" required="true" dataSource="presetObject">
        <caption>Attribute</caption>
        <description>Attribute for preset selection</description>
        <attributeTypes>
            ... removed for simplicity
        </attributeTypes>
    </property>
</propertyGroup>

With this in mind, my code would look like this:

this.props.presetAttribute.get(this.props.presetObject.items[0])

Of course, this is just receiving the first item. To map each of the items, I would do it like so:

this.props.presetObject.items.map((item) => {
    let presetValue = this.props.presetAttribute.get(item).value; // our attribute value for this item
    // do something with our attribute, like putting it in an <li></li>
});

 

answered