Now, it's time to create our core page of the task management system, namely My tasks.
Start from the following steps:
Once you've done it, we need to add a sidebar and a navigation bar (a navbar) to the My tasks page in the following way:
The next thing we need to do is customize the navbar. Firstly, we need to add 3 more spaces aligned with the navbar. To do this, click the orange Plus button located to the right of the main space in the navbar. Now, drag and drop the spaces to resize them.
To create a logo for the task management system, conduct the following steps:
The next step is to set up a link to the main page that will be placed in the space with the background image. To do this:
Make sure you choose the following settings for the Button link in the sidebar:
Additionally, delete the button text and center the button link horizontally and vertically in the space settings.
Now, continue working with the spaces in the navbar.
Select the next space to the right of the one we’ve worked with. Add a text component here with the following settings:
Center the text horizontally and vertically. See the results:
There are two more spaces to edit. Select the third one, add an Input component there, and change its settings as follows:
Add an Icon component in this space with the following settings:
After that, drag and drop the Icon to place it on the left side from the Input component. To avoid impositions of the Input and Icon components, add a 8px spacing to it on the right side in the sidebar (the configuration panel).
The page looks like this:
Now, it's time to work with the last space in the navigation bar. Add a Button link component there, and edit its settings in the following way:
We've configured the navigation bar, and here're the result we get:
Now, move to our work area to build your a page prototype following the WYSIWYG approach. In UI Bakery, we use cards to place content in the work area. Add a card to the space at the bottom of the navigation bar. There is no need in a footer and a header in the card, so just uncheck them in the configuration panel.
After that, work with only one space placed in a card. Conduct the following steps:
Add the Button link to the space with the heading with the following properties:
Further, stick the Button link to the right side to place the heading (My Tasks) and the button link (+ NEW TASK) opposite each other in one space. See the example:
To develop an easy-to-use UI, add a new space under the card. Select the Tasks widget from the UI Bakery widgets and insert it in this space, just in the way we've done it with the Register and Login widgets. The Tasks widget is displayed as a card with the content. Remove the header from this card.
After that, create the column headers. To do this:
Add a Text component in every space with the following properties:
Align the Text component in every space to the left horizontally and to the center vertically. Put their names from left to right as follows:
As a result, the headings will look like this.
Turn to the rows in the card, the tasks. Move to the space below the column header space. Add two more spaces in the same row. Resize the spaces to make the columns in them fit the column header spaces. See what we have now:
The left space in the row placed right below the Task description has a checkbox component. Add the Text component below the Priority space with such names as "Normal", "Low", “Urgent”, or any other name you prefer. Set its color to green (success), or red (danger).
Add the Text component with the following properties to the space placed under Category:
Add the Text component under Date with the same properties as in the previous case. Name it appropriately, e.g., “15 Nov 2019”, “05 Mar 2017”, etc.
Now, work with the space in the row that is located under Actions.
Add 2 Button links with the following properties:
Now, you can edit all the spaces below just in the same way you've created the first Task. See the results:
We've finished working with My Tasks page. Let's move further and discover how to add one more important page to our project - the Create a task page.
Get updates on the newest stories, case studies and tips right in your mailbox.