Add Save as Draft with Validation in Form

Introduction

When one is in a flow, there are times one would like to simply validate the form data without actually completing the assignment.

• The Save as Draft button, by default, will only save the form data without validation.
• The Complete button, by default, will validate the form data and complete the assignment.
• The Save As Draft with Validation button, which is part of the article here, will validate and save the form data but not complete the assignment.

How does it work?

To implement a button that saves and validates form data without completing the assignment, follow these steps:

1. To create a new button, open the form in the form builder.
2. Create a new section at the bottom of the form.
3. Edit the section's load data store, and set it to Bean Shell Form data store.

4. In the Bean Shell Form data store, add the following code.

   import org.joget.apps.app.service.AppService;
   import org.joget.apps.app.service.AppUtil;
   import org.joget.apps.form.lib.CustomHTML;
   import org.joget.apps.form.lib.SubmitButton;
   import org.joget.apps.form.model.Column;
   import org.joget.apps.form.model.Element;
   import org.joget.apps.form.model.Form;
   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;
   
   Collection formActions = new ArrayList();
   String saveButtonLabel = "Save As Draft with Validation";
   
   
   // Submit button that validates and saves, but does not complete the assignment.
   // When validation fails, setStay(true) keeps the user on the form so the errors
   // are shown. Without it, the Inbox redirects back to the list and the errors
   // (and the user's unsaved input) are silently lost.
   Element saveButton = new SubmitButton() {
       public FormData actionPerformed(Form form, FormData data) {
           AppService appService = (AppService) AppUtil.getApplicationContext().getBean("appService");
           FormData result = appService.submitForm(form, data, false);
           if (result.getFormErrors() != null && !result.getFormErrors().isEmpty()) {
               result.setStay(true);
           }
           return result;
       }
   
   // Keeps the standard Submit Button template (submitButton.ftl) resolvable
       public String getClassName() {
           return SubmitButton.class.getName();
       }
   };
   saveButton.setProperty(FormUtil.PROPERTY_ID, "customSaveAsDraft");
   saveButton.setProperty("label", saveButtonLabel);
   formActions.add(saveButton);
   
   
   Section section = element;
   ArrayList columns = (ArrayList) section.getChildren();
   
   
   Column column = columns.get(0);
   column.setProperty("horizontal", "true");
   column.setChildren(formActions);
   
   
   // Add custom HTML to move the button into the form's button bar.
   // getElementParameterName() matches the section's rendered HTML id,
   // including when the form is used inside a Subform.
   Element html = new CustomHTML();
   String sectionId = FormUtil.getElementParameterName(section);
   String script = "<script>$(document).ready(function(){";
   script += "$('#" + sectionId + "').find('.form-cell').prependTo('#section-actions .form-column');";
   script += "$('#" + sectionId + "').remove();";
   script += "});</script>";
   html.setProperty("id", "button_layout_fixes");
   html.setProperty("label", "");
   html.setProperty("value", script);
   formActions.add(html);
   
   
   return null;

Related documentation

For advanced form customization, learn how to Temporarily Disable Form Validation on Form Button Click. Discover how this technique can provide flexibility in the data entry process and enhance the user experience.

Download sample app