2.1 How to create a form

Before we can start a process, we need to create a form were you can fill out the reservation details. We are using a reservation form to fill out the details when we start the process. This looks like this in Valtimo:
This form can be made in Valtimo by using the Form Builder. This Form Builder can be found under Admin in the Forms page. In the Form Builder you can create new forms, thus we are making a start form and the user task forms in the Form Builder. So lets start with building a start form! When creating a new Form, choose a name for the form and select the correct Storage type. In this case the storage type is "Dossier + Process variable". The difference between the two options is that the "Dossier + Process variable" option includes putting data in the Document and in the process. When you choose "Process variable" you can only add process variables. Most used type is "Dossier + Process variables". You can put a variable straight into your process by putting pv. in front of your key. Then it will automatically become a process variable instead of a document variable.
The form that can be seen above is shown in the Form Builder picture below. This form is made out of Text Fields, a Day widget, and a Number field but you can use whatever you like! Under Basic you can drag the Text Field bar to the right screen, above the orange Submit button. It then opens the Text Field Component pop-up window and you can write the correct label for the field, in this case "Name". You'll see that the Property Name automatically is also renamed to "name". On the right side you can see a preview of the screen and you can click "Save". Do this for the other fields as well, the Day widget can be found under 'Advanced'. Under the 'Day' tab, you can select 'Day First' so Day comes before Month as in the example below. Under the 'Display' tab, you can select 'Hide Label', so "Day" doesn't show twice on the display.
The data that is filled out in the fields needs to be saved. To save this data, the API needs to be configured. This API key is the same key as you defined in the document definition (ask your developer which definitions you are using). For example for the Name Text Field, the API key is "name" so "name" needs to be filled in the API tab. After you're done configuring the form, you can click "Deploy" and the form is now saved and you can find it in the Forms overview. 
The most important thing about forms is that you link the right API key to it. When, for example, the Name Text Field has the API key "namme" and you want to refer to "name" later in the process, it will not show the Name you filled in. This is because the API key is wrong in the initial Text Field, hence there is no data saved in "name".
For the bowling demo we want to have the email address in the process. At this start event we need to give it some Listeners. These Listeners will contain the information you filled out in the reservation form. You need to fill this out in the Execution Listener. Event Type: start, Listener Type: Expression and Expression: ${execution.setVariable("email",documentVariableDelegate.findValueByJsonPointer("/email",execution))}Note that "email" is the API property name of the Email Text Field we created in the start form. This one is for the email address but this needs to also be done for total_persons, date, and name. So to add those expressions you'll need to copy paste the expression and remove twice "email" and paste the "name" etc.
To learn more about setting up your form, click here.
Connecting the Form and the Process
After the form is built in the Form Builder you need to connect the form and the process. How can you do this? You go to Admin > Form links. Click on the start event and then choose the correct option. For our demo we'll use the form definition, since we just created the form. Click on Form Definition and then select the correct form and then hit Save.

Low-code Guidelines - Previous

Forms

Form flow

Last modified 1yr ago

Copy link