How to

Building a Task Management System: Create Layouts. Part 3

Tatiana Yudina

5 min

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 the UI Bakery low-code apps builder, 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. 

How to build a task management system with a low code development platform

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.

How to create layouts to build a task management system in a low code development platform

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

How to configure layouts to build a task system using UI bakery low code development platform

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.

Learn how to build a task management system without coding

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.

How to get a task management system without coding skills

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.

How a low code development platform UI Bakery allows for building a task management system

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. 
A low code development platform opportunities allowing to customize your task management system

See the results:

How to use a low code development platform to build a task management system faster

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

  • Text – “Category”.
  • Type – paragraph.
  • Color – basic.
  • Style – bold. 
How to create a task management system with a low code development platform and download Angular code

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.
How to build a task system for your team with a low code development platform allowing to download Angular code

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. 
Low code development platform functionality allowing for creating a task management system faster

See the results:

A complete task management system built and configured without coding

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.
A task management system easily customizable in a low code development platform

The left part of the screen is ready:

Configuring spaces and other layout components to create a task management system

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. 
Layou configuration for a task management system built without coding

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

  • Size – medium.
  • Mode – day. 
Adjusting a task management system created in a low code development platform UI Bakery

We've almost built our "Create a Task" page in the UI Bakery low-code app development platform. Check the results:

How to build the best team task management app without coding

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.
Building an app for personal task management in UI Bakery low code development platform

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:

Get for free a ready task management system

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. 
Download a ready made task management system created in a low code development platform UI Bakery

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 the UI Bakery low-code apps builder. 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 app development software! 

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.