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. 
 
GanttChart Using Microsoft PowerApps
 

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.
 
GanttChart Using 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
 
GanttChart Using Microsoft PowerApps
 
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
 
GanttChart Using Microsoft PowerApps
 
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.
 
GanttChart Using Microsoft PowerApps
 
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]
 
GanttChart Using Microsoft PowerApps
 
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.
 
GanttChart Using Microsoft PowerApps
 
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
 
GanttChart Using Microsoft PowerApps
 
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.
 
GanttChart Using Microsoft PowerApps
 
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!