Your first mobile app

 

In this tutorial you will learn which settings are important while creating a mobile app.

You will learn it while creating a simple currency converter app.

1.Data

You need to create a new list in designer with currencies and their sell rates. More about lists you can read HERE.

You can use this table:

Euro 0.848721
British pound 0.759659
Japanese yen 112.798198
Australian dollar 1.378797
French frank 5.56698
Swedish krona 8.79

Screen_Shot_09-25-18_at_02.01_PM.PNG

 

2.Sections

2.a

Create a new app and add two widgets to it: a spreadsheet and a table. Your spreadsheet should have only one column with one cell. Type 'Convert from USD' in the cell.

2.b

Your table should have two columns. Bind the table with currency list using formula '=lookup(list_name) in Filter property or by dragging name of the list from Data bookmark to the header of the table. Both columns bind with list fields- currency and sell. Change first columns header to 'choose currency'.

 Screen_Shot_09-25-18_at_02.10_PM.PNG

2.c

Add one more spreadsheet section. It should have two columns. Bind this section with the table by filling the 'filter' field with a lookup formula:

=lookup(section2)

Screen_Shot_09-25-18_at_02.12_PM.PNG

2.d

Fill in the spreadsheet: in first cell of column 'A' type USD and in second value 0, set its type to 'currency' and set it as editable.

In column 'B' set both columns as editable. In first type: =currency and in second =A2*sell. Set their type as 'Currency'.

This spreadsheet will calculate a chosen amount of money in different currencies.

 

3.Settings

Now we will change a couple of things for the purpose of using the app on a mobile more comfortably.

3.a

Go to app info and in 'alignment' field choose 'center'.

3.b

Delete all of the unused rows and columns. Notice, that our widgets take much less space right now- good organisation of space is important while creating a mobile app.

mceclip6.png

3.c

Now shrink the cells by changing their width but make sure that the data in cells is not hidden and that it fits. You can check how the changes affect your app by clicking 'preview'.

mceclip7.png

mceclip8.png

3.d

You can also use the 'auto-width' option which sets for example two of your sections to 3/6 site. This way both of them take exactly half of the site's space. It is useful and everything looks more symmetrically this way.

 

4.test

Remember to add yourself as the app creator.

mceclip9.pngmceclip10.png

Congratulations- you created your first mobile app!

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk