Dashboard screen design

In this video, we will continue the design of the Dashboard screen that we started in the previous learning content, especially the design of the elements on the body.

As a first step, let's start by examining the Dashboard screen to be completed. In this content, we will complete a Dashboard screen design with header, card structure and listing features. Building on the Header design we created in previous content, we will add a Card structure that summarizes users' ideas and a list structure that lists the most recently added ideas. 

We will use the Gallery View element from the Data Repeater category to create the list structure. 

We'll also review the menu we previously created as Master Screen, which facilitates in-app navigation.

First, let's start by examining the Dashboard screen that we will complete at the end of the learning content. In this learning content, we will have completed a dashboard screen design with header, card and listing structure.

We continue on the screen where we made the Header design that we prepared in previous learning contents. 

1. Open the screen called HomePage.
2. Select the Master Page you will use as the Master Page via Properties.

Now let's move on to the board structure design.

3. Drag and drop the Row element to make it a global placeholder on the screen. Convert the Row element into a single column.
4. Drag and drop another row into the Row you just converted into a single column and convert this Row element into a single column as well.
5. Then in Styling, remove the Row style and add the None style.
6. Drag and drop a Label element into the Row and update its content to Dashboard.
7. With Label selected, remove Paragraph style from the Styling panel Text field and add H2 style.

Thus, our page title was prepared. Let's move forward with the design of the cards;

8. Just below our page title, add another Row element inside the global placeholder Row. Convert the Row element into two columns.
9. Remove the Row style and add the None style.
10. Add another Row element in the first column on the left and turn it into one column.
11. Then give the Row element a White background color and add the Radius style.
12. Next, add a Vertical Stack element inside this Row that you turned into a single column.
13. Drag and drop a Horizontal Stack element into the Vertical Stack element.
14. Add an Icon element and a Label element inside the Horizontal Stack element respectively.
15. Select an icon for the Icon element and then update the text in the Label element.
16. Select the Label element and clear the default width of 100 pixels.
17. Add a Label element in the Vertical Stack just below the Horizontal Stack and temporarily change its content.
18. With the Label element selected, update the Text Style to H1. 

Our first card is ready. Now let's prepare our second card by duplicating this card.

19. Select the Row, the parent of the first card structure, which we have given a white background color, and Duplicate it via the detail menu.
20. Select the new duplicated Row just below and drag and drop it to the second column via the dots in the upper left corner.
21. Update the contents of the second card structure to complete the card structure.

After completing the work on the card structure, let's prepare the gallery structure together to list the final ideas.

22. First, add a Row element to the screen, just below the card structure, and convert it to a single column. This Row will act as a global placeholder for the gallery structure.
23. Then drag another Row element to the column in the Row and turn it into a single column. Remove the Row style in the Row and add the None style
24. Add a Label in Column and change its value and add Paragraph and H3 style.

This structure we have added is the title of the latest gallery of ideas. Let's continue with the gallery structure;

25. Add a GalleryView element just below the header row.
26. Select the parent Row and Column that comes by default with the GalleryView via BreadCrumb to remove the Default Layout styles and add the None styles.
27. Select the GalleryView element and update the number of columns in Desktop to three in Properties.
28. Drag a Row into the GalleryView and turn it into a single column.
29. While the column is selected, give it a White background and add the Radius style.
30. Add a Row inside the column and convert it to a two-column structure with the left side wider.
31. In the Row, remove the Row style and select the None style.
32. Add a Horizontal Stack in the first column on the left.
33. Center the Horizontal Stack you added vertically.
34. Add an Image element and a Vertical Stack inside the Horizontal Stack.
35. With the Image element selected, update the ImageFit selection in Properties.
36. In Styling, select the Image 32 style and the Radius Full style.
37. Select the Vertical Stack element and update the Gap value to 1.
38. Align it horizontally to the left via the Styling panel.
39. Then add a Label inside the Vertical Stack Duplicate the Label.
40. Enter name information for the first label.
41. Enter the title for the second Label and select H6 as Text style.
42. Drag a Label to the second column.
43. Update the Label value.
44. Make the relevant selections from Layout, Text, Fill and Border fields for the Label and perform style edits.
45. Select the column with the Label.
46. Align it right horizontally and center it vertically.

Now let's prepare the area where the visual and title area of the final ideas are listed.

47. Add another Row in GalleryView and convert it to a single column.
48. Remove the Row style from the Row and select the None style.
49. Add an Image element inside the column.
50. Select the Image element. Add a temporary image.
51. Update the ImageFit selection in Properties
52. With the Image Element selected, select Image Style in Layout and Radius in Border. 
53. Add a Label element to the column with the Image element. 
54. Update the content of the Label element and select Paragraph_Grey in the Text field.

After the image and idea title area, let's design the area that contains the support (votes), comments and information about the people involved.

55. In GalleryView, add another Row under the Row with the Image element and adjust the column widths.
56. Remove the Row style from the Row and select the None style.
57. Add a Horizontal Stack in the first column.
58. Update the Gap Value of Horizontal Stack to 6.
59. Add an Icon element and a Label element inside the Horizontal Stack element respectively.
60. Select an icon for the Icon element and then update the text in the Label element.
61. Select the Label element and clear the default width of 100 pixels.
62. Select the Horizontal Stack element and center it vertically.
63. Select the Horizontal Stack element's parent column and center it vertically.
64. Select the Horizontal Stack element again and copy and paste it into the second column.
65. Update the icon and text.
66. Select the Horizontal Stack element's parent column and center it vertically.
67. Finally, paste the copied Horizontal Stack into the third column.
68. Make icon and text updates here.
69. Select the column that is the parent of the Horizontal Stack element. Align it right horizontally and center it vertically.

With these operations, your Dashboard screen is ready.