Listing screen design

In this learning content, we will step by step design the screen listing the registered users of our sample web application called “I Have an Idea”. 

First, let's have an overview of the user listing screen. 

The screen contains a Search field where you can search and filter users according to certain criteria. This Search field was created using the “Text Input” element from the “Input” category.

Another element is Table, which will provide the listing function. 

Our list screen is prepared with a Table content that includes users' images, titles, department information, total number of ideas, current status and a symbolic icon to access user details. There is also a Pagination element that makes it possible to switch between pages for easy navigation and access.

Now let's prepare this user list screen design together.

1. Create a new screen called UserList via the Screens panel.

We can use the Header design that we previously used on the Dashboard screen by copying it on the user list screen. Let's do the necessary operations on the user list screen before copying.

2. Drag and drop a Header element on the screen.
3. Change the background color of the Header.
4. Open the Dashboard screen. Select the Row in the Header and copy it via the detail menu.
5. Open the user list screen again.
6. Select the header and paste it via the detail menu.

Now let's proceed by preparing the listing structure.

7. Drag and drop a Row under the Header and convert it to a single column. This Row will be the global placeholder for our List structure
8. Drag and drop a Row into the column. Through this Row, we will be preparing our header row.
9. Convert the Row into a two-column structure with the right column wider.
10. In Styling, remove the Row style and add the None style.
11. Drag and drop a Label into the left column. 
12. Change the content of the Label and select Paragraph and H1 Style in Text Styling.
13. Select the column with the Label and align it left horizontally and center it vertically.
14. Add a TextInput to the column on the right.
15. Update the TextInput's Placeholder text.
16. In the Styling panel, add the InputSize style in the Layout field.
17. Through the Border field, add the InputBorder style.
18. Select the column with TextInput and align it to the right horizontally and center it vertically.
19. Now add another Row just below the header row and turn it into a single column.
20. Update the background color of the column to White and add the Radius style.
21. Add a Row inside the column and convert it to a single column.
22. Select Row and Column and remove the Default Layout styles and add None styles.
23. Drag and drop a Table into the column.
24. Delete the default TableDefaultColumn via Properties and add 5 TableTemplateColumns.
25.  Select TableRow and add the BorderTop style.

Now let's proceed by editing the Table contents.

26. Add a Horizontal Stack in the first column.
27. Add an Image and a Label element to the Horizontal Stack.
28. Select the Image element. Add a temporary image.
29. Update the ImageFit selection in Properties and add the Image32 style as Layout style and delete the default width value. 
30. Select Radius as the Border style.
31. Select the Label element.
32. Update the content of the Label element and remove the default width of 100 pixels.
33. Select HorizontalStack and center it vertically.
34. Then update the title name of the Table column.
35. Now add a Label to the second column and enter a temporary Title name and update the column title. 
36. Drag a Label to the third column and enter a temporary Department name. Update the corresponding Column header. 
37. Add a Label to the fourth column and enter a temporary number of ideas. Select the Table Column and right align it horizontally. Update the Column header after alignment.
38. Then drag an icon to the fifth column and select the icon and choose the color. 
39. Duplicate the icon and change its color. The reason why there are two icons here is that icons of different colors will be shown according to the Status. We will perform this operation later.
40. Then select the Table column, center it horizontally and update the column title.
41. Finally, add an icon to the column at the end and select an icon from the icon library.
42. Select the column, align it horizontally to the right and delete the contents of the column header.

We have completed our work with the Table element. As a last operation, let's add the Pagination element to provide the pagination structure in the table.

43. Add a Row just below the Table element and turn it into a single column.
44. Drag and drop a Pagination element into the column.
45. Select the parent column with the Pagination element and align it horizontally to the right.

Thus, we have prepared the screen design that allows the user to be listed step by step.