Drag and Drop Widget for Mendix Web Apps

I wrote this blog in order to demonstrate how to use React hooks to develop a drag and drop widget in Mendix Studio Pro version 9.2.0.

Let’s start with a new pluggable widget, by running the yo command (Fig. 1.)

Fig. 1. Create a new pluggable widget.

After entering all the widget details and confirm your choices the widget generator will create your widget scaffold, and if it completes successfully you will see a success message. Then we can use VS code to open it up (Fig. 2.)

Fig. 2. Open the pluggable built widget with vscode.

https://www.mendix.com/pricing/

In the components folder of your widget, rename the component to “ReactDnD.jsx”. First three line of code can be changed to reflect the below (Fig. 3.)

Fig. 3. New ReacDnD component.

Next we need to install the react library “beautiful dnd”. Use the command npm install react-beautiful-dnd — save (Fig. 4.)

Fig. 4. Install react beautiful dnd

Now it’s time to add some css, we can add the css in ui folder (Fig. 5.)

.App {
text-align: center;
}
.App-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 1.5vmin);
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.characters {
list-style: none;
padding-left: 0;
}
.characters li {
display: flex;
align-items: center;
border: solid 2px #d0d0d0;
border-radius: 0.2em;
padding: 0.5em 0.8em 0.5em 0.5em;
margin-bottom: 1em;
}
.characters p {
max-width: none;
font-weight: bold;
margin: 0;
}
.characters-thumb {
overflow: hidden;
flex-shrink: 0;
width: 2em;
height: 2em;
background-color: #e8e8e8;
padding: 0.5em;
margin-right: 0.5em;
}
.characters-thumb img {
display: block;
width: 100%;
height: auto;
}

Fig. 5. Styling for DnD widget

Change the parent file to (Fig. 6.), and do the same with .editorPreview.jsx

Fig. 6. Modified parent pages.

For the moment, we need to make a dataset to populate the child component with some data (Fig. 7.). I will publish another blog soon about how to integrate this with a Mendix data source.

Fig. 7. A set of data.

In the child component, we have to create a new function to handle the drag and drop functionality, called handleOnDragEnd (Fig. 8.)

Fig. 8. Function handle Drag and Drop.

Now we can return the widget view with custom css class. (Fig. 9.)

<div className=”App”>
<header className=”App-header”>
<h1>Final Space Characters</h1>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId=”characters”>
{provided => (
<ul className=”characters” {…provided.droppableProps} ref={provided.innerRef}>
{gokuChar.map(({ id, name, thumb }, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{provided => (
<li
ref={provided.innerRef}
{…provided.draggableProps}
{…provided.dragHandleProps}
>
<div className=”characters-thumb”>
<img src={thumb} alt={`${name} Thumb`} />
</div>
<p>{name}</p>
</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
</header>
</div>

Fig. 9. Return view with custom css class.

Go to terminal and run the command> npm run build (Fig. 10.)

Fig. 10. Build a widget.

As I used a hard coded data set to populate the widget, the images need to be placed in a specific location. Please make sure to either update the path relative to your project files, or if you have copied me exactly, my file path for this is E:\Mendix\TBN-ReactBeautyDnD-main\theme\web\images (Fig. 11.)

Fig. 11. Image path in Mendix.

Your widget will be in path …\tBNReactBeautifulDND\dist\1.0.0\. Then you can move it to …\Mendix\TBN-ReactBeautyDnD-main\widgets\ (Fig. 12)

Fig. 12. Moving widget to destination project widget folder.

Go to Mendix Studio Pro, and press F4 to synchronise your directory. Then add the new widget on the page Home_Web (Fig. 13).

Fig. 13. Place widget on the Home_Web page.

You can then run your app locally or in the cloud, and you will see a screen something like this, have fun playing with the drag and drop!(Fig. 14.)

Live Demo.

Mendix

Happy coding!

Read More

Build a Pluggable Web Widget: Part 1 - Studio Pro 9 How-to's | Mendix Documentation

Build a Pluggable Web Widget: Part 2 (Advanced) - Studio Pro 9 How-to's | Mendix Documentation

Pluggable Widgets API - APIs & SDK | Mendix Documentation

From the Publisher -

If you enjoyed this article you can find more like it at our Medium page or at our own Community blog site.

For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.

Interested in getting more involved with our community? You can join us in our Slack community channel or for those who want to be more involved, look into joining one of our Meet ups.