How to create a task management system: add layouts. Part 3

Once My Tasks page is ready, let's add one more page to our project and name it as Create a task. To do this in UI Bakery, conduct the following steps:

• Click on the space on the page.
• Add a card there.
• Leave a footer and a header. 

Type "Create a task" instead of "Card header" in the card header space. 

Turn to the space placed in the middle of the card, click on it, and add one more space from the right side.

Now, we have 2 spaces in the middle of the card. Resize them so that each space took 50% of the row.

Add one space below, and one more from the right side of the space. Resize two new spaces in the same way. 

Work with the lower left space. Conduct the following steps:

• Divide it into two horizontal spaces.
• Click on the necessary space.
• Select a table icon, and set the proper division.

As a result, we get three spaces from the left and two spaces from the right.

Now, divide the spaces on the left side until there are six spaces on the left side in total.

Note: there should be only two spaces on the right side.

Fill in the spaces with content starting from the upper left corner. Insert the Text component here with the next properties:

• Text – “Task description”.
• Type – paragraph.
• Color – basic.
• Style – bold.

‍

Move to the space below. Add an Input component in it with the following properties:

• Status – default.
• Type – text.
• Size – medium.
• Width – full width.
• State – active. 

See the results:

‍

Move down to the space below. Add a Text component there with the following properties:

• Text – “Category”.
• Type – paragraph.
• Color – basic.
• Style – bold. 

Move to the other space placed below. Place the following categories here:

• Option 1 – "Home".
• Option 2 – "Work".
• Option 3 – "Hobby".
• Option 4 – "Friends".

Further, add a Select component with the properties: 

• Placeholder – "select".
• Status – primary.
• Size – medium.
• Width – full width.
• State – active.

Move to the next space placed below and add a Text component here with the following properties:

• Text – “Priority”.
• Type – paragraph.
• Color – basic.
• Style – bold. 

See the results:

‍

Now, let's work with the lower space placed on the left side, and add a Select component here with the next properties:

• Option 1 – "Low".
• Option 2 – "Normal".
• Option 3 – "Urgent".

Add a Select component with the properties:

• Placeholder – "select".
• Status – primary.
• Size – medium.
• Width – full width.
• State – active.

The left part of the screen is ready:

Move to the upper right space, and add a Text component there. Edit its properties as follows:

• Text – “Due to date”.
• Type – paragraph.
• Color – basic.
• Style – bold. 

Now, work with the space placed under "Due to date". Add a Calendar component there, and set the following properties: 

• Size – medium.
• Mode – day. 

We've almost built our "Create a Task" page in UI Bakery. Check the results:

The last part to work with is the card footer. Add a Button link in its space and select the button settings: 

• Text – create.
• Status – success.
• Size – medium.
• Appearance – filled.
• Width – auto.
• State – active.
• Icon placement – text only.

Copy the button link (select it and press Ctrl+C) and insert it (Ctrl+V) again in the same space. Change the following properties of the copied button link:

• Text – cancel.
• Status – danger.

Additionally, align the buttons to the left side of the space horizontally and to the center vertically. See the results:

For now, we can link only the Cancel button: go to its settings, find and click on the Link in the configuration panel, and select the "My Tasks" page.  

Now, we need to create one more page with the tasks. Conduct the following steps:

1. Copy the "My Tasks" page.
2. Change its name to "My Tasks Updated".
3. Add some new tasks in the table.
4. Go back to the "Create a Task" page, click "Create".
5. Go to the Configuration panel on our low-code apps builder, find the Link field, and choose the "My Tasks Updated" page. 

Almost done! Let's finish with the following steps:

1. Open "My Tasks".
2. Click "+ NEW TASK".
3. Edit the button link settings in the configuration panel as follows: find the Link field and select the "Create a Task" page.
   

Let’s now look at our task management system we've built in UI Bakery. Click on the view button (an eye icon) on the top center part of the screen. Now, you can share the project you've created with your friends using the Share button placed on the upper right part of the screen.

For your convenience, we've summarized all the actions we've taken in the course of our guide in one place. Feel free to follow the link to have a look at the task management system created in the UI Bakery low-code internal tool builder!