Complex Flovv with Branching  |
| |
In this section of the Tutorial, you will learn how you can build conditions in to the branching. We suggest you take a paper print out to make it more easy. |
|
|
| What you will learn |
| In this example you will learn: |
| How to branch off to multiple pages by using the Page Transition Condition Builder |
| Validate the values by using the Field Validation Builder |
Validate each page by using the Page Validation Builder
|
| About the Example |
We visit the Volunteer International, in this example as well. You are to do an internal recruitment to six projects, falling on three geographical areas.
|
| Sector |
Project |
Remarks |
| Economic Development |
Rural Farms Project |
Need to have Driving License |
| |
Tsunami Boat Project |
|
| Poverty Alleviation |
Micro Finance Project |
|
| |
Gramin Bank Project |
Local organisations requires the volunteer to be a female |
| Conflict Transformation |
West Coast Resettlement |
Requires Valid Driving License |
| |
School Education Project |
Need to be good in all three languages English, Sinhala and Tamil. |
|
| |
| Prepare the Basic Flovv |
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.
|
| Page 1: 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.
|
| Page 2: 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:
|
|
| Page 3: 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:
|
|
| Page 4: Preferences |
| Add the three sectors, Economic Development, Poverty Alleviation and Conflict Transformation 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:
|
|
| Page 5: 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:
|
|
| Page 6: 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:
|
|
| Page 7: 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 Cental. At the end the condition builder should look like this:
|
|
Similarly other link, between Preferences Page and West Coast, 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 either of the three pages, Economic Development, Poverty Alleviation or Conflict Transformation. 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.
|
| Let 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. |
| |
|
| 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.
|
|
|
Build the validation so that it looks like below.
|
|
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. |
| |
|
|
