How can I correctly access ListValue items from a Pluggable Web Widget?

3
I am building a react web widget to display some attributes of objects passed as a list parameter. The widget property is defined as follows: <property key="list" type="datasource" isList="true" required="false"> <caption>List</caption> <description /> </property> In the react component, the list items only contain the IDs of the objects and not their attributes I am then using the global `mx` object to retrieve the data: (window as any).mx.data.get({ guids, callback }); However, this does not feel right, as I should be importing something instead of relying on a global object and there are no typings available. What is the proper way of accessing the objects? Or if this is the proper way, how can I get typings for the global mx object? Side notes: I do not want to use pagination. I am using Mendix Studio Pro: 9.2.0 and @mendix/pluggable-widgets-tools 9.1.0 with Typescript
asked
1 answers
5

In your top level React component, make sure to check on the status of the datasource and only if available feed the datasource to the actual display component:

if (!datasource || datasource.status !== ValueStatus.Available || !datasource.items) {
	return <div>Loading data...</div>;
}
return (
	<div>
		<SomeContainer
			someAttr={this.props.someAttr}
            mxObjects={datasource.items}
			/>
		</div>
	);

In your display component iterate over your mxObjects and get the actual values of its attributes via something like below:

const mxObjects: ObjectItem[] = this.props.mxObjects;	
if (mxObjects) {
	// eslint-disable-next-line array-callback-return
	props.mxObjects.map(mxObject => {
		const someAttrValue = Number(this.props.someAttr(mxObject).value);

	});
}

You could check out my Google Maps Custom Marker widget available in the Marketplace based on React to see how this is implemented!

 

EDIT: the definition for some attribute, which is connected to the datasource, is covered within the widget XML. It is key set the datasource attribute of this datasource:

<property key="datasource" type="datasource" isList="true" required="false">
	<caption>Data source objects</caption>
	<description>Dynamically load a data source of Mendix objects into the widget.</description>
</property>
<property key="someAttr" type="attribute" required="false" dataSource="datasource">
	<caption>Some attribute</caption>
	<description>The attribute of the data source.</description>
	<attributeTypes>
		<attributeType name="String"/>
	</attributeTypes>
</property>

 

answered