How to pass/update Mendix object attributes in pluggable widget

Working with Mendix objects in pluggable widgets

Pluggable web widgets are custom-built widgets. These widgets are based on a JavaScript library called ReactJS. With the help of a custom pluggable widget, you can develop powerful tools.

Prerequisites

Install the LTS version of Nodejs.

Install Yeoman by pasting this command into your terminal.

npm install -g yo

Install the Mendix Pluggable Widget Generator with this command in your terminal.

npm install -g @mendix/generator-widget

Install an Integrated Development Environment (IDE) of your choice (VS Code etc).

Have a basic understanding of React, JavaScript, and TypeScript.

Creating a simpleInputBox Widget

Open Mendix Studio Pro, and create a new app. In your new Mendix app’s directory create a new folder named CustomPluggableWidgets.

• Open your terminal and navigate to CustomPluggableWidgets

cd "C://yourFilePath"

• Create a widget using the widget generator by entering the following command:

yo @mendix/widget SimpleInputBox

After that, the generator will ask you a few questions during setup:

Step 1: How to Get Mendix Attribute Value in Pluggable Widget

1. Open SimpleInputBox folder in your IDE.

2. Create a new file in src/components/InputBox.tsx.

3. Write the following code in src/components/InputBox.tsx.

4. In src/TextBox.xml, the generator creates a sample property sampleText. Remove this property and add the new property Text attribute:

5. Now, open the terminal and execute the below command.

npm run build

6. If you get some error in the terminal ignore it for now.

E.g. const value = props.Attribute.displayValue || "";

In the above line, we are getting our attribute value from the Mendix and passing it to the InputBox component.

7. Now write the below code in src/SimpleInputBox.tsx

8. Now write the below code in src/SimpleInputBox.editorPreview.tsx file.

9. Now execute the below command in your terminal to generate a .mpk file. So that we can use our widget.

npm run build

Note: Ensure you have navigated to your SimpleInputBox folder in your terminal before running the command.

10. Now open Mendix Studio Pro and find your widget for the first time! You will need to refresh the files in Studio Pro. Use F4 or select App > Synchronize Project Directory from the Studio Pro menu.

Step 2: How to Update/Change Mendix Attribute value in Pluggable Widget

1. In the below code, we are updating the Mendix attribute value.

 const handleChange = (e: any) => {
    let updatedValue = e.target.value;
    props.Attribute.setTextValue(updatedValue); // Update mendix attribute
 }

2. Update the ‘src/SimpleInputBox’ file with the following code.

3. Now update this component src/components/InputBox.tsx file

4. Now Remove the ‘src/component/HelloworldSample.tsx’ file.

5. Now execute the below command in your terminal to generate a .mpk file. So that we can use our updated widget.

npm run build

6. Now open Mendix Studio Pro to refresh the project files once again. Use F4 or select App > Synchronize Project Directory from the Studio Pro menu.

Read more

Build a Pluggable Web Widget: Part 1

Build a Pluggable Web Widget: Part 2 (Advanced)

Build a Pluggable Native Widget

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!