+30 2310365188

Create a custom project management tool with WABLI in one hour

Building the application

Login to WABLI

Login to WABLI with your GitHub account by visiting the following url:

login page

Create the project

Create a new project from the landing page by clicking on the "Create new project" button, and selecting "Blank project".

create blank project

Then, complete the details of your project (Project name, Description) and click 'Finish'.

create blank project details

Create the Home page

In orded to start modifying your project, you firstly need to create a new page. You can create a new page by clicking on the "+" button.

create new page

Name your page and click "Create" button.

create new page name

Design your project

You can now start designing your project using the block elements on the left side of your screen.

Insert/Edit a "Navbar" block

Drag and drop a Navigation bar inside your first page.

enter navbar

entered navbar

Edit the navbar by clicking on it and selecting the "Styles" button. We created ours by adding 'margin' = 30px, a background color and 'border-radius' = 15px.

After you finished styling your block, don't forget to click "Save" button.

edited navbar

The navigation bar is almost ready. You can now delete the buttons you don't need by selecting them and clicking delete.

delete from navbar

This is the final result of our navigation bar.

deleted from navbar

Add the main content of the Home page

Drag and drop a TextSection underneath the Navigation bar.

add text section

Edit the text section by clicking on it and selecting the "Styles" button. We created ours by adding 'margin' = 30px.

edited text section

Drag and drop a Box underneath the Text Section, in order to position every block inside of it in a certain way.

enter box

Drag and drop a Heading 2 inside the Box, and change its context.

enter heading

Drag and drop a Table underneath the Heading that's going to store our data.

enter table

entered table

Edit the table style to make it look the way you want. We added a 'max-width' = 1000px and 'padding' = 10px

edited table

Select the cells you don't need and delete them by clicking on the "Delete" button. If you want to select many cells at once, hold the "Ctrl" button and click on the cells.

You can do the same for the buttons you don't need.

delete table

delete table buttons

Change the context of the cells you want to keep and their styling. We added a background-color similar to the one in the navbar.

done table

Finally, drag and drop a Text between the Heading and the table to add more details about it and your table section is ready.

enter text

As your table section about the 'todo' tasks is ready, you can proceed to duplicating it twice and changing its context, in order to save time.

duplicate table

duplicate tables

done tables

As always, you need to remember saving your project.

save page

Create more pages

Click on 'New page' button to create a new page. On the prompt that appears, enter the name of the page and click 'Create'.

new page

new page name

On the new page, drag and drop a Form Template.

add form

As you did before, you can select the cells you don't need and delete them by clicking on the "Delete" button.

delete form

Change the context and the styling of the header to make it look better. We added a background-color, 'border-radius' = 15px and 'margin' = 30px.

edit heading

edited heading

Click on 'New page' button to create a new page. On the prompt that appears, enter the name of the page and click 'Create'.

add new page

add new page name

On the new page you can do the same exact procedure, in order to create a similar page.

deleted task page

Drag and drop a 'Select' block next to a label. We will use this to select which employee is responsible for each task.

add select

added select

Click on 'Duplicate page' button to duplicate the page. On the prompt that appears, enter the name of the page and click 'Create'. This way, you can create as many pages as you want, without having to create them from scratch.

duplicate page

duplicate page name

On the generated page, you can simply change the texts and the Update Page will be ready.

done update page

Page flow

You can add links between your pages. To do so, please select an item that you want to link and click on the Edit icon.

routing to add employee

Select the "addEmployee" page from the "Go to project page" section.

routing to add employee added

Do the same for the "addTask" and the "updateTask" pages. When going to an update page, don't forget to add the id of the task.

routing to add task

routing to update task

routing to update task added

You have now created the links between your pages and you can view the page flow by selecting the "View page data flow" from the top right menu.

page links

You can now see the flow of your pages. Browse through the pages to see the results.

home page links

Data model

You can now create the data model for your project.

CRUD annotation methods

All the dynamic components of your pages need to be annotated. Firstly, go to page "addEmployee" and select the component you want to annotate.

annotate add employee

See an example below of how you can annotate the name of an Employee.

annotated add employee

And for the create button.

annotate create employee

You can also add CRUD (create, delete, update, read) functions to a component e.g. add to the button the ability to "create" a new employee and then navigate to page "Home".

annotated create employee

Now that you have annotated the 'Employee' entity. You can annotate the 'Task' entity. Start by annotating the name.

annotate task name

annotated task name

Annotate the status of the task.

annotate task status

annotated task status

Now, because we want to be able to assign a task to an employee, we need to annotate the employee name. Employee, is another entity, so we need to select it as such in the annotation menu and also select the 'attach to entity' option.

annotate task employee

annotated task employee 1

annotated task employee 2

Get all annotation method

In addition, in order to be able to select an employee from a list, we need a way to find all the employees. In WABLI we offer the possibility to use a function that can read all the values of an entity. This is the Get All method.

First, pick the box outside of the 'select' by clicking the arrow icon. Then annotate it as such.

annotate task employee get 1

annotate task employee get 2

annotated task employee get finished

Going on, you need to annotate the 'create' button, as you did before. And follow the same procedure on the 'updateTask' page. There you should select the 'update' method.

annotate create task

annotate update task

Finally, on the UpdateTask page, you need to use the get annotation method to get the task you want to update. To do so, select the box that include the form and annotate it.

annotate get task

annotated get task

Get by params annotation method

WABLI also offers the possibility to get all the results of an entity, based on an equality condition. This is the Get by params method. To use it, you need to annotate the box that includes the tables and select the condition.

annotated table

annotated table in progress

annotated table done

Show results

After you have annotated all the forms needed and also annotated a table with a get by params method, you can now show the results to the table. To do so, you need to annotate the table cells and select the attributes you want to show.

Begin by selecting the first cell and annotating it as the name of the task.

annotate table task

annotated table task

Then, select the second cell and annotate it as the status of the task.

annotate table status

annotated table status

Continue by selecting the third cell and annotate it as the name of the employee. Be careful, this cell needs to be annotated to the employee entity.

annotate table employee

annotated table employee

Now, select the outer box of this cell, to annotate it as the employee of the task. You are now finished and every row is updated with the annotations you made.

annotate table task employee

annotated table task employee