Let's continue with the design of the elements in the header and body of the Dashboard screen, which we started designing with the Tabbar menu in the previous learning content.
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 a header, card structure, and listing structure.
We continue on the screen where we made the Tabbar menu design that we prepared in the previous learning content.
First, we display the Header design at the top of the screen. Under the Header, we see a Card type summary showing the number of employees and departments. Under the card structure, there is a list structure that allows the recently added employee to be listed. We will use the table element in the Data Repeater category to create the list structure.
When preparing card-type views, you can prepare the visual design with nested row elements. After the first row element, you need to create another row element with a single column for each card structure. Then, you should add Row elements for row-based views repeatedly according to how you want to add the elements in this column.
Let's continue with the design of the elements in the header and body of the Dashboard screen, which we started designing with the Tabbar menu in the previous learning content.
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 a header, card structure, and listing structure.
We continue on the screen where we made the Tabbar menu design that we prepared in the previous learning content.
First, we display the Header design at the top of the screen. Under the Header, we see a Card type summary showing the number of employees and departments. Under the card structure, there is a list structure that allows the recently added employee to be listed. We will use the table element in the Data Repeater category to create the list structure.
When preparing card-type views, you can prepare the visual design with nested row elements. After the first row element, you need to create another row element with a single column for each card structure. Then, you should add Row elements for row-based views repeatedly according to how you want to add the elements in this column.
Now, let's start preparing this Dashboard screen together.
First, open the Screens panel and rename the HomePage page where you designed the Tabbar menu to Dashboard.
Let's start with the Header design. With the Elements panel on the left side, add the Header element on the screen with drag and drop.
Now, let's add a Row element to this Header element to divide it into two sections. The row element comes as three columns by default. After adding the element, convert it to 2 columns from the Properties panel on the right side.
Add the Label element to the left column in the Row.
Click Label twice and change the text to Dashboard. Let's complete the visual arrangement by selecting the H3 text style from the Styling panel , Text section.
Then, add an icon element to the right column of the Row element.
While the icon element is selected, select the Logout icon from the icon library on the Properties panel on the right side.
Then, give the icon element a padding value of 8 Pixels in 4 directions from the Styling panel Layout field.
The icon element is a font-based element. Therefore, you can make changes such as size and color with the Text section in the Styling panel.
Change the color of the icon with the Text section.
Then, while the icon element is selected, change the background color of the icon from the Styling panel, Fill section and give the icon a Radius of 4 Pixels in 4 directions from the Border field.
With the column containing the icon element selected, justify the icon inside the column to the right via the Styling panel, Layout, Alignment.
Now, let's continue with the card design under the Header design.
To create the binary summary card view in the Dashboard and seen in the image, first add the Row element to the screen with drag and drop.
With the Row element selected, set the number of columns to 2 columns via the Properties panel.
Drag-drop a Row element to the left column in the Row. Convert the added Row element to a single column via Properties. Then, with the Row element selected, select the color , White from the Styling, Fill, Color section. Then select Radius ready-made style from Border, Radius. We have prepared the card itself; now, let's add the elements that will be in it.
Drag and drop another Row element into the Row element prepared for the card view. Transform this Row element into a two-column structure where the left column is wider than the right column via the Properties panel.
Then remove the Row ready-made style from Styling, Layout. Select None from the ready-made styles and give Bottom a padding value of 4 pixels.
Then remove the Column ready-made style from Styling, Layout in the columns in Row. Select None from the ready-made styles.
Add a Label element in the left column. Double-click on the added Label element and enter the text Employees.
Then, add an icon element to the right column representing the employees. To do this, add the Icon element to the column.
Select an icon from the icon library via the Properties panel. Change the icon color to red via the Styling panel, Text, Color.
Then select the column with the Icon element and align it Right Justified via Styling panel, Layout section,Align.
Let's add a second row to the card. Add another Row element inside the card and below the first row. Convert this Row element to a single-column structure via the Properties panel.
Then remove the Row ready-made style from Styling, Layout and select None from the Ready styles.
Then remove the Column ready-made style from the column in the Row via Styling,Layout and select None from the ready-made styles.
Then, let's add a Label element in this Row where the total number of employees will be written. Double-click on the Label element and enter the value 255.
Select Text, Styles, and H2 from the Styling panel.
Select the outermost Row of the first Card structure via Item Tree and-or Breadcrumb. Duplicate it with Duplicate from the Context menu. Drag and drop one of the duplicated Cards to the second column on the right.
Let's update the content of the card on the right. Double-click on the Label element and enter the value Departments.
Then select the Icon element and change its icon in the Properties panel. Give the icon an orange color via Text, Color from the Styling panel.
Double-click on the Label element in the bottom row and enter the value 14.
We have completed the card section that will provide a summary view in the Dashboard. In the following lessons, we will bind data to the numbers here and make them change dynamically.
Now, let's design a list under the Card section that shows recently added staff.
First, add a Row element under the summary view. Convert this Row element to a single column.
With the Row element selected, set the Padding value to 0 in the Top direction from the Styling panel Layout area.
Let's do the same for the column. With Column selected, set the Padding value to 0 in the Top direction in the Layout area of the Styling panel.
Then, drag and drop a Row element into the column and turn the Row into a single column.
Select the Row and change the background color to white with the Fill section from the Styling panel. Select Radius ready-made style from the Border section.
Then, add a row element inside the column. Turn this Row element into two columns, with the left column larger than the right column. We will use this section for the title of the list.
Then select Row, and in Styling, Layout, remove the Row preset and select the None preset. Then, give a padding value of 8 pixels in the Bottom direction.
Do this for both columns. Remove the Column preset, select the None preset, and give a padding value of 8 pixels in the Bottom direction.
Add a label element to the left column and enter the text Recently Added Employees.
Then, add the style, H3 from Styling, Text to the Label element.
In the second column, add an icon element and, select an icon from the icon library, and change its color.
Select the column on the right and justify the icon element to the right in the column where it is located and center it vertically with Right Justified from the Styling panel Layout section Align field. So far, we have completed the title section of the List.
Now add another Row element under the Row element in the header section. Turn it into a single column via the Properties panel. Then select the Row, and in Styling, Layout, remove the Row preset and select the None preset.
Then select the column in the Row, remove the Column ready style, and select the None ready style.
Add a Table element inside the column.
The Table element comes with a table column header by default. Hide column headers by turning off, Switch in the showHeader field in the Properties panel.
Now, let's add elements for the data to be displayed in the Table element.
Add an Image element to the first column of the Table element. Select fill type from the Properties panel imageFit field.
Then, enter 32 pixels for width and height in the Size field of the Layout section of the Styling panel.
Select Radius_Full ready-made style from the Border section.
After setting the image for the Image element, add a temporary image via Uploaded Images from the Properties panel Value field.
To add an image to the image library, select uploaded image and click the upload button. You can add an image by drag and drop or select it from your computer.
You can also use the Kuika AI assistant to create and use a new image while adding an image.
In the second column of the Table element, add a Label element with the name of the staff and write a temporary name.
In the third column of the Table element, add a Label element with department names and type a temporary department name.
Then, while the Label is selected, remove the Paragraph ready style and select H6 ready style via the Styling panel Text section.
In the fourth column of the Table element, add an Icon element for the drawer that will show the staff details.
Select an icon via the Properties panel. Change the icon color in the Text section of the Styling panel. Select the table column where the icon element is located and justify the icon to the right in the column with the Layout section of the Styling panel.
Finally, select Table Row and remove the Border ready-made style from the Styling panel Border area. Add BorderBottom ready-made style.
With these operations, you have completed the Dashboard screen design. You can develop the Dashboard screen as you wish and enrich it in terms of content.
Let's continue with the design of the elements in the header and body of the Dashboard screen, which we started designing with the Tabbar menu in the previous learning content.
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 a header, card structure, and listing structure.
We continue on the screen where we made the Tabbar menu design that we prepared in the previous learning content.
First, we display the Header design at the top of the screen. Under the Header, we see a Card type summary showing the number of employees and departments. Under the card structure, there is a list structure that allows the recently added employee to be listed. We will use the table element in the Data Repeater category to create the list structure.
When preparing card-type views, you can prepare the visual design with nested row elements. After the first row element, you need to create another row element with a single column for each card structure. Then, you should add Row elements for row-based views repeatedly according to how you want to add the elements in this column.
Let's continue with the design of the elements in the header and body of the Dashboard screen, which we started designing with the Tabbar menu in the previous learning content.
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 a header, card structure, and listing structure.
We continue on the screen where we made the Tabbar menu design that we prepared in the previous learning content.
First, we display the Header design at the top of the screen. Under the Header, we see a Card type summary showing the number of employees and departments. Under the card structure, there is a list structure that allows the recently added employee to be listed. We will use the table element in the Data Repeater category to create the list structure.
When preparing card-type views, you can prepare the visual design with nested row elements. After the first row element, you need to create another row element with a single column for each card structure. Then, you should add Row elements for row-based views repeatedly according to how you want to add the elements in this column.
Now, let's start preparing this Dashboard screen together.
First, open the Screens panel and rename the HomePage page where you designed the Tabbar menu to Dashboard.
Let's start with the Header design. With the Elements panel on the left side, add the Header element on the screen with drag and drop.
Now, let's add a Row element to this Header element to divide it into two sections. The row element comes as three columns by default. After adding the element, convert it to 2 columns from the Properties panel on the right side.
Add the Label element to the left column in the Row.
Click Label twice and change the text to Dashboard. Let's complete the visual arrangement by selecting the H3 text style from the Styling panel , Text section.
Then, add an icon element to the right column of the Row element.
While the icon element is selected, select the Logout icon from the icon library on the Properties panel on the right side.
Then, give the icon element a padding value of 8 Pixels in 4 directions from the Styling panel Layout field.
The icon element is a font-based element. Therefore, you can make changes such as size and color with the Text section in the Styling panel.
Change the color of the icon with the Text section.
Then, while the icon element is selected, change the background color of the icon from the Styling panel, Fill section and give the icon a Radius of 4 Pixels in 4 directions from the Border field.
With the column containing the icon element selected, justify the icon inside the column to the right via the Styling panel, Layout, Alignment.
Now, let's continue with the card design under the Header design.
To create the binary summary card view in the Dashboard and seen in the image, first add the Row element to the screen with drag and drop.
With the Row element selected, set the number of columns to 2 columns via the Properties panel.
Drag-drop a Row element to the left column in the Row. Convert the added Row element to a single column via Properties. Then, with the Row element selected, select the color , White from the Styling, Fill, Color section. Then select Radius ready-made style from Border, Radius. We have prepared the card itself; now, let's add the elements that will be in it.
Drag and drop another Row element into the Row element prepared for the card view. Transform this Row element into a two-column structure where the left column is wider than the right column via the Properties panel.
Then remove the Row ready-made style from Styling, Layout. Select None from the ready-made styles and give Bottom a padding value of 4 pixels.
Then remove the Column ready-made style from Styling, Layout in the columns in Row. Select None from the ready-made styles.
Add a Label element in the left column. Double-click on the added Label element and enter the text Employees.
Then, add an icon element to the right column representing the employees. To do this, add the Icon element to the column.
Select an icon from the icon library via the Properties panel. Change the icon color to red via the Styling panel, Text, Color.
Then select the column with the Icon element and align it Right Justified via Styling panel, Layout section,Align.
Let's add a second row to the card. Add another Row element inside the card and below the first row. Convert this Row element to a single-column structure via the Properties panel.
Then remove the Row ready-made style from Styling, Layout and select None from the Ready styles.
Then remove the Column ready-made style from the column in the Row via Styling,Layout and select None from the ready-made styles.
Then, let's add a Label element in this Row where the total number of employees will be written. Double-click on the Label element and enter the value 255.
Select Text, Styles, and H2 from the Styling panel.
Select the outermost Row of the first Card structure via Item Tree and-or Breadcrumb. Duplicate it with Duplicate from the Context menu. Drag and drop one of the duplicated Cards to the second column on the right.
Let's update the content of the card on the right. Double-click on the Label element and enter the value Departments.
Then select the Icon element and change its icon in the Properties panel. Give the icon an orange color via Text, Color from the Styling panel.
Double-click on the Label element in the bottom row and enter the value 14.
We have completed the card section that will provide a summary view in the Dashboard. In the following lessons, we will bind data to the numbers here and make them change dynamically.
Now, let's design a list under the Card section that shows recently added staff.
First, add a Row element under the summary view. Convert this Row element to a single column.
With the Row element selected, set the Padding value to 0 in the Top direction from the Styling panel Layout area.
Let's do the same for the column. With Column selected, set the Padding value to 0 in the Top direction in the Layout area of the Styling panel.
Then, drag and drop a Row element into the column and turn the Row into a single column.
Select the Row and change the background color to white with the Fill section from the Styling panel. Select Radius ready-made style from the Border section.
Then, add a row element inside the column. Turn this Row element into two columns, with the left column larger than the right column. We will use this section for the title of the list.
Then select Row, and in Styling, Layout, remove the Row preset and select the None preset. Then, give a padding value of 8 pixels in the Bottom direction.
Do this for both columns. Remove the Column preset, select the None preset, and give a padding value of 8 pixels in the Bottom direction.
Add a label element to the left column and enter the text Recently Added Employees.
Then, add the style, H3 from Styling, Text to the Label element.
In the second column, add an icon element and, select an icon from the icon library, and change its color.
Select the column on the right and justify the icon element to the right in the column where it is located and center it vertically with Right Justified from the Styling panel Layout section Align field. So far, we have completed the title section of the List.
Now add another Row element under the Row element in the header section. Turn it into a single column via the Properties panel. Then select the Row, and in Styling, Layout, remove the Row preset and select the None preset.
Then select the column in the Row, remove the Column ready style, and select the None ready style.
Add a Table element inside the column.
The Table element comes with a table column header by default. Hide column headers by turning off, Switch in the showHeader field in the Properties panel.
Now, let's add elements for the data to be displayed in the Table element.
Add an Image element to the first column of the Table element. Select fill type from the Properties panel imageFit field.
Then, enter 32 pixels for width and height in the Size field of the Layout section of the Styling panel.
Select Radius_Full ready-made style from the Border section.
After setting the image for the Image element, add a temporary image via Uploaded Images from the Properties panel Value field.
To add an image to the image library, select uploaded image and click the upload button. You can add an image by drag and drop or select it from your computer.
You can also use the Kuika AI assistant to create and use a new image while adding an image.
In the second column of the Table element, add a Label element with the name of the staff and write a temporary name.
In the third column of the Table element, add a Label element with department names and type a temporary department name.
Then, while the Label is selected, remove the Paragraph ready style and select H6 ready style via the Styling panel Text section.
In the fourth column of the Table element, add an Icon element for the drawer that will show the staff details.
Select an icon via the Properties panel. Change the icon color in the Text section of the Styling panel. Select the table column where the icon element is located and justify the icon to the right in the column with the Layout section of the Styling panel.
Finally, select Table Row and remove the Border ready-made style from the Styling panel Border area. Add BorderBottom ready-made style.
With these operations, you have completed the Dashboard screen design. You can develop the Dashboard screen as you wish and enrich it in terms of content.
