Form Builder - Learn how to design dynamic forms that change on user input

In this tutorial, we will demonstrate the use of AJAX Subform offered in Joget Workflow Form Builder. It is one of the form elements offered in the Form Builder. We will also show you on how to dynamically build up a select box based on certain conditions. We will be using the HR Expenses Claim App that you can find in the Joget market place. This is the app center of Joget Workflow. Launch the HR Expenses Claim App. Let me show you the use case first. This is the list of rejected claim. We are going to create an appeal process in which we are going to make use of the form elements said earlier. Okay. Let's create a new appeal form. Edit the form section. Make it meaningful. Add a select box into it. We are going to list down rejected claims of the logged in user. We cannot possibly hard code the options in this select box. It must be dynamically pulled out from the app. Therefore, we can use one of the options binder offered here. Choose the Default Form Options Binder. Go to the next tab. Choose the form that stores the claims. Next, we will need to decide on which field from the form to display as option label. This is the claim form. We are going to use the title as the option label. Copy its ID. Go back to the appeal form. Paste it in. Preview. Good. Now, we are going to filter the selections so that only the rejected claims will show up. "status" is the field that stores the claim status. Write the statement as shown on the screen. Preview again to see if it works. OK, the list has changed. Get back to the select box. Copy the condition somewhere first. Now, we will need to further filter the list to only show claims of the current logged in user. "username" is the field that stores the claim applicant’s user name. Let's start with a hard coded value first, "cat". Preview. OK. Good. Now, let's make it dynamic by making use of the current user hash variable. Preview. OK. It works. Now, let's put both conditions together. Next, add a AJAX Subform. The AJAX Subform will load data based on the selection. Get the ID of the select box. Copy it to the clipboard. Choose the appropriate form. Go to the next tab. Make it reloads on value change and as read only. Go to the next tab. Set the ID of the select box here. Since this is an appeal form, let's add a text area for the applicant to key in the reason. Save the form. We are now ready to generate the approval process. We can make use of the App Generator feature. Choose the Approval Process. Review the options. Submit. We can see that a list of forms have been generated for the appeal process. Launch the Userview. There's a new category at the bottom now. The category label is too long for this Userview theme. Let's change it in its Userview builder. Things look much better now. Alright. Let's go to the new process with the new appeal form. The user "cat" can now choose rejected claims of his to start the appeal process. We can also see the AJAX Subform in action now. We hope that you can now make better use of these form elements now. Thank you for watching.