Jarvis Pizzeria: Human Tasks: Design First WebForms in PCS

To create simple Human Tasks we use web forms in Process Cloud Service (PCS). Within the Delivery Process of the Jarvis Pizzeria, we are going to implement the HT for ‘Try Contacting the Customer’. This human task should become available after we have checked that the Customer is not a member and we do not know his email address.  

Try contacting the non-regular / member from Jarvis Pizzeria, in the swimlane of the CallCenter.

We will take the Design First approach, meaning we will design the form and know what data objects we need afterwards, instead of looking at the data we need for the Human Task first.

This means we can start by creating a new web form.

In the properties window from the task we click the add ‘+’ icon next to the Form.

We want to, but also only can select the ‘New Web Form’ option, the basic form is the old form used in previous versions of PCS. It is still available in the engine for backwards compatibility. Selecting this option will open the ‘Create New Web Form’

After filling in the fields, we click the create button. Because the ‘open immediately’ checkbox is selected, this will bring us to the designer of the web form. We will create the web form by simply dragging and dropping the components from a pallet to the page. This page will show all available data from the order / customer that is available and needed for the task.

For the date & time that the customer is contacted, we want to use the current dateTime as the default value. When selecting a component or after dropping it on the page the properties will be displayed. In the properties we select that this value is a computed value and click the edit button.

This brings up a configuration screen, in here you can select several predefined functions. In our case we select the current date time function for the contactTime field.

Besides computed & default values, it is also possible and quiet easily so to call integrations for data. Within the web form we want to make it possible to select a favourite pizza for the potential customer, so we know what pizzas the customer likes.
After selecting the dropdown box that is on the page with the name ‘favourite pizza’ we scroll to the section where we can select a source in the properties. Here we can choose an already existing connector that we have already defined.

In this case we select the Rest connector FavPizzaRC, after doing that we can see the available resources on this connector. Once we have selected the FavPizzas resource we can select the operation of which we want to expose the data in the dropdown.

After selecting the source, the response options can be selected with help from the properties as well. When selecting the ‘Options List’ it autocompletes the response location. The same goes for the label and value binding, you can select the values if you have correctly configured the steps above.

Now that we have created the default value and the dropdown, lets press the Preview button to find out how the web form looks.

Within PCS, the preview modus of the web form is started and you can select different devices on which you want your form to be shown. In our case we want to have a look how it will be presented on a tabblad.

You can see that the current date time is inserted as defaultValue for contactTime.

Even in preview modus, when selecting the Favourite Pizza dropdown, the Rest service will actually be called and you can see the data that is returned from the service.

This is how easy it is to create a simple human task with the help of the web form technology within PCS. You can do even more advanced stuff within the form, but for most use cases an extra Rest call or populating some default data should be sufficient.

So we choose to cover and focus on these functions within the web form.