Display screen design

In this learning content, we will step by step implement how to design a Display type screen that displays user information in detail. 

First, let's take a look at the general framework of the screen we will design.

Since the screen that presents the user details is of the Drawer type, we can see that it has been designed with a sizing appropriate to this feature. At the top of the screen, there is a simple header with a Label with the screen name and an exit icon button that allows us to close the screen. Just below this header, there will be an information card with the user's basic information. In addition, at the bottom of this information card, there will be a list of ideas that the user has shared, in a similar structure to what we see on the Dashboard screen.

Now, let's see how we can create this user detail screen step by step.

1. For the detail screen design, create a new screen named User Details from the Screens panel.
2. Since the detail screen will be a Drawer type screen, set the width of the screen as mobile size by clicking the mobile device icon on the top of the screen.

For the header design we can use the design we created on the form screen before.

3. Drag and drop a Header element on the screen.
4. Open the form screen named New Suggestion. Select the Row in the Header and copy it via the detail menu.
5. Open the user Details screen again.
6. Select the Header and paste it via the detail menu.
7. Update the screen name in the header.

Now let's continue by designing the user information card.

8. First, let's proceed by changing the background color of the screen. Click on an empty area on the screen and update the background color of the screen to White via the Styling panel.
9. Drag and drop a Row onto the screen. 
10. Convert the Row into a single column.
11. Add a Row in the column and perform column customization.
12. With Row selected, update the background color and select Radius as Border style.
13. Add a Horizontal Stack in the left column.
14. Add an Image element inside the Horizontal Stack and add a temporary image.
15. With the Image element selected, change the ImageFit property to Fill via Properties. 
16. Remove the default value of 100 from the Layout field, add the Image64 style and select Radius from the Border field.
17. Add a Vertical Stack next to the Image element in the Horizontal Stack.
18. Add a Label inside the Vertical Stack and enter a temporary name.
19. Add the H3 ready style to the Label.
20. Duplicate the Label and enter a temporary department name.
21. Remove the defined Text styles and select the Paragraph_Grey preset style.
22. Duplicate Label with department name and replace its content with a temporary title.
23. Replace the defined Text style with H6.
24. Update the gap value of Vertical Stack to 0.
25. Select Horizontal Stack and center it vertically.
26. Then select the parent column, align it left horizontally and center it vertically.
27. Add an Icon in the right column and select the icon.
28. Then select the parent column and align it to the right. We have defined the user information card. Let's proceed by creating the structure where the ideas are listed.
29. First, add a Row element to the screen for the header row and turn it into a single column.
30. Add a Horizontal Stack inside the column.
31. Change the Gap value to 5.
32. Drag a label into the Horizontal Stack and update its content.
33. Clear the default width value of 100.
34. Remove the defined Paragraph style and select the Paragraph_Grey preset style.
35. Then duplicate Label and update its content.
36. Add a Row element below the header row and use it in a single column structure.
37. Select the column and remove the default Column style and select None.
38. Drag and drop a Table into the column. 
39. Hide the header of the Table.
40. Delete the default TableDefaultColumn via Properties.
41. Select Table Row and remove the Border style.
42. Then select TableTemplateColumn and remove the default Padding style and add the None style.
43. Now open the Dashboard screen.
44. Copy the parent Row in Gallery View.
45. Return to the user detail screen.
46. Select TableColumn and paste it.
47. Select the Child column with white background in the pasted Row and update the background color.
48. Finally, select the Table element and remove the Hover background color.

Thus, your user detail screen is ready.