Create a Custom Save Button

1 Introduction

Mendix uses visual models called microflows to define the logic of your application. A microflow is a visual way of expressing what traditionally would be written in code. This how-to explains how you can create a custom save button on a detail page by utilizing microflows.

This how-to will teach you how to do the following:

• Create a custom Save button

2 Prerequisites

Before starting with this how-to, make sure you have completed the following prerequisites:

• Create a basic data layer (for details, see How to Create a Basic Data Layer)
• Create overview and detail pages for the customer object (for details, see How to Create Your First Two Overview and Detail Pages)
• Create a menu item to access the customer overview page (for details, see How to Set Up the Navigation Structure)

3 Replace the Default Save Button With a Custom Save Button

To replace the default Save button with a custom one, follow these steps:

1. Open the Customer_NewEdit detail page, which should look like this:

2. Right-click the Save button and remove it by selecting Delete.

3. Open the Button menu and select Action button.

4. Add the Action button to the button bar:

   

5. Double-click the new Action button to open its properties:

   

6. Change the Caption to Save.

7. Change the Icon to the Save image:

1. In the Events section, select Call a micvroflow and create a new microflow with the name Customer_Save.
2. Click OK to save the new microflow button.

4 Re-create the Default Save Behavior

1. Right-click the new Microflow button and select Go to microflow to open the new microflow:

   

   The microflow should look like this:

   

2. Open the Toolbox from the bottom-left corner of the Modeler:

   
   You can also open it from the View menu:

   

3. Drag a Commit object(s) action from the Toolbox to the line between the green start and red end events, which will insert a commit action activity.

4. Double-click the new activity to open its properties:

   

5. In the Input section, select Customer for Variable and click OK. The microflow should now look like this:

   

6. Drag a Close page action from the Toolbox to the line between the green start and red end events, which will insert a close page action activity. You have now re-created the default save behavior, and the m should look like this:

   

5 Extend the Microflow with Your Own Functionality

1. Drag a Show message action from the Toolbox to the line between the Close page and end event, which will insert a show message action activity.
2. Double-click the new activity to open its properties.
3. Select Information as the Type of message.

4. Enter a message as a Template value, for example, Customer is saved!:

   

5. Click OK to save the properties. The microflow should now look like this:

6 Related Content

• How to Define Access Rules Using XPath
• How to Trigger Logic Using Microflows
• How to Extend Your Application with Custom Java
• How to Work With Lists in a Microflow
• How to Optimize Retrieve Activities
• How to Configure Error Handling
• How to Optimize Microflow Aggregates
• How to Extract and Use Submicroflows
• Button Widgets
• Save Button
• Microflow Activities