Preparation of list screen design

In the previous learning content, we prepared the Dashboard screen together. Let's continue with the list screen design in this learning content.

First, let's take a look at the prepared list screen.

In the list screen, there is a TextInput for searching and filtering in the list according to a certain value. Another element in the list screen is the Table element that will provide the listing function. The Table element duplicates the inserted data item according to the data source to show the content (dynamic and/or static) in the entire data source unless a specific number of displays is specified. For this reason, a static value that you add in the first row will also be shown in other rows.

Since the Header, Table, and Tabbar designs we will use in the list screen design are close to the designs we use on the Dashboard screen, let's proceed by copying the Dashboard screen design.

Open the Screens panel from the left side and hover over the Dashboard screen with the cursor.

Duplicate the screen via the detail menu.

Update the name of the incoming screen to List via the detail menu.

Click twice on the Dashboard text in the Header and update the text to Employee List.

Let's continue with removing the card structure on the duplicated screen. First, delete the Row that creates the card structure on the left. Then, delete the Row that creates the card structure on the right.

Convert the outermost 2-column Row into a single-column structure.

Drag and drop a Row into the column. Then convert the Row you added into a 2-column structure with 20 units in the left column and four units in the right column.

With the Row element selected, remove the Row ready-made style in the Styling panel Layout area and add the None Style.

Then select the White ready-made style from the Fill field.

From the Border field, select the Radius ready-made style.

Then, add a Text input element in the column on the left.

Change the Placeholder text of TextInput.

Change the default border color of TextInput to white via Border.

Drag and drop an icon element to the right column.

Select the icon via the icon library. With the icon selected, change the Size value to 24 Pixels in the text field of the Styling panel.

Select the column that is the parent of the icon element via BreadCrumb. Center the element in the column horizontally and vertically in the Layout field of the Styling panel.

We have completed the initial structure of the list screen. Let's continue with the Table element that will execute the listing process.

Delete the parent Row with the Recently Added Employees label on the screen.

Select the table and delete the third column of the table via the Properties panel.

Then, drag and drop a label element next to the employee name in the second column of the table. The Label element will be Inline by default. With the Label element selected, select Block view in Styling>Layout. You will notice that the Label slides to the bottom row.

Do the same for the label with the staff name.

Then, double-click on the Label element you just added and enter a temporary title.

With the Label element that says Title selected, remove the Paragraph preset style from the Styling>Text field and add the H6 preset style.

Now our table design is ready!

Finally, change the color of the Dashboard and Employee List texts in the Tabbar.

Now you are ready.