DnD Widget for Mendix Web Apps

In order to demonstrate how to use react hooks to develop a dnd widget in mendix version 9.2.0.

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

Fig. 1. Create a new pluggable widget.

After run through the command, you will got the message success. Then using vscode to open it up (Fig. 2.)

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

Rename the component to “ReactDnD.jsx”. First three line of code can be change to (Fig. 3.)

Fig. 3. New ReacDnD component.

Install the react beautiful dnd, npm install react-beautiful-dnd — save (Fig. 4.)

Fig. 4. Install react beautiful dnd

Change the css in ui folder with (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.

Make a set of data on child component (Fig. 7.). In order to integrate with mendix data source, please continue in the next coming blog post.

Fig. 7. A set of data.

Create a new function to handle drag and drop (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 >> npm run build (Fig. 10.)

Fig. 10. Build a widget.

For image path, please make a folder under 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, press F4. Then add the new widget on the Home_Web (Fig. 13).

Fig. 13. Place widget on the Home_Web page.

Then run the app locally, you can see the result like this. (Fig. 14.)

Live Demo.

Happy coding.

Mendix Expert @ TBN Software, Data Scientist, and Technical Practitioner.