Add Save as Draft feature to Run Process Activity Form

Introduction

This feature allows users to save a draft of their form entries without completing the process, enhancing flexibility and user experience.

Form configuration

Before configuring the form, ensure you have the necessary permissions and access rights to make these changes.

1. Add a Hidden Field to the first form linked to the Run Process entity in the process activity mapping.
2. Set the ID of this field to id.
3. Enter #requestParam.recordId# in the Default Value field to ensure that if there's an existing record being loaded, the new process instance will refer to this specific record.
4. Add an empty section to the same form.
5. Edit this section and set the Load Data Store to Bean Shell Form Data Store.
6. Insert the following code to integrate a Save as Draft button and fix layout issues:
   

   import org.joget.apps.form.lib.SaveAsDraftButton;
   import org.joget.apps.form.lib.CustomHTML;
   import org.joget.apps.form.model.*;
   
   import java.util.ArrayList;
   import java.util.Collection;
   
   Collection formActions = new ArrayList();
   
   String saveButtonLabel = "Save As Draft";
   Element saveButton = new SaveAsDraftButton();
   saveButton.setProperty(FormUtil.PROPERTY_ID, "saveAsDraft");
   saveButton.setProperty("label", saveButtonLabel);
   
   formActions.add(saveButton);
   Section section = element;
   ArrayList<Column> columns = (ArrayList<Column>) section.getChildren();
   Column column = columns.get(0);
   column.setProperty("horizontal", "true");
   column.setChildren(formActions);
   
   // Add a custom HTML to fix the layout issue
   Element html = new CustomHTML();
   String script = "<script>$(document).ready(function(){";
   script += "$(\"#" + section.getPropertyString("id") + "\").find(\".form-cell\").prependTo(\"#section-actions .form-column\");";
   script += "$(\"#" + section.getPropertyString("id") + "\").remove();";
   script += "});</script>";
   
   html.setProperty("id", "button_layout_fixes");
   html.setProperty("label", "");
   html.setProperty("value", script);
   
   formActions.add(html);
   
   return null;

UI configuration

Before proceeding with the UI configuration, ensure you have the necessary permissions and access rights to make these changes.

1. Add a Run Process menu item.
2. Assign it a meaningful Custom ID, e.g., runProcess.
3. Set the label, e.g., Start Application Process.
4. Add a List/CRUD to the UI.
5. Use the List Builder to edit the list and add a Hyperlink action.
6. Set the Hyperlink to startApplication (the same value as the Custom ID set earlier).
7. Configure the Hyperlink Parameters with a new row: parameter name as recordId, column name as id.
8. Set the label to Edit.

Redirection upon draft save

To enable redirection upon clicking on the Save as Draft button, add the following lines of codes below into the Bean Shell Form Data Store around line 38.

script += "$(\"#" + section.getPropertyString("id") + "\").remove();";
// Check if it's a save as draft and redirect to the inbox after submission
FormData fd = formData;
if (fd.getRequestParameter("saveAsDraft") != null) {
    script += "window.location.href='inbox';";  // 'inbox' is the Custom ID of an Inbox menu in the Userview Builder
}
script += "});</script>";

Related documentation

This documentation outlines integrating a Save as Draft button in the Joget form and UI, giving users greater control over their data entry processes.

• Hidden Field
• Run Process Menu
• List Menu
• CRUD Menu
• Hyperlink Action
• Bean Shell Form Data Store

Download sample app