GanttChart Using Microsoft PowerApps

Introduction

Gantt charts are commonly used for tracking project schedules, and they are especially useful in project management. Gantt charts can show the information regarding the different tasks or sections of a project, such as how far have tasks progresses, the status of tasks, and also how important several tasks are, and resources are being used within a project. 

To build a Gantt chart in Power Platform, the PowerBI application is needed. To use PowerBI and share the report, the user needs to have the PowerBi Licence. But in some cases, the user only wants to visualize the progress of the Project in the Gantt Chart. 

In this article, I have a solution for the users who don't want to buy PowerBi Licence and want to use the Gantt chart in PowerApps, we can customize the Gantt chart in Power Apps by using SharePoint List as a data source. In this Gantt Chart view, users can able to visualize the Task Progress of any project and Task Status with RAG indicator. 

Customization of Gantt Chart in PowerApps

Click on the Canvas app from blank to create a new application and get a new screen of Microsoft PowerApps.

Prerequisites

Before we jump into the PowerApps screen, we need to create our database in SharePoint Site.

Create the task list in the SharePoint Site which must contain the following columns:

• Taskname: Name of the Task in the Project
• StartDate: The start date of that particular Task
• Enddate: The End date of that particular task
• Status: Task Status which has choices [1. Completed, 2. Active, 3. Delayed, 4. Not started], which will be distinguished by RAG indicator 

The following are steps to customize the Gantt chart and show the Task status of any project.

Create a Background for the Gantt Chart

Step 1

Create a blank Horizontal Gallery

Step 2

Stretch it to the full width of the screen

Step 3

Position of the gallery set to Align Centre

Step 4

Rename the Gallery to Calendar

Step 5

Add the PowerApps formulae to the following properties of Calendar Gallery

Items: [1,2,3,4,5,6,7,8,9,10,11,12] This divides the Gallery into 12 parts which can be an identification of 12 months of the year.

TemplateFill: If(Mod(ThisItem.Value,2)=0,RGBA(0,0,0,.1)

This is an If statement which says the if the remainder for this value is 0, the Item no of this Gallery has remainder will be 2when modular division by 2 then we will set fill color to Black with .1% of opacity.

TemplateSize:108pixels

Step 6

Then add labels outside of the Gallery which can be set as column heading of each Gallery and set the width of the Labels to same as Template size i.e 108. Add similar 12 Labels and add the Month names of 12 months all the Labels of the Text property.

Step 7

Select all the labels from the left pane and set their properties:

• Height: 36
• Size: 108*36
• Align: Centre
• Font Size: 13

The below image shows the arrangement of the labels on the top of the gallery.

Select all the Labels and make them a Group by clicking “Ctrl+G” command and rename them to MonthName

Development of Gantt chart View

Step 8

Add a Blank Vertical Gallery and rename it as 'Gantt Tasks_1'. Add the Data source to a SharePoint List ‘Task List’.

Step 9

In the SharePoint List, we can create the data or we can make an application for Projects data in PowerApps to save the data in SharePoint List. From the data in SharePoint List, we can show the Gantt chart in PowerApps.

Step 10

Edit the 'Gantt Tasks_1' Gallery and add 4 Labels and rename it as:

StartDate. Text: ThisItem.StartDate

EndDate.Text: ThisItem.EndDate

StartDays: DateDiff(Date(2020,1,1), DateValue(StartDate_1.Text))+1

EndDays: DateDiff(Date(2020,1,1), DateValue(Enddate_1.Text))+1

Note

[The formula of Start Days and End Days gives the value of Days past from the Start of the Year i.e. 1.1.2020]

Step 11

Add another Label and rename as Indicator, as we are creating Gantt chart so most things, we just want to see in colours, not in text and details, so the upper labels we are going to hide it from the screen

Step 12

Label Name: Indicator, Which is the colour field that gives a clear picture of the start date & end date of the task and its status.

This label’s X property indicates the X-Axis or the Horizontal axis on the inner Gallery

Text: Blank

X: Value(StartDays_1.Text) * 'Gantt Tasks_1'.Width/365

This is the formula to calculate the start the position of the indicator label.

Width: (Value(EndDays_1.Text)-Value(StartDays_1.Text)) * 'Gantt Tasks_1'.Width/365

Fill: If(ThisItem.Status.Value="Not Started", White, If(ThisItem.Status.Value="Active", Orange, If(ThisItem.Status.Value="Delayed", Red, If(ThisItem.Status.Value="Completed", Green,Gray))))

This formula fills the color of the Label which can make a difference of task status

Step 13

Label Name: Task_Name, This Label indicates the name of the task just beside the indicator.

Text: ThisItem.Taskname

X: Value(EndDays_1.Text) * 'Gantt Tasks_1'.Width/365

Step 14

Now select a Startdate, EndDate, StartDays, and EndDays labels from the left pane and make its Visible Property equal to False.

Step 15

Now we will develop a “TaskInfo” box in which when the user clicks on any of the tasks, the Task details will be displayed.

Step 16

Insert a Rectangle with Size 744*100 and place it on the space top of the 'Gantt Tasks_1'. Gallery and also above the months Labels.

Step 17

Inside a Rectangle, add 4 Labels and rename as follows,

TaskNamedetails-Text: "Task Name:" & 'Gantt Tasks_1'.Selected.Taskname

StatusDetails: "Status:" & 'Gantt Tasks_1'.Selected.Status.Value

StartDateDetails: "StartDate:" & 'Gantt Tasks_1'.Selected.StartDate

EnddateDetails: "EndDate:" & 'Gantt Tasks_1'.Selected.EndDate

Step 18

Again add 4 Labels and set 4 small circles inside the Rectangle

Add the text Properties of the 4 Labels: Completed, Active, Delayed, Not started

Add the fill Properties of Circles: Green, Orange, Red, White

Step 19

Add a rectangle inside the 'Gantt Tasks_1'

Width: Screen Size: 1337pixels

Height: Height of Indicator Label: 30Pixels

Visible: !IsBlank('Gantt Tasks_1'.Selected) && 'Gantt Tasks_1'.Selected.ID = ThisItem.ID

It will be visible when the User will select any task in the screen, and the Task details of the particular Task will be displayed in the Task Info Box, and the Task will be Identified with a selected mark in the Screen.

Now play the screen and we can have look at how Gantt chart works click here.

Conclusion

This is the Gantt chart view we can develop in PowerApps using the Gallery and some PowerApps formulae. This concept is useful to visualize the progress of the Project for any organization. Also, the developers and project manager can also use it to keep track of their own task progress. 

Build the Gantt chart with me and have fun!