In the previous post I created a simple business process, but with no real implementation details. It was just a framework.
Now, I will show how to create a Form to start the Process. Remember that there are many ways of stating a process, but for this case the Form is the way to go.
How to Create a Form
You can create a Form from two different places.
- The Form Menu on the left side. (left pic)
- From within the Form properties in the Model. (right pic)
With this first option you can choose to create a new Form from within PCS, or to bring an ExternalUI – from VBCS for example.
The second has the advantage of assigning the form directly to the process activity.
Using the Drag & Drop
The entire approach to building a form is with drag & drop. The palette offers prebuilt html components and respective properties. Zero coding required.
Form Design
As with pretty much every development activity, it should be preceeded with a Design period where the goal/outcome is defined.
In this case I want to have the following Attributes in the form:
- Employee ID
- Name
- Surname
- Available Vacation Days
- Type Of Vacations (Legal/Overtime)
- Start Date
- End Date
Putting all together
Now, the best way to showcase this is with a video where I create the basic form in just a couple of minutes.
Employee ID: Here I use an out of the box function that grabs the User Id – in this case it’s my email address. There are interesting options and values that we can fetch using these functions.
Available Days: This value is hardcoded at the moment, but in a realistic scenario one would use an external service (REST/SOAP) to fetch the proper value from an application.
Name and Surname were made required Fields.
Start and End Date, the default date format is the uncromprehensible American format MMddYY, therefore I changed to the logical 🖖🏻 dd-mm-yyyy.
Vacation Type: its a radio button with 2 options.
Preview
The preview is a great way of immediately seeing the result of the form – specially how it looks in the several different available screens like mobile or desktop.
In the preview mode we can load data (with a JSON payload) for testing purposes.
Conclusion
There are many other components and properties with as many advanced features as one may need, but that will be for another post.
At this moment we have a Form that is the trigger for this process.
In the next post, I start detailing the steps of the process itself.