How to

Building a Task Management System: Create Layouts Configuring Spaces and Components. Part 2

Tatiana Yudina

9 min

Now, it's time to create our core page of the task management system, namely – My tasks. 

Start from the following steps:

  • Open the Page management panel of the UI Bakery low-code apps builder.
  • Click Add new page at the bottom.
  • Name it as "My Tasks". 
How to manage components when building a task management system in a low code development platform

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:

  • Go to the Page management panel.
  • Click "Layout".
  • Select "General".
  • Choose the layout with a sidebar and a navbar. 
Using the sidebar and navigation bar in a low code development platform to build a task management system

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.

Drag and drop to create a task management system faster without coding

To create a logo for the task management system right in our low-code app development software, conduct the following steps:

  • Select the first space from the left side in the navigation bar.
  • Add a background image URL for the space: copy the image URL you want to display and paste this link in the Background image URL input that is placed in the configuration panel.
  • Set the background image fit as "cover". 
Adding logo and configuring UI components while building a task management system

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:

  • Select the space with the added background image.
  • Click the Plus button in the center of the space to add a Button link from the Components tab.
Adding links to buttons in your task management system built without coding

Make sure you choose the following settings for the Button link in the sidebar:

  • Size – tiny.
  • Appearance – ghost.
  • Icon placement – only text.

Additionally, delete the button text and center the button link horizontally and vertically in the space settings.

How a low code development platform can help build a task management system

Now, continue working with the spaces in the navbar of our apps builder.

Select the next space to the right of the one we’ve worked with. Add a text component here with the following settings:

  • Type – paragraph.
  • Color – success.
  • Style – bold.
  • Text – “Task system”. 
Adjust parameters for your task management system in a low code development platform

Center the text horizontally and vertically. See the results:

How to configure a task system in UI Bakery low code development platform

There are two more spaces to edit. Select the third one, add an Input component there, and change its settings as follows:

  • Status – default.
  • Type – text.
  • Size – medium.
  • Shape – rectangle.
  • Width – custom 500px.
  • Placeholder – “Search for a task”.
Low code development platform functionality allowing to create a task management system

Add an Icon component in this space with the following settings:

  • Icon – search.
  • Color – info.
  • Size – large.
How to use drag-n-drop to build a task management system in a low code development platform

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 of the apps builder Configuration panel.

Spacing control allowing to build a better task management system without coding

The page looks like this:

Tuning a task management system properly

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:

  • Status – info.
  • Size – medium.
  • Appearance – ghost.
  • Width – auto.
  • State – active.
  • Icon placement – only icon;
  • Icon – log-out.
Developing a proper task system in UI Bakery, a low code development platform

We've configured the navigation bar, and here're the results we get:

How to create a task management application without coding and designing

Now, move to our work area to build a page prototype following the WYSIWYG approach. In the UI Bakery visual development platform, 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. 

How to build a task management system in a low code development platform and download its Angular code

After that, work with only one space placed in a card. Conduct the following steps:

  • Align the future content in the space to the left side horizontally and to the center vertically.
  • Add a heading.
  • Name the heading as "My Tasks".
  • Put its setting as H6.
Using the control panel when building a task management system in a no code development platform

Add the Button link to the space with the heading with the following properties:

  • Text – "New Task".
  • Status – info.
  • Size – medium.
  • Appearance – ghost.
  • Width – auto.
  • State – active.
  • Icon placement – text and icon from the left side.
  • Icon – plus. 
Where to change appearance of a task management system without coding and designing

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:

Task system with Register, Login and My Tasks pages created in a low code development platform

To develop an easy-to-use UI, add a new space under the card. Select the Tasks widget from the UI Bakery apps builder 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:

  • Go to the upper space in this card and click on it.
  • Add one more space above it.
  • Add 4 more spaces from the right side of the new space.
  • Drag and drop the spaces to resize them, so that the left space was bigger than the other spaces in the row. 
My Tasks in a task management system built without coding

Add a Text component in every space with the following properties:

  • Type – paragraph.
  • Color – basic.
  • Style – bold. 
Color, type, and text settings allowing to customize a task management system without coding

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:

  1. Task description.
  2. Priority.
  3. Category.
  4. Date.
  5. Actions.

As a result, the headings will look like this.

A task management system allowing you to track tasks and see task description

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: 

Building the best task management tool without coding and designing

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). 

Set priority in your task management system built in a low code development platform

Add a Text component with the following properties to the space placed under Category:

  • Type – paragraph.
  • Color – basic.
  • Name – “Friends”, “Home”, or any other name you choose. 
Configuring elements in a task management system within a low code development platform

Add a 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.

A task management dashboard created in a low code development platform

Now, work with the space in the row that is located under "Actions".

Add 2 Button links with the following properties: 

  • Status – primary.
  • Size – medium.
  • Appearance – ghost.
  • Width – auto.
  • State – active.
  • Icon placement – icon only.
  • The first icon – edit-2, the second one – trash-2.
Settings in a low code development platform that allows for building a task management system in a day

Now, you can edit all the spaces below just in the same way you've created the first Task. See the results:

My Tasks with task description created and configured within a low code development platform

We've finished working with "My Tasks" page in the UI Bakery low-code apps builder. Let's move further and discover how to add one more important page to our project - a "Create a Task" page.

January 28, 2020
Tatiana Yudina
Product manager at UI Bakery since it was founded. Eagers to explore new product frameworks to boost productivity and applies the best one. Having been working since 2012, Tanya has solid Business Analyst and UI/UX expertise in both B2B and B2C fields. She enjoys sharing product management and no-code development experience. Feel free to contact her as a guest blog writer or as a speaker on tech events.

Last articles

Don't want to miss anything?

Get updates on the newest stories, case studies and tips right in your mailbox.