Supercharging Mendix Applications with React

Supercharging Mendix Applications with React

Leveraging onClick, onChange, and onLeave Events with Pluggable Widgets

Welcome to my blog! Here I will explore the creation of dynamic actions like onClick, onChange, and onLeave specifically tailored for Mendix, using React pluggable widgets. Through this journey, I’ll delve into the intricacies of event handling and unveil the process of triggering these actions seamlessly with React code within the Mendix environment. Join me and embark on a journey of understanding event-driven functionalities for enhanced Mendix applications.

Prerequisites

There are some prerequisites that you should know before:

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.
3. Have some knowledge about events.

Use case

Maybe you are in a situation where you need to create a custom widget as per your requirements and you need to trigger the microflow or nanoflow when the client clicks on the rendered widget component, In that case, you need to learn how to create the event actions in your React pluggable widget code.

Creating the Widget Scaffold

If you still haven’t created the React pluggable widget, please do that first.

For the sake of learning, I’m going to create a widget that will be the simple text input box and apply the actions of the OnClick, OnChange, and OnLeave event

I named my widget ‘SimpleInputBox’ which is going to be a simple widget that shows the input container on the browser some actions will be triggered as per user interactions with it like Click, Change, or Leave.

1. Open your project in any code editor I am using VSCode.

2. Now inside you’re src folder, you should have two .XML files, one is called package.xml and the other as per your project name (yourProject.xml) for me it’s SimpleInputBox.xml

3. In that .XML file you need to edit the code according to your preferences and then add this code.

          <properties>
        <propertyGroup caption="General">
            < property key="Attribute" type="attribute" required="true">
                <caption>Attribute (path)</caption>
                <description />
                <attributeTypes>
                    < attributeType name="String" />
                </attributeTypes>
            </property>
        </propertyGroup>

        <propertyGroup caption="Events">
            <property key="OnChange" type="action">
                <caption>OnChange</caption>
                <description />
            </property>
        </propertyGroup>

Let me break it down for you:

• Add the above code inside your <properties> tag in the .XML file.
• This code has two <propertyGroup> One with a General name and another with an Events name.
• The first <property> will be used to select the desired attributes so set the type to attribute.
• The second <property> will add the action with the key OnChange so set the type to action.

4. Now open a file with. JSX extension with the name of your project. For me it’s SimpleInputBox.jsx

5. In this example we are going to create three types of action events, one by one

OnChange Events

Firstly, we will learn about the OnChange event action for that enter the code below.

import React, { createElement } from "react";
import "./ui/SimpleInputBox.css";
import { SimpleInputBoxContainerProps } from "../typings/SimpleInputBoxProps";

const SimpleInputBox: React.FC<SimpleInputBoxContainerProps> = props => {
    const value = props.Attribute.displayValue || "";

    const handleOnChange = (e: any) => {
        let updatedValue = e.target.value;
        props.Attribute.setTextValue(updatedValue);

        if (props.OnChange && props.OnChange.canExecute) {
            props.OnChange.execute();
        }
    };

    return (
        <input value={value} onChange={(e: any) => handleOnChange(e)} />
    );
};
export default SimpleInputBox;

Code breakdown:

• Here I have returned an input element that takes the value from attribute props, which we added in the first property in the .XML file.
• We also add an onChange event listener which will trigger the handleOnChange function whenever a user makes changes inside the input element.
• The handleOnChange function first sets the updated value to the entity’s attribute in the Mendix database.
• Then it checks if the OnChange action is added and is executable in the events panel of the widget, then it will make the action OnChange run the execute() function.

1. Now run the npm run build to compile the widget then go to your mendix modular click on the app button on the top left and run the synchronize app directory.

2. Next, drop your widget on the page from the widgets toolbox and double-click on it to open the general properties panel. Add the attribute and open the Event Panel, click on the edit button of the OnChange action add a microflow with a show message action to see the OnChange action working.

3. Run the app in Studio Pro and see the results on the browser.

4. You will see when you make any change in the input box the OnChange action is triggered and displays a message.

OnClick Events

1. Now, we will learn about the OnClick action. For that, enter the code below in the .XML file.

<property key="OnClick" type="action">
        <caption>OnClick</caption>
        <description />
</property>

2. Enter the below code in your project.tsx file.

import React, { createElement } from "react";
import "./ui/SimpleInputBox.css";
import { SimpleInputBoxContainerProps } from "../typings/SimpleInputBoxProps";
const SimpleInputBox: React.FC<SimpleInputBoxContainerProps> = props => {
    const value = props.Attribute.displayValue || "";

    const handleOnClick = () => {
        if (props.OnClick && props.OnClick.canExecute) {
            props.OnClick.execute();
        }
    };

    return <input value={value} onClick={handleOnClick} />;
};
export default SimpleInputBox;

Code breakdown:

• Here I have returned an input element that takes the value from attribute props, which we added in the first property in the .XML file.
• I also added an onClick event listener which will trigger the handleOnClick() function whenever the user makes any Click inside the input element.
• The handleOnClick() function checks if the onClick action is added and it is executable in the events panel of the widget then it will make the action onClick run the execute() function.

3. Now run the npm run build to compile the widget then go to Studio Pro, click on “app” in the top level Menu (top left), and run the synchronize app directory command.

4. Run the app in Studio Pro and see the results on the browser.

5. You will see when you Click on the input box the OnClick action triggers and performs the action.

OnLeave Events

1. Now, we are going to learn about OnLeave action. For that, enter the code below in your .XML file

            <property key="OnLeave" type="action">
                <caption>OnLeave</caption>
                <description />
            </property>

2. Enter the below code in your project.tsx file.

import React, { createElement } from "react";
import "./ui/SimpleInputBox.css";
import { SimpleInputBoxContainerProps } from "../typings/SimpleInputBoxProps";

const SimpleInputBox: React.FC<SimpleInputBoxContainerProps> = props => {
    const value = props.Attribute.displayValue || "";

    const handleOnLeave = () => {
        if (props.OnLeave && props.OnLeave.canExecute) {
            props.OnLeave.execute();
        }
    };

    return <input value={value} onBlur={handleOnLeave} />;
};

export default SimpleInputBox;

Code breakdown:

• Here I have returned an input element that takes the value from attribute props, which we added in the first property in .XML file.
• I also added an onBlur event listener which will trigger the handleOnLeave() function whenever the user Leaves or Clicks outside the input element.
• The handleOnLeave() function checks if the OnLeave action is added and it is executable in the events panel of the widget then it will make the action OnLeave run the execute() function.

3. Now run the npm run build to compile the widget then go to Studio Pro, click on “app” in the top level Menu (top left), and run the synchronize app directory command.

4. Run the app in Studio Pro and see the results on the browser.

5. You will see when you leave from the input box, the OnLeave action is triggered and the message is displayed

Conclusion

Thank you for reading this blog, I hope you have enjoyed it and learned a new skill on the way. Please feel free to leave any comments or suggestions here. Thank you!

Read more

Build a Pluggable Web Widget: Part 1

Build a Pluggable Web Widget: Part 2 (Advanced)

Property Types

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!