CRUD operations using Mendix’s JavaScript and Client API

CRUD operations using Mendix’s JavaScript and Client API

Before we get into the content - I know what you are thinking; why use the JavaScript and Client API to perform CRUD operations?

CRUD — create, read, update and delete.

Whether you’re a part of a developer community or just in life, we all have to remember to keep learning. Try something new, make mistakes, learn from them, and discover that learning is a joyful thing. So why not try and find the joy in trying something new together?

So sit back, relax and enjoy the blog.

CRUD operation

• Usually, CRUD operations can be achieved in Mendix at page Level and within Microflows and Nanoflows.
• Here I use Client API code to build a new widget, where we face one block, That we cannot modify.
• But here we use JavaScript action to achieve this CRUD operation.

JavaScript can be useful in many scenarios, but in Mendix it’s most helpful to create widgets and add custom JavaScript actions.

JavaScript Actions

With JavaScript actions, you can extend your application’s functionality in ways nanoflows alone cannot. To use a JavaScript action, you need to call it from a nanoflow using the JavaScript Action Call. Each JavaScript action is defined in Mendix Studio Pro and corresponds to a file {JavaScript action name}

Client API

The Client API is a powerful API to interact with the Mendix runtime in JavaScript actions(Not recommended for use in widgets). Here, we simply create an object using client API.

Let’s step into the code to accomplish this.

Creating an object is quite easy but going for a new edit page is considered an object. Next using the JavaScript and Client APIs, we will create a new entity.

1. Create an entity in the domain model; name it whatever you like, and generate an overview page for it.

2. Right-click the module in your app explorer, Create a JavaScript action, and name it appropriately.

3. Open the action and create a type parameter with a name based on your entity.

Type parameter tab.

Add the same parameter in the general tab same as in the image

General tab for reference.

4. In the general tab the parameter you’re creating should be an entity and the return type should be an Object, like the image given below.

5. Go to the overview page select button and edit the on-click action to call a nanoflow. Create a nanoflow with good naming conventions.

The call JavaScript action only works in nanoflows.

6. Again go to the JavaScript action, there will be a tab called code, click the code tab. This will be where we add our code to create an object.

It is important to remember that you should write your code in-between the beginning and end-user code blocks, otherwise your changes will be overwritten at compile time.

7. Go to the documentation of client API and Scroll down to click on data.

• From there you can see the Client API code, Go through the docs and scroll down to the center until you find mx.create. We can use this code as-is, you just need to modify it based on your Entity and attribute names.

mx.data.create({
entity: “MyFirstModule.Cat”,
callback: function(obj) {
console.log(“Object created on server”);
},
error: function(e) {
console.error(“Could not commit object:”, e);
}
});

You can simply copy the code in the JavaScript action and save the Action.

8. Now, Go to the nanoflow that you created for the button on the overview page. Place an activity and call the JavaScript action for that activity. Then use create an object and show page activity, because you’re going to create an object in the new edit page. In the end, the ‘create object’ nanoflow will look like this.

9. Now run the app and see if the code is working. Notice when you go to the new edit page, it’s not editable and it seems you are unable to create an object.

10. We need to go back to the JavaScript action, where you can see only the Client API create object code. Below that you can wrap the Mendix client API in a promise. You need to write the code to make this new edit page editable. That is called promise API.

Client API Create Object Code

Promise API code to Resolve and reject the object

• We are going for this code because you can dynamically set attributes instead of static to create an object in the new edit page.

Here I attached the promise API code example from the Mendix docs to create an object. Copy the code and paste it below the Client API code.

Link to Promise API code Example

11. You can save the changes to your project and run the app again. If all was done correctly, you can now edit the object on the page.

Congratulations! You have successfully created an object using JavaScript and the Mendix Client API.

In order to perform updates and deletes on objects, we need to repeat the process similar to how we handled creating objects.

· Again, go to client API code in Mendix documentation search for update, and delete. Copy the code and paste it into JavaScript actions.

To update the Object using Client API(Code for updating an object)

// BEGIN USER CODE
mx.data.update({
entity: “MyFirstModule.Office”,
callback: function(obj) {
console.log(“Object created on server”);
},
error: function(e) {
console.error(“Could not commit object:”, e);
}
});
// END-USER CODE
}

Below the Image is the edit object nanoflow for your reference.

Edit Object nanoflow using Client API

To delete the object using Client API ( Code for deleting an Object)

mx.data.remove({
entity: “MyFirstModule.Office”,
callback: function() {
console.log(“Objects removed”);
},
error: function(e) {
console.log(“Could not remove objects:”, e);
}
});
return new Promise((resolve, reject) => {
if ( ! objectToDelete ) {
resolve(false); // nothing to delete
return;
}
mx.data.remove({
guid: objectToDelete.getGuid(),
callback: function() {
console.trace(“Object removed”);
resolve(true);
},
error: function(e) {
reject(e);
}
});
});

• Delete object nanoflow for reference.

Conclusion

Now, you are able to create, update and delete objects using these methods. While it may seem unusual to interact with data like this in a Mendix app, you can now implement and try different JavaScript Actions based on your needs and interact with data in your model directly via JavaScript — a useful skill in your toolkit.

I hope you found this interesting and useful, please feel free to ask any questions in the comments here.

I will see you in the next article — Bye!!!

Read more

Client API

Build JavaScript Actions: Part 2 (Advanced)

Implement Best Practices for JavaScript Actions

From the Publisher -

If you enjoyed this article you can find more like it on our Medium page. For great videos and live sessions, you can go to MxLive or our community Youtube page.

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? Join us in our Slack community channel.