You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
« Previous
Version 2
Next »
In this article, we will walkthough the thought process on designing a solution for the following business use case:-
- Visitor would request for demo by submitting a form in the Joget app.
- Upon submission of the form, fields will be validated to make sure that all mandatory fields are filled up.
- Upon successful validation of data, the form data will be shared with external system (i.e. CRM software) for further processing through the use of JSON Tool plugin.
- The main objective is to ensure successful delivery of data with the external system.
This is an example on how the form would look like.
![](/community/download/attachments/182321336/form-submit.png?version=1&modificationDate=1636794410000&api=v2)
Figure: Form Submission for Demo
The only external factor that may be outside of the Joget platform's control would be the external integration with the CRM software. We will walkthrough a few scenarios on how best to design for this business use case with UI/UX kept in mind.
We will design the app and discuss where best to invoke the external API.
- We will start with desiging the form itself. The form itself is quite simple, with just 3 fields and all of them made mandatroy.
![](/community/download/attachments/182321336/1-design-form.png?version=1&modificationDate=1636794511000&api=v2)
- In the userview, we are making use of the Form Menu and link it to the form we have just designed.
![](/community/download/attachments/182321336/2-form_menu.png?version=1&modificationDate=1636794704000&api=v2)
- Do not forget to create a CRUD menu too so that we can browse through all the submissions easily using Generate CRUD.
![](/community/download/attachments/182321336/3-crud.png?version=1&modificationDate=1636794942000&api=v2)
- At this point of time, there's no integration yet with the external CRM.
When end user hits on the Submit button, the following will take place.
- Joget would iterate through each and every form element and invoking the validator (if configured).
If all validations pass, then it will move to the next step, else, end user will be redirected back to the same form with validation errors displayed like what is shown in the screenshot below.
![](/community/download/attachments/182321336/4-validation_error.png?version=1&modificationDate=1636795844000&api=v2)