Form screen design

In this learning content, we will create together the form screen to be designed for a new idea registration. 

First, we will examine the form screen to be used in Drawer type and sized accordingly. 

At the top of the screen is a simple header with a Label with the screen name and an exit icon to close the screen. 

Under the header, there are Input type form elements such as SelectBox and TextInput that allow data entry. There are also Image elements in the GalleryView element, which lists the images of the idea, and a button element at the bottom of the screen to save the data after form entry.

Let's prepare this screen design together.

‍

1. To design the form screen, create a new screen called New Suggestion from the Screens panel.
2. We will make the form screen open as a Drawer. For this reason, it is useful to make the screen design wide enough to open as a Drawer. So that we can clearly see the layout of the elements on the screen.
3. Set the width of the screen to mobile size by clicking on the mobile device icon at the top of the screen. This width adjustment does not give the screen an absolute width. It allows us to see the behavior of the elements on the screen at the width we set. However, when opening a screen as a Drawer or pop-up, it will be necessary to give a precise width during prototyping. 

Let's continue with the header design.

4. Drag and drop a Header element on the screen. 
5. Add a Row inside the Header and turn it into a two-column structure with the left column wider.
6. With the Row selected, add the BorderBottom style.
7. Add a Label in the left column and update its content.
8. Then add the H3 style from the Styling panel Text field.
9. Select the column with the Label, align it to the left and center it vertically.
10. Now add an Icon element to the column on the right and select Icon.
11. Select the parent column with the Icon element and align it to the right and center it vertically.

With these operations, the Header design is ready. Let's continue with the form structure.

12. Click on an empty area on the screen and update the background color of the screen to White via the Styling panel.
13. Drag a Row onto the screen.
14. Convert the Row to a single column and remove the default Layout style from the Row and add the None style.
15. Select the column and remove the default Layout style and add the T1_R2_B1_L2 style.
16. Add a Selectbox inside the column.
17. Update the Placeholder text of the SelectBox.
18. Then change the background color of the SelectBox and select the InputBorder style from the Border field.
19. Select the outer Row, the parent of the SelectBox, and Duplicate it. 
20. Remove SelectBox and add TextInput.
21. Update the Placeholder text of the TextInput.
22. Change the background color of TextInput, just like SelectBox, and select the InputBorder style from the Border field.
23. Select the parent Row of TextInput and Duplicate it. 
24. Update the Placeholder text of the duplicated TextInput.
25.  Select the Row that is the parent of TextInput and Duplicate it. 
26. Delete the TextInput and copy and paste the SelectBox in the Type selection into the column here.
27. Update the Placeholder text.

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

28. Add a Row just below the form structure and convert it to a single column.
29. Remove the default Layout style from the Row and add the T1_R2_B1_L2 style.
30. Select the column, update the background color and select the Radius style from the Radius field.
31. Drag and drop a Row into the column.
32. Select the Row, transform it into a two-column structure with the left column wider.
33. Remove the default Row style.
34. Add a Label in the left column, update its content and add the H3 style.
35. Align the parent column.
36. Add a Button element in the right column, update the button content and select the button icon.
37. Then select Button Secondary from the Styling panel and remove the background color.
38. In the Border area, add a solid border 1 pixel wide in four directions.
39. Align the parent column.
40. Add another Row below the Row with the Label and the button.
41. Turn the Row into a single column and remove the default Padding style and select None. 
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. Add an Image element inside the column and update the ImageFit property and select Image64.
46. Select the Radius style from the Border field.
47. Select the parent column with the Image and perform alignment operations.After the image loading area, let's prepare the Save/create button.
48. Drag a Footer to the screen.
49. Drag a Row into the Footer and convert it to a single column.
50. With Row selected, remove the default Layout style and add the T1_R2_B1_L2 style.
51. Select the column and remove the Layout style named Column and select None.
52. Add a button in the column and update its text.
53. Then select Block when the button is selected.

You now have a form screen. You can create similar form screens based on this example.