In this learning content, we will prepare the listing screen design of the personnel management web application, which we have prepared as a sample project.
In the list screen, there is a TextInput for searching and filtering the list according to a certain value. TextInput element is an Input category element that allows text input. 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) of the entire data source, unless a specific number of displays is specified. For this reason, a static value you add in the first row will also be shown in the other rows. However, if you provide a dynamic data entry; all rows will be updated according to the values in the data source. Other important structures on the list screen are Button and Pagination elements. The Button element allows you to trigger a transition to a different page, such as a new staff addition screen. The Pagination element provides the number of contents per page of the displayed data and pagination/page transitions.
In this learning content, we are continuing with the design of the listing screen of the employee management web application we prepared as a sample project.First, let's take a look at the prepared listing screen.
The listing screen includes a TextInput element for search and filtering based on a specific value. The TextInput element is an Input category element that allows text input. Another important element on the listing screen is the Table element, which is responsible for the listing functionality. The Table element duplicates the data item added to it based on the data source unless a specific display count is set. This means that a static value added in the first row will be displayed in all subsequent rows. However, if dynamic data input is provided, all rows will be updated according to the values in the data source. Other essential components on the listing screen include Button and Pagination elements. The Button element triggers actions like navigating to a different page, such as adding a new employee. The Pagination element handles the number of items shown per page and provides page navigation.With this information, let's start preparing the listing screen together.
First, create a new screen from the Screens panel for the Listing screen.
Choose Blank in the opened pop-up and name the screen List. Then click the Create button.
Open the Dashboard screen. Using the Item Tree and/or Breadcrumb, select the Header element along with its contained Row element. Click the Copy button from the context menu.
Go back to the Listing screen. Drag and drop a Row element onto the screen. With the Row element selected, use the helper menu next to the Row element name in the Properties panel to Paste the copied Header element.
To change the page name in the Header, select the Label element. In the Properties panel, set the Value field to Employee List.
We can also use the Table element prepared for the Dashboard screen. Open the Dashboard screen. Select the parent Row element containing the Table element. Click Copy from the context menu.
Return to the Listing screen and drag the Row element onto the screen. With the added Row element selected, paste the copied Row from the Dashboard screen.
You can now delete the first added Row.
Select the added table and delete the Label elements within the title section using the context menu.
After deleting the Labels, select the Row and change it to a three-column structure using the Properties panel.
Add a text input element to the left column. In the Properties panel, enter Search... as the Placeholder text. In future learning content, we will enable search within the list using this input field.
Add a Button element to the right column. In the Properties panel, enter New Add as the Label text. Align the Button element's column to the right using the Styling panel. In future learning content, we will use this button to trigger the addition of new employees.
Since this is a general listing screen, you can add new columns to the data table as needed. For example, let's add two more columns for employee email and phone number.
Select the Table Row element using the Item Tree or Breadcrumb. Add two more columns to the table through the Properties panel and arrange them after the column containing employee names.
In the first newly added column, add a Label element. Use the Value field in the Properties panel to enter a phone number (+12121234567).
In the second newly added column, add another Label element. Use the Value parameter to enter an example email address (mary.watson@kuika.com).
Additionally, let's add another edit icon to the last column of the Table. First, add a Horizontal Stack element to adjust the spacing between the two icons when they are side by side. Then, move the icon within the column into the Horizontal Stack element.
Select the icon, and through the context menu, duplicate it. Replace the second icon using the edit icon from the Properties panel.
Change the icon color in the Text section of the Styling Panel.
Select the Horizontal Stack element and set the spacing value to 16px through the Properties.
Finally, select the Table element and open the Pagination parameter in the Properties panel.
With these steps, we have prepared the listing screen with its basic features. Using a similar process, you can prepare listing screens with additional features as needed.
In this learning content, we will prepare the listing screen design of the personnel management web application, which we have prepared as a sample project.
In the list screen, there is a TextInput for searching and filtering the list according to a certain value. TextInput element is an Input category element that allows text input. 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) of the entire data source, unless a specific number of displays is specified. For this reason, a static value you add in the first row will also be shown in the other rows. However, if you provide a dynamic data entry; all rows will be updated according to the values in the data source. Other important structures on the list screen are Button and Pagination elements. The Button element allows you to trigger a transition to a different page, such as a new staff addition screen. The Pagination element provides the number of contents per page of the displayed data and pagination/page transitions.
In this learning content, we are continuing with the design of the listing screen of the employee management web application we prepared as a sample project.First, let's take a look at the prepared listing screen.
The listing screen includes a TextInput element for search and filtering based on a specific value. The TextInput element is an Input category element that allows text input. Another important element on the listing screen is the Table element, which is responsible for the listing functionality. The Table element duplicates the data item added to it based on the data source unless a specific display count is set. This means that a static value added in the first row will be displayed in all subsequent rows. However, if dynamic data input is provided, all rows will be updated according to the values in the data source. Other essential components on the listing screen include Button and Pagination elements. The Button element triggers actions like navigating to a different page, such as adding a new employee. The Pagination element handles the number of items shown per page and provides page navigation.With this information, let's start preparing the listing screen together.
First, create a new screen from the Screens panel for the Listing screen.
Choose Blank in the opened pop-up and name the screen List. Then click the Create button.
Open the Dashboard screen. Using the Item Tree and/or Breadcrumb, select the Header element along with its contained Row element. Click the Copy button from the context menu.
Go back to the Listing screen. Drag and drop a Row element onto the screen. With the Row element selected, use the helper menu next to the Row element name in the Properties panel to Paste the copied Header element.
To change the page name in the Header, select the Label element. In the Properties panel, set the Value field to Employee List.
We can also use the Table element prepared for the Dashboard screen. Open the Dashboard screen. Select the parent Row element containing the Table element. Click Copy from the context menu.
Return to the Listing screen and drag the Row element onto the screen. With the added Row element selected, paste the copied Row from the Dashboard screen.
You can now delete the first added Row.
Select the added table and delete the Label elements within the title section using the context menu.
After deleting the Labels, select the Row and change it to a three-column structure using the Properties panel.
Add a text input element to the left column. In the Properties panel, enter Search... as the Placeholder text. In future learning content, we will enable search within the list using this input field.
Add a Button element to the right column. In the Properties panel, enter New Add as the Label text. Align the Button element's column to the right using the Styling panel. In future learning content, we will use this button to trigger the addition of new employees.
Since this is a general listing screen, you can add new columns to the data table as needed. For example, let's add two more columns for employee email and phone number.
Select the Table Row element using the Item Tree or Breadcrumb. Add two more columns to the table through the Properties panel and arrange them after the column containing employee names.
In the first newly added column, add a Label element. Use the Value field in the Properties panel to enter a phone number (+12121234567).
In the second newly added column, add another Label element. Use the Value parameter to enter an example email address (mary.watson@kuika.com).
Additionally, let's add another edit icon to the last column of the Table. First, add a Horizontal Stack element to adjust the spacing between the two icons when they are side by side. Then, move the icon within the column into the Horizontal Stack element.
Select the icon, and through the context menu, duplicate it. Replace the second icon using the edit icon from the Properties panel.
Change the icon color in the Text section of the Styling Panel.
Select the Horizontal Stack element and set the spacing value to 16px through the Properties.
Finally, select the Table element and open the Pagination parameter in the Properties panel.
With these steps, we have prepared the listing screen with its basic features. Using a similar process, you can prepare listing screens with additional features as needed.
