Form screen design

In this learning content, we will create the form screen to create a new idea record using the Mobile app. 

Now let's examine the New Idea screen.

At the top of the screen there is a Label with the page name and a simple header with an icon to return to the previous screen. 

Below the header, there are Input type form elements such as SelectBox and TextInput that allow data entry. Below the form elements, there is a GalleryView element that lists the images of the added idea, Image elements and a button element to save the data after form entry.

At the bottom of the screen is the Tab Bar we created earlier.

Now let's create this screen design step by step.

1. Create a new screen called New Suggestion from the Screens panel.
2. Drag and drop a Header element onto the screen. 
3. Change the background color of the Header with Background selection.
4. Add a Row inside the Header and turn it into a two-column structure.
5. Add a Label in the left column and update its content.
6. Then add the H3 style from the Styling panel Text field.
7. Select the column with the Label, align it to the left and center it vertically.
8. Now add an Icon element to the column on the right and select Icon.
9. Select the parent column with the Icon element and align it to the right and center it vertically.

Header design is ready. Let's continue with the form structure.

10. Drag a Row onto the screen.
11. Turn the row into a single column, remove the default padding style and add none.
12. Drag a row into the column.
13. Convert the Row to a single column and remove the default Layout style from the Row and add the None style.
14. Add a Select Box inside the column.
15. Update the Placeholder text of the SelectBox.
16. Then select the InputBorder style from the Border field.
17. Select the outer Row, the parent of the SelectBox, and Duplicate it. 
18. Remove SelectBox and add TextInput.
19. Update the Placeholder text of the TextInput.
20. Select the InputBorder style from the Border field of TextInput, just like SelectBox.
21. Select the parent Row of TextInput and Duplicate it. 
22. Update the Placeholder text of the TextInput received as Duplicate.
23. Select the Row that is the parent of TextInput and Duplicate it. 
24. Delete the TextInput and copy and paste the SelectBox in the Type selection into the column here.
25. Update the Placeholder text.

Now let's prepare the design of the Image upload area.

26. Add a Row just below the form structure and convert it to a single column.
27.  Remove the default Layout style from the Row and add the None style.
28. Drag and drop a Row into the column. 
29. Select the Row, convert it to a two-column structure with the left column wider.
30. Remove the default Row style.
31. Change the background color of the Row to white and add a 12 Pixel radius to the top left and right corners from the Border area
32. Add a Label in the left column, update its content and add the H3 style.
33. Change the color of the Label.
34. Align the parent column.
35. Add a Button element in the right column and update the button content and select the button icon.
36. Then select Button Secondary from the Styling panel and remove the background color.
37. Change the border color and add a solid border 1 pixel wide in four directions.
38. Align the parent column.
39. Add another Row under the Row with Label and button.
40. Turn the Row into a single column and remove the default Padding style and select None. 
41. Select the column and change the background color.
42. Add a GalleryView inside the column.
43. Update the number of columns of GalleryView to 3 in Mobile view.
44. Add a Row inside the GalleryView and convert it to a single column
45. Remove Row's default Padding style and add None style.
46. Add an Image element in the column and update the ImageFit property and select Image64. 
47. Select the Block view.
48. Select the Radius style from the Border field.
49. Select the parent column with the Image and perform the alignment operations.

After the image upload area, let's prepare the Save/Create button.

50. Drag a Row below the image upload area and convert it to a single column.
51. Remove the Row style, add the none style.
52. Drag and drop a button into the column.
53. Update the text content.
54. With the button selected, select Block and select ButtonBorder.

Now let's copy the Tab Bar menu we prepared before here.

55. Drag a Footer to the screen.
56. Open the Dashboard screen.
57. Copy the Tab Bar menu design placeholder Row.
58. Return to the Form screen.
59. Select and paste the Footer.
60. Perform icon color editing.

Your form screen for the mobile app is ready.

‍