Tutorial
Creating Mutli-paged Flows
Start by clicking the Create New Flovv and giving a name to the Flovv. At the end of each page, click the save link to save the flovv. Build the following Pages, by using your knowledge on Building a Simple Flovv.
Welcome Page
Add the following Welcome Note as a description:
Welcome to Volunteer International. Please fill in the preferences and your choice on the projects that you would like to work on this summer.
Personal Information
Ask for the Name (Single Line Text), Mobile (Single Line Text) and the Contact Email. Add “Gender” as a drop down box. Page should look like this:
Skills Information
Add “Has Valid Driving License” as a check Box. After adding a heading, “Language Skills”, add three check boxes for three languages, Sinhala, English and Tamil.Page should look like this:
Preferences
Add the three sectors, North Region, Central and West Coast as a Radio group. Add description, “Select your areas you are Interested in Volunteering” on top Change the Name to a more readable shorter description for the radio group. You can type “prefRegion”. Page should look like this:
North Region
Add a description, “Select the projects of your choice”. Add two check boxes for “Rural Farms Project” and “Tsunami Boat Project”. Page should look like this:
Central
Add a description, “Select the projects of your choice”. Add two check boxes for “Micro Finance Project” and “Gramin Bank Project” Page should look like this:
West Coast
Add a description, “Select the projects of your choice”. Add two check boxes for “West coast Rehabilitation Project” and “Education on Social Cohesion” Page should look like this:
Linking Welcome, Personal Info, Skills Information and Preferences
Link these four pages, with basic links. If you don’t know how to link, find out how. The Flovv Pane should look like this:
Creating a Conditional Link using the Page Transition Builder
Remember, the user will select, at the Preferences Page, what types of Areas of Volunteering he/she likes.
The person will be directed to either one of the three pages depending on the preferences.
Link Preferences to North Region
In the Flovv Pane, first click on the link between the Preferences Page box and the Economic development page box, to bring up the condition builder that shows the linking condition between the two pages.
After that
Click on any field link and select prefregion,
is will remain as is click any value, and select “North Region”
We can create the rest of the links as well.
Link Preferences Page to the Poverty Alleviation Page and the Conflict Transform page. We can link both together.
Build the condition for the link between Preferences Page and Central. At the end the condition builder should look like this:
Similarly other link, between Preferences Page and Central, condition builder will look like this:
Finish the Links with the Thank you Page
If you look closely you will see that the users will end up in any of the three pages, North Region, Central and West Coast.
The flovv will be more organized if you let the user arrive at a thank you page, where you will include a form summary as well.
Lets us add the thank you page
link the three pages to the thank you page
Add a Summary Item to the Thank you page and include the following text.
“Thank you for Filling up the information. We will contact you shortly. VI volunteers”
The final flovv pane looks like this:
Note that when organizing the layout of the flovv pane, it’s easier to build the flovv from left to right orientation, rather than top – bottom orientation.
See Maintaining the Flovv Pane for more tips.
Before we move the next step, you might prefer to go to the Manage Flovvs and take a look at the flovv you just built.
Creating Field Validation
We will add a new field to get the age of the visitor, and see how we can restrict the values entered by using the field validation.
Add an Integer Item to pick the age, and click on the Field Validations’ “When age is any value” to change it.
We have an age restriction that it need to be above 18 years of age (Legal Adult Age) and that it should be less than 40 years (VI recruits only people less than 40 years of Age).
Once we set the value, 18 by clicking the any value, we can set the Message that will be given to the user if the restriction is not met. The field validation box will look like this:
By clicking ‘More’, we can add the less than 40 year restriction as well. The field validation box will look like below, once it’s done.
Click More and select and and in the drop down, add the next validation. The field validation box will look like this:
You can also change the Message to be displayed accordingly.
Creating Page Validation
Page validation is done when combination of the fields validate the data entered to a particular page.
Without fulfilling the combined validation,
the user will not be able to proceed to the next page.
In this example, under language skills either Sinhala or Tamil proficiency must be there. This validation can be made by a Page Validation.
Click the Flovv Pane and click on the Skills Information Page box.
You can see the Page Validation Builder appearing on the left pane.
Save and view the flovv and see the workings of the validations.
Go to the Manage Flovvs, to view and edit the flow. You can let your friends know about the flovv, by sending them the Public URL.