In this learning content, we will design a Form screen for adding a new staff member. We will frequently refer to the elements in the Input categories in the form screen design.
In this learning content, we will design a Form screen that enables adding new personnel.Before we start, let's take a look at the screen design we aim to create at the end of this learning content.
At the top of the screen, we see a header, and below that, there are form elements. An icon element is used for uploading personnel visuals, TextInput elements for text input, and Label elements for the titles of input fields. We can also see a button element for saving the data after form submission.Now, let's create this screen together.
We will design the Form screen to be opened as a Drawer. Therefore, it's beneficial to design the screen at the width it will be displayed as a Drawer. This way, we can clearly see the layout of the elements within the screen.
To start the Form screen design, add a new screen from the Screens panel using the Blank option, and name it New Employee.
Using the handle located at the middle of the right edge of the screen, adjust the screen width to 480px. This width adjustment doesn't give an absolute width measurement for the screen. It helps visualize how the elements will behave within the specified width. However, when opening a screen as a Drawer or pop-up, you provide a definite width measurement.
Add a Header element to the screen. Here's a reminder: If the prepared Form screen will be opened as a standalone screen, it's advisable to use the header element that's used in other screens. However, if the screen will be opened as a Drawer or pop-up, the header design shouldn't necessarily be the same as the one used in a normal full-page screen. A simpler design is more appropriate in such cases.
Inside the Header element, add a Row and convert it to a two-column layout using the Properties panel.
In the left column, add a Label element. Set the value in the Properties panel to Employee Form.
In the right column, add an Icon element. Change the icon type in the Properties panel and choose the Button_Secondary style from the Styling panel's text section.
Select the column containing the icon element and use the Layout section in the Styling panel to align it to the right.
Now let's start adding elements for the form section.
Drag and drop a Row element onto the screen, and convert it to a single column using the Properties panel. Select the column, go to Styling > Fill, and set the background color to white. In the Border section, apply a radius of 8px in all four directions to give it a slight curvature.
Add a Vertical Stack element within the column. This element will help adjust the spacing between the image and icon elements placed inside it.
Add an Image element inside the Vertical Stack element. Set the Image fit property in the Properties panel to Fill. Then, open the Styling panel. In the Layout section, set the width and height to 124px. Apply a border radius of 124px in all directions to create a circular frame for the image.
Within the Vertical Stack element, add an Icon element as well. In the Properties panel, select an upload icon. Use the Styling panel's Text section to choose the Button_Secondary style.
Select the Vertical Stack element. Adjust the spacing between the two elements to 16px in the Properties panel. Additionally, center-align it in the Styling panel's layout section.
Now, let's continue with the input elements. Add a Row element and convert it to a single column using the Properties panel.
Add a Label element to the same column. Set the value in the Properties panel to Full Name. Choose the H6 style from the Styling panel for the text.
In the same column, add a Text Input element. Input elements are added in block style by default.
With the newly added input Row selected, duplicate it.
Select the label element within the duplicated row. In the Properties panel, set the value to Phone.
Select the Text Input element and remove it. Add a Numeric Input element from the Elements panel.
Duplicate the Row element again.
Select the label element and set its value to Email in the Properties panel.
Remove the Numeric Input element. Instead, add an Email input element from the Elements panel.
For the Department section, duplicate the row element and label from the previous step.
Set the value of the label to Department in the Properties panel.
Remove the Email input element and add a Selectbox element.
Duplicate the row element that contains the Department section.
Set the label's value to Title in the Properties panel.
Finally, duplicate the row element that contains the Title section.
Set the label's value to Birthday Date in the Properties panel.
Replace the Selectbox element with a Date element from the Elements panel.
Up to this point, we've added the input elements that will be used in the form. Now, let's add the button that will save the entered data.
Add a Footer element to the screen.
Inside the Footer, add a Row element and convert it to a two-column layout using the Properties panel.
In the left column, add a Label element. Set the value in the Properties panel to Delete. Change the text color to red in the Styling panel's Text section. We'll be using this screen for both adding new employees and editing or deleting existing ones. Therefore, when a user clicks the edit button on the screen displaying the list of employees, this screen will open, allowing both editing and deleting.
In the right column of the Footer, add a Button element. Set the value in the Properties panel to Save.
Save butonunun ebeveyni kolonu seç. Styling paneli layout bölümünden sağa hizala.
Up to this point, we've completed the screen design that will assist in adding, editing, and deleting data. We will establish data connections in the upcoming contents to make it functional.
In this learning content, we will design a Form screen for adding a new staff member. We will frequently refer to the elements in the Input categories in the form screen design.
In this learning content, we will design a Form screen that enables adding new personnel.Before we start, let's take a look at the screen design we aim to create at the end of this learning content.
At the top of the screen, we see a header, and below that, there are form elements. An icon element is used for uploading personnel visuals, TextInput elements for text input, and Label elements for the titles of input fields. We can also see a button element for saving the data after form submission.Now, let's create this screen together.
We will design the Form screen to be opened as a Drawer. Therefore, it's beneficial to design the screen at the width it will be displayed as a Drawer. This way, we can clearly see the layout of the elements within the screen.
To start the Form screen design, add a new screen from the Screens panel using the Blank option, and name it New Employee.
Using the handle located at the middle of the right edge of the screen, adjust the screen width to 480px. This width adjustment doesn't give an absolute width measurement for the screen. It helps visualize how the elements will behave within the specified width. However, when opening a screen as a Drawer or pop-up, you provide a definite width measurement.
Add a Header element to the screen. Here's a reminder: If the prepared Form screen will be opened as a standalone screen, it's advisable to use the header element that's used in other screens. However, if the screen will be opened as a Drawer or pop-up, the header design shouldn't necessarily be the same as the one used in a normal full-page screen. A simpler design is more appropriate in such cases.
Inside the Header element, add a Row and convert it to a two-column layout using the Properties panel.
In the left column, add a Label element. Set the value in the Properties panel to Employee Form.
In the right column, add an Icon element. Change the icon type in the Properties panel and choose the Button_Secondary style from the Styling panel's text section.
Select the column containing the icon element and use the Layout section in the Styling panel to align it to the right.
Now let's start adding elements for the form section.
Drag and drop a Row element onto the screen, and convert it to a single column using the Properties panel. Select the column, go to Styling > Fill, and set the background color to white. In the Border section, apply a radius of 8px in all four directions to give it a slight curvature.
Add a Vertical Stack element within the column. This element will help adjust the spacing between the image and icon elements placed inside it.
Add an Image element inside the Vertical Stack element. Set the Image fit property in the Properties panel to Fill. Then, open the Styling panel. In the Layout section, set the width and height to 124px. Apply a border radius of 124px in all directions to create a circular frame for the image.
Within the Vertical Stack element, add an Icon element as well. In the Properties panel, select an upload icon. Use the Styling panel's Text section to choose the Button_Secondary style.
Select the Vertical Stack element. Adjust the spacing between the two elements to 16px in the Properties panel. Additionally, center-align it in the Styling panel's layout section.
Now, let's continue with the input elements. Add a Row element and convert it to a single column using the Properties panel.
Add a Label element to the same column. Set the value in the Properties panel to Full Name. Choose the H6 style from the Styling panel for the text.
In the same column, add a Text Input element. Input elements are added in block style by default.
With the newly added input Row selected, duplicate it.
Select the label element within the duplicated row. In the Properties panel, set the value to Phone.
Select the Text Input element and remove it. Add a Numeric Input element from the Elements panel.
Duplicate the Row element again.
Select the label element and set its value to Email in the Properties panel.
Remove the Numeric Input element. Instead, add an Email input element from the Elements panel.
For the Department section, duplicate the row element and label from the previous step.
Set the value of the label to Department in the Properties panel.
Remove the Email input element and add a Selectbox element.
Duplicate the row element that contains the Department section.
Set the label's value to Title in the Properties panel.
Finally, duplicate the row element that contains the Title section.
Set the label's value to Birthday Date in the Properties panel.
Replace the Selectbox element with a Date element from the Elements panel.
Up to this point, we've added the input elements that will be used in the form. Now, let's add the button that will save the entered data.
Add a Footer element to the screen.
Inside the Footer, add a Row element and convert it to a two-column layout using the Properties panel.
In the left column, add a Label element. Set the value in the Properties panel to Delete. Change the text color to red in the Styling panel's Text section. We'll be using this screen for both adding new employees and editing or deleting existing ones. Therefore, when a user clicks the edit button on the screen displaying the list of employees, this screen will open, allowing both editing and deleting.
In the right column of the Footer, add a Button element. Set the value in the Properties panel to Save.
Save butonunun ebeveyni kolonu seç. Styling paneli layout bölümünden sağa hizala.
Up to this point, we've completed the screen design that will assist in adding, editing, and deleting data. We will establish data connections in the upcoming contents to make it functional.
