Working with Lists — React pluggable widgets
Learning to leverage React widgets within Mendix brings forth a world of possibilities. Whether you’re seeking to integrate entity lists for enhanced functionality or exploring novel ways to augment user experiences, congratulations on taking this exciting step forward. This guide will navigate the process of seamlessly incorporating Object Lists into your Mendix application using React widgets. So, let’s dive in and unlock the potential of this dynamic fusion.
Prerequisites
There are some prerequisites that you should know before starting:
1) Knowledge about How to create a React pluggable widget (click here to learn).
2) Have some data in the Mendix database of that entity.
Use case
You want to show a list of values in a dropdown but before that, you want to change those values using application logic.
In this scenario, a good solution is to build a React widget that takes the Object List of an entity and performs your desired actions on those values before showing them in the dropdown.
Let’s build
If you still haven’t created a React pluggable widget then I suggest you to learn the basics of widget development first.
For this simple learning example, I’m creating a widget that will use an Object List of an entity from Mendix, and print it into the browser.
My Widget name is AdaptiveDropdown which is going to be a simple widget that shows the Object List of an entity’s first attribute in the browser.
- Open your project in any code editor, I am using VSCode.
2. Now inside you’re src folder you should have two .XML files: package.xml and another as per your project name (yourProject.xml) for me it’s AdaptiveDropdown.xml
3. In the second .XML file you need to edit the code according to your preferences and then add this code.
<propertyGroup caption="General">
<property key="objectsDatasource" type="datasource" isList="true">
<caption>Selectable objects</caption>
<description />
</property>Let me break it down for you:
· Inside the property tag you need to add the value inside the key keyword which you will need to use inside the react component to access the values as props.
· Inside the type of keyword set the value to “datasource”.
The “datasource” value will give the power to the Mendix widget to get the value from the database, association, microflow, nanoflow, and XPath.
4. Now open the file with .JSX extension with the name of your project. For me it’s AdaptiveDropdown.jsx
5. Inside this file, you need to enter the code below
import { createElement, Fragment, useState, useEffect } from "react";
import "./ui/AdaptiveDropdown.css";
export function AdaptiveDropdown(props) {
const [ObjectList, setObjectList] = useState([]);
useEffect(() => {
try {
const { items } = props.objectsDatasource;
let list = items.map((item, index) =>
item[Object.getOwnPropertySymbols(item)[0]].jsonData.attributes);
setObjectList(list);
} catch (e) {console.log("error", e);}
}, [props.objectsDatasource]);
return (
<div>
{ObjectList.map((person, index) => (
<div key={index} className="list">
{Object.keys(person).map((key, i) => (
index === 0 && <strong key={i} className="listItem">
{key}
</strong>
))}
</div>
))}
{ObjectList.map((person, index) => (
<div key={index} className="list">
{Object.keys(person).map((key, i) => (
<div key={i} className="listItem">
{person[key].value}
</div>
))}
</div>
))}
</div>
);
}Let me break it down for you:
· In the AdaptiveDropdown component first we are using the try-catch block for error handling purposes, this is best practice, and you should always try to use a try-catch if possible.
· In the try catch block we are deconstructing the items out of the props.objectDatasource (remember objectDatasource is the key to the property that we defined in .XML file)
· All the values of objects of the entity are in items. To get the values of items we are using the map function, which will run for all the values inside the items list.
· To get the values of the Mendix entity we are using this code block
item[Object.getOwnPropertySymbols(item)[0]].jsonData.attributes);
· After executing the above code you will get an array with all the attributes inside the entity with their name and values. For example:
[
{
Name: {
value: "Sachin"
},
Age: {
value: "21"
},
Standard: {
value : 10
}
},
{
Name: {
value: "Sukhi"
},
Age: {
value: "23"
},
Standard: {
value : 10
}
}
];
6. Now run the npm run build command to compile the widget, then go to Mendix Studio Pro, click on the App menu item on the top left, and run the synchronize app directory command (or hit f4 for the same result)
7. Your new widget should now appear in the toolbox inside Studio Pro, drag and drop your widget on the page from the widgets toolbox and double-click on it to open the general properties panel.
8. Remember we have created a property tag with the key objectsDatasource and type data source and the caption Selectable objects.
9. We have that as in our Selectable objects properties. Now click the edit button to open the Datasource selection panel.
10. I selected the Database option and the AdpativeDropdown entity to get all the objects as a list inside the react pluggable widget.
11. Now run the modular and see the results on the browser
Here we can see the results are achieved.
Conclusion
I hope you enjoyed reading this tutorial on how to work with Entities as lists using Javascript. If you have any questions, please feel free to leave a comment here.
Read more
From the Publisher -
Inspired by this article to bring your ideas to life with Mendix? Sign up for a free account! You’ll get instant access to the Mendix Academy, where you can start building your skills.
For more articles like this one, visit our Medium page. And you can find a wealth of instructional videos on our community YouTube page.
Speaking of our community, join us in our Slack community channel. We’d love to hear your ideas and insights!
