How to create a 'wizard' app?

 

In this tutorial you will learn how you can use actionsteps 'set cell value' and 'add table row' by creating a 'wizard' app.

Our app will consist of three stages and its purpose will be ticket reservation. Stages will be changed by clicking buttons with 'set cell value' actionsteps.

 

1.Stage one

1.a

Create a new spreadsheet and name it 'transport'. It will only need one column with two cells. In first cell type 'choose means of transport'. For second cell choose type 'dropdown', editable and in 'items' field type this formula:

=array('train', 'plane')

This formula makes typed elements into options of the dropdown. 

Screen_Shot_09-26-18_at_11.48_AM.PNGScreen_Shot_09-26-18_at_11.49_AM.PNG

1.b

Add a new spreadsheet and name it 'stage'. It will only have one cell - an editable one. Type number 1 in it.

This cell's values will determine in which stage we are, meaning - which sections are visible.

1.c

Now add a new spreadsheet section and name it 'formulas'. Set it as not visible by putting =false in section's visibility. Leave it with only one column. We will use it for keeping formulas in it. This way we won't have to type or copy and paste them every time.

1.d

All cells of this section set as type 'checkbox'. Now type in first cell a formula which will define first stage elements visibility:

=stage.A1=1

Screen_Shot_09-26-18_at_12.00_PM.PNG

1.e 

Create a new button section that will allow us to move from first stage to second. Name it 'choose'. Add a 'set cell value' actionstep to it. In 'cell address' field put stage.a1 and in 'value' field type =2.

1.f

Now add  the formula from 'formulas' section to 'transport' and 'choose' sections. Do it by typing = and address of the cell in 'visibility' field.

Screen_Shot_09-26-18_at_12.06_PM.PNG

2.Stage two

2.a

In stage two we will be choosing options typical for the chosen means of transport- we will have different sections for the train and for the plane.

That is why we need to add new formulas to 'formulas' spreadsheet:

=stage.a1=2 && transport.a2='plane'

=stage.A1=2 && transport.a2='train'

&&  means joining the conditions:to stage number and means of transport type.

2.b

Create sections for the plane. Add a new spreadsheet widget with two cells and name it airlines. In first cell type 'choose airlines'. For second cell's type choose 'dropdown' and editable and in 'items' field put a couple of airlines names using the array formula e.g:

 Screen_Shot_09-26-18_at_12.17_PM.PNG

2.c

Create one more section for the plane options with two columns named 'plane_route'. In first column type: choose route, departure place, destination, flight type. First cell of the second column leave empty, the rest set as editable. In the last cell select 'dropdown' and using array add 'direct' and 'indirect'.

 Screen_Shot_09-26-18_at_12.28_PM.PNG

2.d

 Now we will create train sections. A spreadsheet named 'train_route' will be the first section. It should have two columns. In first type: choose train, train type, from, to. In second cells 2,3 and 4 set as editable. For second cell set type 'dropdown' and using array formula add a couple of types of trains to choose from e.g:

Screen_Shot_09-26-18_at_12.35_PM.PNG

Add a second spreadsheet section named 'ticket'. It should have one column with two cells. In first type 'choose ticket' and in second add types of tickets to choose from. Set the cell as editable.

Screen_Shot_09-26-18_at_12.40_PM.PNG

2.e

Now, that we have these sections let's add correct visibility formulas to them. For both of plane sections it will be a formula in cell A2 and for both train sections a formula in cell A3 from 'formulas' spreadsheet.

Screen_Shot_09-26-18_at_12.44_PM_001.PNGScreen_Shot_09-26-18_at_12.44_PM.PNG

2.f

In 'wizard' type apps usually the user can move freely between stages.It means, that apart from creating a 'book' button we will also need a 'back' button. Add a new formula to 'formulas' section:

 =stage.A1=2

Then add the formula to both buttons.

Screen_Shot_09-26-18_at_12.52_PM.PNG

For 'back' button we also need to add an actionstep that changes stage two to stage one. It is the 'set cell value' actionstep for the 'stage' section cell. 

Screen_Shot_09-26-18_at_12.55_PM.PNG

For 'book' button the cell address is the same but the value is =3.

Screen_Shot_09-26-18_at_12.56_PM.PNG

2.g

Check how everything works.

Screen_Shot_09-26-18_at_01.00_PM.PNGScreen_Shot_09-26-18_at_12.59_PM.PNG

 

3.Stage three

3.a

In stage three we would want to view a message about a successful reservation, a 'return' button and the booking summary. To be able to view anything in this stage type a suitable formula in 'formulas':

=stage.A1=3

3.b

Let's start with the message. add a new spreadsheet and name it message. It will only need one cell. Put a sentence in it that will confirm the reservation e.g:

Congratulations, you booked the ticket successfully.

Screen_Shot_09-26-18_at_01.12_PM.PNG

3.c

Create a new button and call it 'back2' and name its caption 'return'. The button should have the type of settings that will make the user return to stage two.

Screen_Shot_09-26-18_at_01.24_PM.PNG

3.d

Add a new table widget with 5 columns and name it 'summary'. Change column headers.

Screen_Shot_09-26-18_at_01.16_PM.PNG

Set all columns to editable and allow adding rows.

Screen_Shot_09-26-18_at_01.18_PM.PNG

Add the stage three visibility formula to the button, the message and to the table.

Screen_Shot_09-26-18_at_01.25_PM.PNG

3.d

Now,to be able to view reservation data in the summary table we need to add a second actionstep to the 'book' button 'add table row'. In 'section' field type summary and in 'row data array' field put the formula below. This formula puts reservation data from different sections into the summary depending on the means of transport that was chosen.

=if(transport.A2='train',array('train',train_route.B2,train_route.B3,train_route.B4,ticket.A2),array('plane',airlines.A2,plane_route.B2,plane_route.B3,plane_route.B4))

Screen_Shot_09-26-18_at_01.32_PM.PNG

 Lastly, set the 'stage' section as not visible.

Screen_Shot_09-26-18_at_01.34_PM.PNG

 

4.Test

Now you can freely move between the stages. See how your app works!

Screen_Shot_09-26-18_at_01.35_PM.PNGScreen_Shot_09-26-18_at_01.36_PM.PNGScreen_Shot_09-26-18_at_01.37_PM.PNG

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk