Tutorial: Form Mobile

In this tutorial a Responsive Form will be developed with the orders table and using the following resources:

• Blocks.
• SQL Code.

Criando um Formulário com Responsividade Mobile

Note:

In case you have any doubts about how to create a Form App, access here: Creating a new Form App

1. Create a new Form App, select the Single Record option and the orders table.

2. You can change your fields labels if you want, click on Edit Fields and edit the labels as in the image below.

Editing the Form fields

1. Access the Layout tab and click on the Blocks option.

2. Rename the block to Orders and set as the image below.

3. Create a new block called Location as the image below.

4. Set the block as the image below.

5. Click on Fields Positioning in the app menu.

6. Move the fields “orderid” and “requireddate” to the left box as in the image below.

7. Ordenate the fields in its respectives blocks as the image below.

8. Access Fields in the app menu and click on “customerid”.

9. Deactivate the option Use Select2 in the General Settings section.

10. Navigate to Lookup Settings and substitute the SQL code by:

SELECT customerid, companyname 
FROM customers 
ORDER BY companyname

11. Click on “employeeid” field.

12. Change the Data Type to Number Autocomplete and deactivate the Use Select2 option in the General Settings section.

13. Scroll to Lookup Settings and substitute the SQL code by:

SELECT employeeid, sc_concat(firstname,' ', lastname) 
FROM employees 
ORDER BY firstname, lastname

14. Click on “priceorder” in the app menu.

15. Scroll to the Values Format section and active the Currency Symbol Usage option.

16. Click on “shipcountry” in the app menu.

17. Change the Data Type to Select in the General Settings section, make sure to also define the Initial Value (type) to Defined Value and type US in the Initial Value option.

18. Scroll to Lookup Settings and substitute the SQL code to:

SELECT iso, printable_name 
FROM country 
ORDER BY printable_name

19. Click on “shipregion” in the app menu.

20. Change the Data Type to Select in the General Settings section.

21. Scroll to Lookup Settings and substitute the SQL code by:

SELECT regionid, regiondescription 
FROM region 
ORDER BY regiondescription

22. Click on “shipstate” at the app menu.

23. Change the Data Type to Select in the General Settings section.

24. Scroll to Lookup Settings and substitute the SQL code by:

SELECT stateid, statename 
FROM states 
ORDER BY statename

25. Click on the field “shipcity” in the app menu.

26. Change the Data Type to Select in the General Settings section.

27. Scroll to Lookup Settings and substitute the SQL code by:

SELECT cityid, cityname 
FROM city 
WHERE stateid = '{shipstate}'
ORDER BY cityname

28. Click on “shipvia” in the app menu.

29. Change the Data Type to Radio in the General Settings section.

30. Scroll to Lookup Settings and substitute the SQL code by:

SELECT shipperid, companyname 
FROM shippers 
ORDER BY companyname

31. Click on “freight” in the app menu.

32. Scroll to the Values Format section and active the Currency Symbol Usage option.

33. Click on Run Application in the toolbar to generate and execute the form.

Your Form App should be looking like that:

Note:

To access the form app as displayed you will need to access via a mobile device

To check more examples done with Scriptcase, access: Samples: Complete Systems and Apps with Scriptcase.