💾 Custom "Save as Draft Without Validation" Button with Auto-Redirect in Joget Forms

🧩 Overview

In many Joget applications, users want the flexibility to save their form progress as a draft and return later to complete it.

This guide shows how to create a custom "Save as Draft" button in Joget using a BeanShell script that:

• Adds a Save as Draft button dynamically.
• Automatically updates workflow status fields (status and wf_status).
• Redirects users to the Inbox (or another page) after saving.

---

⚙️ How It Works

✅ The script dynamically inserts a SaveAsDraftButton inside a section’s layout.

✅ It then injects a small JavaScript snippet using a CustomHTML element to handle:

• Status updates to "Draft"
• Conditional redirection to a custom Userview page (your_menu_id)

---

💻 Full Code

Paste this BeanShell script into your Form → Section → Data → Load Binder:

import org.joget.apps.form.lib.SaveAsDraftButton;
import org.joget.apps.form.lib.SubmitButton;
import org.joget.apps.form.lib.CustomHTML;
import org.joget.apps.form.model.Column;
import org.joget.apps.form.model.Element;
import org.joget.apps.form.model.FormAction;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.Section;
import org.joget.apps.form.service.FormUtil;
import java.util.ArrayList;
import java.util.Collection;

// Create a collection for form actions
Collection formActions = new ArrayList();
String saveButtonLabel = "Save As Draft"; 
Element saveButton = new SaveAsDraftButton();
saveButton.setProperty(FormUtil.PROPERTY_ID, "customSaveAsDraft");
saveButton.setProperty("label", saveButtonLabel);
formActions.add(saveButton);

// Get the form section and its first column
Section section = element;
ArrayList columns = (ArrayList) section.getChildren();
Column column = columns.get(0);
column.setProperty("horizontal", "true");
column.setChildren(formActions);

// Add layout fix and script logic
Element html = new CustomHTML();
String script = "<script>$(document).ready(function(){ ";

// Move the button layout into section-actions
script += "$('#" + section.getPropertyString("id") + "').find('.form-cell').prependTo('#section-actions .form-column');";
script += "$('#" + section.getPropertyString("id") + "').remove();";

// Set workflow status to Draft
script += "$('#status').val('Draft').trigger('change');";
script += "$('#wf_status').val('Draft').trigger('change');";

// Check if Save As Draft button was clicked and redirect
FormData fd = formData;
if (fd.getRequestParameter("customSaveAsDraft") != null) {
    script += "window.location.href='your_menu_id';"; // Redirect to Inbox or another page
}

script += "});</script>";

// Apply the custom HTML script
html.setProperty("id", "button_layout_fixes");
html.setProperty("label", "");
html.setProperty("value", script);
formActions.add(html);

return null;