Run Process from CRUD Add Button

Introduction

In Joget applications, integrating functionalities from different UI elements can significantly streamline user interactions and improve efficiency. One such enhancement involves combining the Run Process feature into the CRUD element’s add button. This allows users to initiate processes directly from the CRUD interface, eliminating the need to navigate between multiple categories. By consolidating these actions, you simplify the interface and create a smoother workflow. This guide will walk you through how to set up this integration and customize the CRUD add button to trigger a Run Process element.

How does it work?

This approach integrates the functionality of a Run Process element (e.g., Expense Approval) into the add button of a CRUD element (e.g., Manage Sample). Typically, these elements operate independently, requiring users to navigate to the Expense Approval category to start the approval process. However, combining these elements allows users to initiate the approval process directly from the CRUD interface.

Here’s a step-by-step guide:

Obtain the Menu ID or Link ID of the Run Process Element. This ID is essential for redirecting the CRUD's add button to trigger the process instead of directly adding a new record.
Add the following script to the Custom Footer of the CRUD menu. This code overrides the default Add Record functionality, redirecting users to the Run Process element when they click the Add button:
```
<script type="text/javascript">
$(function(){
   
$("button[value='CRUD_New']").click( function(event){
    event.preventDefault();
    window.location.href = "sample_submit_process"; //replace the value with the custom ID of Run Process
});
});

 </script>
```
After integrating the Run Process into the CRUD element, you can hide the original Expense Approval category from the user interface. This further simplifies the application and prevents users from accessing the process through multiple paths.

Introduction

How does it work?

Related documentation