Form
#requestParam.recordId#
This is so that, if there's existing record being loaded, when the new process instance is created, the process instance will refer to this very record subsequently.
In the same form, create a new section, leave it empty. Edit the section, set the Load Data Store to Bean Shell Form Data Store. Insert the following code into it.
import org.joget.apps.form.lib.SaveAsDraftButton; 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; 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 columns = (ArrayList) 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;
Userview
In the Userview, add a Run Process, name the Custom ID to something meaningful, e.g. "runProcess". Set the label appropriately, e.g. "Start Application Process".
Why are we doing this?
This is so that user can start a new process instance.
Add a List/CRUD into the Userview, edit the list in Datalist Builder, add in a Hyperlink action. Set the label appropriately, e.g. "List All Drafts".
Set Hyperlink to "startApplication" (the same value that we set in Custom ID in Step 1 earlier).
In Hyperlink Parameters, add a new row - parameter name as "recordId", column name as "id".
Set the label to "Edit".
Why are we doing this?
This is so that user can access the drafts applications that they have already started.
What's next?
The list may be showing all the drafts started by all other users. You may want to edit the list in Datalist Builder to only show entries from the person that initiated it. See Advanced Form Data Data Store on how to filter the list.
Redirection
To enable redirection upon clicking on "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 whether it is save as draft and redirect to 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>";