Custom Actions

Guide on how to create and manage custom actions in your application.

Actions provide users with the ability to extend the functionality of their application to meet various needs. Such actions can include specific business rules that need to be applied to process application data.

Actions can be presented in the form of buttons in your application but can also be queued by trigger events.

Certain actions already exist throughout the TipoTapp platform. "Delete", "Edit", and "Refresh"

These are just some of those that are built into your apps by default.

One way of triggering Actions are when users engage them with buttons.

When engaged, background functions that execute specific actions are executed.

These running codes can either be browser-based processes or cloud functions executed through services like AWS lambda.

Custom Actions can be created for all app views, and can be used to execute a wide-range of processes.

There are two ways to create custom Actions;

Client-side Actions

Client-side actions are executed locally in the browser through JavaScript-based code. This enables the user to access and modify application data through the browser.

To demonstrate the ability to create actions, we will be adding actions to a tipo in the Student Management app.

For this guide, we will create "Approve" and "Reject" buttons for the Detail View of the Application tipo.

Custom Actions: Detail View

We will create "Approve" and "Reject" buttons in the Detail View of the Application tipo.

To create the Action, edit the Application tipo, and go to the View Tab.

Under the Actions section, add a new item.

A new blank action item will be added to the list.

Label the action "Approve", and select an icon.

For this example, use a check icon.

Note: If a Label is specified, the Action will appear as a labeled button, however, if an icon is selected along with the label, the Action will be a round button with the identified icon.

Under the Visibility section of the new action there will be “Highlight” and “Hidden” options.

“Highlight” ensures that the button is accessible to users.

“Hidden” hides the button and its function from user interaction.

We want the users to be able to use the “Approve” button, set “Highlight” to “Yes”.

Note: If both “Highlight” and “Hidden” are set to "No", the action button will still be in the interface, but will be accessible via a more options button on the upper right side of the interface.

In the Visibility Expression section, restriction criteria can enter to determine if and when the button will be visible.

For our example, we want that the “Approve” button to be visible only if the application status is set to “Processing”.

In the Visibility Expression, we add the expression that ensures that the "Approve" button shall only appear when the application status is "Processing".

The Configuration section is where you configure the actual action that you want the button to apply.

For our example, the action we will be applying is changing of the application records status to “Approved”.

Now, let's do the same process for the "Reject" button.

Add a new Action, labelled "Reject".

In this example, we will use a cut icon.

Add an expression, similar to the previous action, to the Visibility Expression section.

Here, we want a similar condition to the previous action, that the "Reject" button will be only made visible when the application status is "Processing".

For the Configuration section, we will add the function that changes the application status to "Rejected".

Review your settings and ensure that you have all the preferences right, then save your edits.

Once the build is completed, go to the live app via the application Home then Application.

Open an item with a status set to “Processing” in the Application page.

In the Detail View, you will see the Approve and Reject button that you have created in the upper right section of your application.

When you click on the approve or reject button the application status is updated respectively.

Custom Actions: List View

Let's now add the same function to the List View of the Application tipo

We will be adding an Approve Application labelled button, but with multiple item selection enabled for faster user processing of records.

Go into the edit mode of the Application tipo, then proceed to List tab.

Add a new action item in the Actions section, labelled "Approve Application".

Set no icon since this is intended to be a labelled button.

In the List tab, options for multiple and single item selection are available.

For this example, set the Allow Multi Select to yes.

With this enabled users will be able to action multiple items in the list at the same time.

You will also see a Visibility Expression section. For now leave it blank.

In the Configuration section, we will add the function that calls all selected data rows and changes the application status of each one to "Approved".

Review your settings, then save your edits.

After the refresh go to the app via Home, then go to the Application tipo list view.

The button will be added to the upper right section of the interface.

When you click on the Approve Application button, you will be able to then select multiple items from the list.

Once the items are selected you can then click on the process button to update the selected applications status.

To know more about the details of the functions used for the actions that we have created, refer to our developer documentation for custom actions and custom action: expressions and functions.