Let's continue with the design of the elements in the body of the Dashboard screen that we started designing with the header in the previous learning content.
Let's continue with the design of the elements in the body of the Dashboard screen that we started designing with the header in the previous learning content.
First, let's begin by examining the Dashboard screen that we will complete at the end of this learning content. In this content, we will complete the design of a dashboard screen with a header, card structure, and list structure.
We will continue from where we left off on the screen where we created the Header design.
Below the Header, we see a card structure that displays the number of employees and departments. Under the card structure, there is a list structure that lists the recently added employees. To create the list structure, we will use the table element from the Data Repeater category.
When creating the visual design for card structures, you can use nested Row elements. In general, when you drag any element onto the screen, you need a Row element for it to be displayed as a section on the screen. After the first Row element, you need a separate Row element with a single column for each card structure. Then, depending on how you want to add the elements within this column, you should add Row elements again for each row-based view according to your needs.
Now let's start preparing this displayed Dashboard screen together.
For the Dashboard screen shown and seen in the image, first drag and drop a Row element onto the screen. Adjust the padding settings of the Row element for spacing using Styling > Layout > Styles > Row.
Note that each Row element has 8px padding applied in all directions by default. You can change this value as needed. For our card design, each nested Row element will have a total of 16px padding. You can adjust these values according to your design needs to maintain a neat and aligned screen layout.
Now let's continue where we left off.
With the Row element selected, adjust the number of columns to two columns through the Properties panel.
Within the left column of the Row, drag and drop another Row element. Turn this added Row element into a single-column structure through the Properties. Then, using Styling > Fill > Color, select the color White for the Row. Next, set a radius value of 8px for all four corners of the Row in the Border section. The card itself is prepared. Now let's add the elements that will be inside it.
For the card view, within the prepared Row element, add another Row element. Adjust this Row element to have two columns, where the left column is wider than the right.
Add a Label element to the left column. In the Properties panel, use Value > Fixed Value to enter Employees as the text for the added Label element.
Then, in the right column, add an icon element representing employees. Add the Icon element to the column.
In the Properties panel, select an icon from the icon library. Change the icon color to red through Styling > Text > Color in the Styling panel.
Then, select the column containing the Icon element and align it to the right using the Layout section in the Styling panel.
Add a second row to the card. Add another Row element within the card and below the first row. Through the Properties panel, turn this Row element into a single-column structure.
Then, add a Label element to this Row to display the total number of employees. Use Value > Fixed Value in the Properties panel to enter 255 as a temporary value for the Label text.
In the Styling panel, choose Text > Styles > H1.
Select the outermost Row of the first Card structure using Item Tree and/or Breadcrumb. Duplicate it using the context menu. Drag and drop one of the duplicated Cards into the second right column.
Let's update the content of the right card. Select the Label element. In the Properties panel, change the Value to Department.
Then, select the Icon element and change the icon. In the Styling panel, change the icon color to orange through Text > Color.
Select the Label element in the lower row, and using Properties, change the Value to 14.
We have completed the card section that will provide a summary view in the Dashboard. In future modules, we will make these numbers dynamic by connecting them to data.
Now let's design a list that displays the recently added employees under the card section.
First, add a Row element below the summary view. Turn this Row element into a single-column structure.
Select the column and use Styling > Fill to change the background color to white. In the Border section, set a radius value of 8px for all four corners.
To align it with the card section at the top, select the Row element and set the padding value to 16px in all directions through the Layout section.
Add another Row element within the column. Turn this Row element into a two-column structure. We will use this section for the list title. In the left column, add a Label element and enter Recently Added Employees in the Value field using Properties > Value > Fixed Value.
Then, define the H3 style for the Label element through the Styling panel > Text section.
In the second column, add another Label element and change its value to Show all. Change the style to Button_Secondary through the Styling panel > Text > Styles section. To create a link-like view, choose Underlined from the Options section.
Select the column on the right side and align the Label element within the column to the right through the Styling panel > Layout section.
Now, below the Row element of the title section, add another Row element. Turn this Row element into a single-column structure using the Properties panel.
Add a Table element within the Row element.
The Table element comes with a default table column header. Hide column headers by turning off showHeader through the Properties panel.
Now let's add elements for the data that will be displayed in the Table element.
Add an Image element to the first column of the Table element. Use the Properties panel to select fill for the imageFit property.
Then, in the Styling panel, set the width and height to 32px in the Layout section > Size.
Set a 32px radius for all four corners of the Image element through the Border section > Radius. This radius will display the added image within a rounded frame.
After adjusting the visual settings of the Image element, use Properties > Value > Uploaded Images to add a temporary image.
When adding an image to the image library, select Uploaded image, then click Upload. You can drag and drop an image to the open area or choose an image from your computer.
You can also use the Kuika AI assistant to create a new image for the avatar if needed.
In the second column of the Table element, add a Label element to display the name of the employee. Use Value > Fixed Value in the Properties panel to enter a temporary name. We will set up this label to dynamically display data later in the modules.
In the third column of the Table element, add a Label element to display the department names and enter the department name in the Value field.
In the fourth column of the Table element, add an Icon element for the drawer that will show employee details.
Select an icon through the Properties panel. Change the icon color through the Styling panel > Text > Color. Finally, select the column containing the Icon element and align it to the right within the column through the Styling panel > Layout section.
Finally, click on an empty area on the screen and select Starting Screen as the role from the Properties panel. This action will set the starting screen for your application.
With these steps, you have completed the design of the Dashboard screen. You can further develop and enrich the Dashboard screen according to your needs.
Let's continue with the design of the elements in the body of the Dashboard screen that we started designing with the header in the previous learning content.
Let's continue with the design of the elements in the body of the Dashboard screen that we started designing with the header in the previous learning content.
First, let's begin by examining the Dashboard screen that we will complete at the end of this learning content. In this content, we will complete the design of a dashboard screen with a header, card structure, and list structure.
We will continue from where we left off on the screen where we created the Header design.
Below the Header, we see a card structure that displays the number of employees and departments. Under the card structure, there is a list structure that lists the recently added employees. To create the list structure, we will use the table element from the Data Repeater category.
When creating the visual design for card structures, you can use nested Row elements. In general, when you drag any element onto the screen, you need a Row element for it to be displayed as a section on the screen. After the first Row element, you need a separate Row element with a single column for each card structure. Then, depending on how you want to add the elements within this column, you should add Row elements again for each row-based view according to your needs.
Now let's start preparing this displayed Dashboard screen together.
For the Dashboard screen shown and seen in the image, first drag and drop a Row element onto the screen. Adjust the padding settings of the Row element for spacing using Styling > Layout > Styles > Row.
Note that each Row element has 8px padding applied in all directions by default. You can change this value as needed. For our card design, each nested Row element will have a total of 16px padding. You can adjust these values according to your design needs to maintain a neat and aligned screen layout.
Now let's continue where we left off.
With the Row element selected, adjust the number of columns to two columns through the Properties panel.
Within the left column of the Row, drag and drop another Row element. Turn this added Row element into a single-column structure through the Properties. Then, using Styling > Fill > Color, select the color White for the Row. Next, set a radius value of 8px for all four corners of the Row in the Border section. The card itself is prepared. Now let's add the elements that will be inside it.
For the card view, within the prepared Row element, add another Row element. Adjust this Row element to have two columns, where the left column is wider than the right.
Add a Label element to the left column. In the Properties panel, use Value > Fixed Value to enter Employees as the text for the added Label element.
Then, in the right column, add an icon element representing employees. Add the Icon element to the column.
In the Properties panel, select an icon from the icon library. Change the icon color to red through Styling > Text > Color in the Styling panel.
Then, select the column containing the Icon element and align it to the right using the Layout section in the Styling panel.
Add a second row to the card. Add another Row element within the card and below the first row. Through the Properties panel, turn this Row element into a single-column structure.
Then, add a Label element to this Row to display the total number of employees. Use Value > Fixed Value in the Properties panel to enter 255 as a temporary value for the Label text.
In the Styling panel, choose Text > Styles > H1.
Select the outermost Row of the first Card structure using Item Tree and/or Breadcrumb. Duplicate it using the context menu. Drag and drop one of the duplicated Cards into the second right column.
Let's update the content of the right card. Select the Label element. In the Properties panel, change the Value to Department.
Then, select the Icon element and change the icon. In the Styling panel, change the icon color to orange through Text > Color.
Select the Label element in the lower row, and using Properties, change the Value to 14.
We have completed the card section that will provide a summary view in the Dashboard. In future modules, we will make these numbers dynamic by connecting them to data.
Now let's design a list that displays the recently added employees under the card section.
First, add a Row element below the summary view. Turn this Row element into a single-column structure.
Select the column and use Styling > Fill to change the background color to white. In the Border section, set a radius value of 8px for all four corners.
To align it with the card section at the top, select the Row element and set the padding value to 16px in all directions through the Layout section.
Add another Row element within the column. Turn this Row element into a two-column structure. We will use this section for the list title. In the left column, add a Label element and enter Recently Added Employees in the Value field using Properties > Value > Fixed Value.
Then, define the H3 style for the Label element through the Styling panel > Text section.
In the second column, add another Label element and change its value to Show all. Change the style to Button_Secondary through the Styling panel > Text > Styles section. To create a link-like view, choose Underlined from the Options section.
Select the column on the right side and align the Label element within the column to the right through the Styling panel > Layout section.
Now, below the Row element of the title section, add another Row element. Turn this Row element into a single-column structure using the Properties panel.
Add a Table element within the Row element.
The Table element comes with a default table column header. Hide column headers by turning off showHeader through the Properties panel.
Now let's add elements for the data that will be displayed in the Table element.
Add an Image element to the first column of the Table element. Use the Properties panel to select fill for the imageFit property.
Then, in the Styling panel, set the width and height to 32px in the Layout section > Size.
Set a 32px radius for all four corners of the Image element through the Border section > Radius. This radius will display the added image within a rounded frame.
After adjusting the visual settings of the Image element, use Properties > Value > Uploaded Images to add a temporary image.
When adding an image to the image library, select Uploaded image, then click Upload. You can drag and drop an image to the open area or choose an image from your computer.
You can also use the Kuika AI assistant to create a new image for the avatar if needed.
In the second column of the Table element, add a Label element to display the name of the employee. Use Value > Fixed Value in the Properties panel to enter a temporary name. We will set up this label to dynamically display data later in the modules.
In the third column of the Table element, add a Label element to display the department names and enter the department name in the Value field.
In the fourth column of the Table element, add an Icon element for the drawer that will show employee details.
Select an icon through the Properties panel. Change the icon color through the Styling panel > Text > Color. Finally, select the column containing the Icon element and align it to the right within the column through the Styling panel > Layout section.
Finally, click on an empty area on the screen and select Starting Screen as the role from the Properties panel. This action will set the starting screen for your application.
With these steps, you have completed the design of the Dashboard screen. You can further develop and enrich the Dashboard screen according to your needs.
