In this learning content, we will prepare a screen design that provides detailed information about employees.Let's start by examining the Completed Detail screen.
The Detail screen is designed as a Drawer screen type and is dimensioned accordingly. At the top of the Detail screen, there's a header. The header contains a Label element displaying the screen name and an exit icon button to close the screen.Below the header, we see the use of an Image element for personnel photos and label elements for full name, department, and other headings.
In this learning content, we will prepare a screen design that provides detailed information about employees.Let's start by examining the Completed Detail screen.
The Detail screen is designed as a Drawer screen type and is dimensioned accordingly. At the top of the Detail screen, there's a header. The header contains a Label element displaying the screen name and an exit icon button to close the screen.Below the header, we see the use of an Image element for personnel photos and label elements for full name, department, and other headings.While preparing this screen, let's modify the form screen we created in the previous video.
Open the Form screen. Use the context menu next to the screen name in the Properties panel to duplicate the screen.
Rename the duplicated screen using the detail menu next to the relevant screen in the Screen panel. Change the name to Employee Details.
Select the label element within the header. In the Properties panel, change the value to Employee Details for the screen name.
With a few minor edits, we will now transform this form into a display screen.
Select the upload icon button under the Image element and delete it.
Select and delete the input elements on the form side one by one.
For the first section, Fullname, add a Label element. Label elements are added inline. In the Styling panel, select the Block display type from the Layout section. This way, the label element will stay in the same line as the bottom area. In the Properties panel, add an example name (e.g., Mary Watson) to the value section.
Duplicate the Label element and then move it to the Phone section below. In the Properties panel, add an example phone number (e.g., +12121234567) to the value section.
Duplicate the Label element again and then move it to the Email section below. Add an example email address (e.g., mary.watson@kuika.com) to the value section in the Properties panel.
Similarly, for the Department, duplicate the Label element and make the necessary adjustments. Add an example department name (e.g., Finance) to the value section in the Properties panel.
Then, within the Title section, select and duplicate the Label element used in the previous section. Move the duplicated Label element from the Department section to this area. Add an example title (e.g., Team Leader) to the value section in the Properties panel.
Similar to the previous step, finally, select and duplicate the Label element under the Title section. Move the duplicated Label element from the Title section under Birthday Date. Add an example date (e.g., 01.12.2022) to the value section in the Properties panel.
Finally, since this screen is a data display screen, we don't need the buttons in the Footer section. Select and delete the Footer element.
Using the basic features of a screen we prepared earlier, you can quickly create a different screen as well.
In this learning content, we will prepare a screen design that provides detailed information about employees.Let's start by examining the Completed Detail screen.
The Detail screen is designed as a Drawer screen type and is dimensioned accordingly. At the top of the Detail screen, there's a header. The header contains a Label element displaying the screen name and an exit icon button to close the screen.Below the header, we see the use of an Image element for personnel photos and label elements for full name, department, and other headings.
In this learning content, we will prepare a screen design that provides detailed information about employees.Let's start by examining the Completed Detail screen.
The Detail screen is designed as a Drawer screen type and is dimensioned accordingly. At the top of the Detail screen, there's a header. The header contains a Label element displaying the screen name and an exit icon button to close the screen.Below the header, we see the use of an Image element for personnel photos and label elements for full name, department, and other headings.While preparing this screen, let's modify the form screen we created in the previous video.
Open the Form screen. Use the context menu next to the screen name in the Properties panel to duplicate the screen.
Rename the duplicated screen using the detail menu next to the relevant screen in the Screen panel. Change the name to Employee Details.
Select the label element within the header. In the Properties panel, change the value to Employee Details for the screen name.
With a few minor edits, we will now transform this form into a display screen.
Select the upload icon button under the Image element and delete it.
Select and delete the input elements on the form side one by one.
For the first section, Fullname, add a Label element. Label elements are added inline. In the Styling panel, select the Block display type from the Layout section. This way, the label element will stay in the same line as the bottom area. In the Properties panel, add an example name (e.g., Mary Watson) to the value section.
Duplicate the Label element and then move it to the Phone section below. In the Properties panel, add an example phone number (e.g., +12121234567) to the value section.
Duplicate the Label element again and then move it to the Email section below. Add an example email address (e.g., mary.watson@kuika.com) to the value section in the Properties panel.
Similarly, for the Department, duplicate the Label element and make the necessary adjustments. Add an example department name (e.g., Finance) to the value section in the Properties panel.
Then, within the Title section, select and duplicate the Label element used in the previous section. Move the duplicated Label element from the Department section to this area. Add an example title (e.g., Team Leader) to the value section in the Properties panel.
Similar to the previous step, finally, select and duplicate the Label element under the Title section. Move the duplicated Label element from the Title section under Birthday Date. Add an example date (e.g., 01.12.2022) to the value section in the Properties panel.
Finally, since this screen is a data display screen, we don't need the buttons in the Footer section. Select and delete the Footer element.
Using the basic features of a screen we prepared earlier, you can quickly create a different screen as well.
