Skip to main content

Notifications

Gantt-like Display Using Standard Power Apps Controls

RonLar Profile Picture Posted 24 Aug 2021 by RonLar 60

I was working on an internal project a couple of years ago and one of the desired features was to display the date in a Gantt-type chart.  I had already been doing quite a bit with Power Apps at the time so I thought maybe I could do this somehow with a canvas app.   After trying several things, including embedding Power BI, it seemed like a futile effort.

 

Then one day after playing around with making some bar graphs with some dynamically sized label controls, I had an idea.  It seemed that it would be possible to use some similar techniques to create a data-driven Gantt-like display. The idea has evolved a bit since the original. 

RonLar_0-1629758957898.png

Okay, enough of the boring story and onto the App!

 

App Features

Expand or Collapse to Parent Level

Expand 5.GIF

Click on the chevron to expand or collapse main tasks including the top-level project.

 

Automatic Grid Scaling

The app will automatically scale the date grid density based on the window size and date range.

Daily View

RonLar_2-1629759070154.png

 

Weekly View

RonLar_3-1629759070156.png

 

4-Week View

RonLar_4-1629759070157.png

 

Navigate and Zoom

Select start and end dates to display tasks in that range on Gannt.  Use Navigate buttons to move forward or backward in time.  Use Zoom buttons to increase/decrease end date to effectively “Zoom” the time window in or out.

RonLar_6-1629759326218.png

 

Automatically Adjust Gantt Density Based on Browser Window Size

App will dynamically change timeline grid lines based to display more data on larger/hi-res screens.

Smaller window scales to weekly grid to display data

RonLar_7-1629759366747.png

 

Maximize window and see that it changes the scale from weekly to daily grid

RonLar_8-1629759366773.png

 

If a task label is too long to put inside the Gantt bar based on the scaling,  it is automatically placed outside the end of the bar.

 

Project Selection

At the bottom of the screen, there is a project list gallery where you can select the projects to include in the display.

RonLar_9-1629759425621.png

 

How It All Works

The Data

For this demo app, I created some data that is loosely based on construction and remodeling projects.  It is simplified for the purpose of demoing the UI.  I imported the data into the app so that it would be easy to distribute the demo.  Note that I wanted to make the data flat and simple for the purpose of showing the UI.  In a real app, this data would be distilled from multiple tables or views.  I load this table into a collection (colTasks) at startup to make things easier.

RonLar_10-1629759454646.png

About the Tasks data:

Column Name

Description

Id

Unique Id for the row

ProjectId

Project number

ProjectName

Project name

TaskNo

Top-level task number (0=parent project)

SubTaskNo

Sub task number

TaskName

Task name

StartDate

Start date for this task

EndDate

End date for this task

TaskType

Task type for this task

TaskLvl

Task indent level for this task

Duration

Duration in days for this task (parents contain sum of subtasks) if the duration is 0, then the task is considered a milestone and displayed with a pentagon icon (there is no diamond icon and I was a little too lazy to do something else).

Show

Show this row in the Gantt

Expanded

Are the sub tasks showing or not?

 

Task Types

The Task Types are in a separate table.  Each type has a color specified by a hex RGB color code which is used to color code the Gantt bars.

RonLar_11-1629759454648.png

 

The Gantt Bars

RonLar_12-1629759532490.png

 

The core of this app is how the Gantt bars are displayed.  It comes down to two basic things: Length and Position.

 

To find the position, we first need to see how many horizontal pixels there are in a day on the grid.

We can get that by using the following calculation:

                pixels per day = (end pixel - start pixel) / (end date - start date)

Then calculate the position X:

                X = start pixel + (end date - start date) * pixels per day

For the bar length (width):

                width = duration days * pixels per day

 

I used label controls to track the data to support the above calculations.  Label controls are great for this since they automatically calculate the values as the data changes.  Although these would normally be hidden, I am displaying them in this app for educational purposes.

RonLar_13-1629759532492.png

 

The actual formulas in the app are as follows:

Pixels per day (label):

 

 

 

Value(lblPixInRange.Text)/Value(lblDaysInRange.Text)

 

 

 

 

Gantt bar position X:

 

 

 

Value(lblStartPix.Text) + DateDiff(dteStartDate.SelectedDate,ThisItem.StartDate,Days) * Value(lblPixPerDay.Text)

 

 

 

 

Gantt bar Width:

 

 

 

ThisItem.Duration * Value(lblPixPerDay.Text)

 

 

 

 

 

Date Overlay Grid (Underlay?)

RonLar_14-1629760059518.png

 

The date grid is just a horizontal gallery control that actually sits behind the Gantt gallery.

The Items/Data source for the gallery is sequence starting at 0.  I figured that 150 should be a safe maximum for most applications.

RonLar_15-1629760059520.png

 

I have a hidden label (lblUGGridSectionStartDate) that I used to simplify calculating the timeline headers.

RonLar_16-1629760059520.png

 

RonLar_17-1629760059521.png

 

lblUGGridSectionStartDate.Text will dynamically change its value based on the density of the grid and start date.

 

 

 

 

Switch(
 lblGridDensity.Text,
 "4WEEKS",
 dteStartDate.SelectedDate + ThisItem.Value * 28,
 "WEEKLY",
 dteStartDate.SelectedDate + ThisItem.Value * 7,
 dteStartDate.SelectedDate + ThisItem.Value
)

 

 

 

 

Expand/Collapse Subtask Display

RonLar_18-1629760153365.png

 

The key to determining what data to show in the Gantt view is literally the Boolean ‘Show’ column in the collection (as well as the selected project, of course).

 

The Items/Data source for the main gallery (galGanttView):

 

 

 

Filter(
 colTasks,
 ProjectId in Filter(
 galProjectList.AllItems,
 chkPLIsSelected.Value = true
 ).Result,
 Show
)

 

 

 

 

When clicking on the chevron (icoGVShowHideSubs),  the app will toggle the expanded state of the control and data column: ‘Expanded’ as well as updating the subtasks ‘Show’ column.

 

 

 

Select(Parent);
If(
 ThisItem.Expanded,
 UpdateIf(
 colTasks,
 // hide subtasks of current task
 And(
 ProjectId = ThisItem.ProjectId,
 TaskNo = ThisItem.TaskNo,
 SubTaskNo > 0
 ),
 {Show: false},
 // change expanded field for this task
 And(
 ProjectId = ThisItem.ProjectId,
 TaskNo = ThisItem.TaskNo,
 SubTaskNo = 0
 ),
 {Expanded: false},
 // hide all tasks for this project task (0)
 If(
 ThisItem.TaskNo = 0,
 And(
 ProjectId = ThisItem.ProjectId,
 TaskNo > 0,
 Show
 )
 ),
 {
 Show: false,
 Expanded: false
 }
 ),
 UpdateIf(
 colTasks,
 // show subtasks of current task
 And(
 ProjectId = ThisItem.ProjectId,
 TaskNo = ThisItem.TaskNo,
 SubTaskNo > 0
 ),
 {Show: true},
 // change expanded field for this task
 And(
 ProjectId = ThisItem.ProjectId,
 TaskNo = ThisItem.TaskNo,
 SubTaskNo = 0
 ),
 {Expanded: true},
 // show all tasks for this project task (0)
 If(
 ThisItem.TaskNo = 0,
 And(
 ProjectId = ThisItem.ProjectId,
 TaskNo > 0
 )
 ),
 {
 Show: true,
 Expanded: true
 }
 )
);

 

 

 

 

The appearance of the chevron icon itself is controlled by the ‘Expanded’ column. 

 

 

 

If(
 ThisItem.Expanded,
 Icon.ChevronDown,
 Icon.ChevronRight
)

 

 

 

 

 

Summary

You will find that there are other features there that I have not called out.  But the general idea was to show what could be done with standard controls.  I didn’t want to over complicate things by adding too much for this demo.

 

This is my first post to the Community Samples.  Hopefully others will find this useful for their projects.

 

Cheers!

 

-Ron Larsen

 

 

Categories:

Comments

  • JC-15111651-0 Profile Picture JC-15111651-0
    Posted 15 Nov 2024 at 17:06:24
    Gantt-like Display Using Standard Power Apps Controls
    Is this project no longer available as a sample?
     
  • VR-11111019-0 Profile Picture VR-11111019-0
    Posted 11 Nov 2024 at 10:20:06
    Gantt-like Display Using Standard Power Apps Controls
    ?Can you share the app
  • kdavies1966 Profile Picture kdavies1966
    Posted 19 Jun 2024 at 15:24:30
    Gantt-like Display Using Standard Power Apps Controls

    Hi Ron, excellent work and I'm happy to say that I have created solutions based on this code for multiple Gantt issues. 
    One of the first was for a holiday tracker, which I think is quite a common requirement.

    I was able to create a working solution to this issue but with unwanted limitations (i.e. number of events per line).

    What I did was create a collection of all the holiday requests, then use a groupby with addcolumns to display it in a gallery.

    kdavies1966_0-1718810589156.png

     

    I used the same logic as @RonLars to build the bars in the chart and just change the colour based on the type/status of the request record.

    Here's what the finished chart looks like

    kdavies1966_1-1718810589152.png

     

     

    Adding more entries per line (such as creating a year planner view) is a bit of a pain and it's not the easiest code to read/debug but it does work for my purposes at the moment.

    As I say, excellent work from you in the first instance. Have you been able to implement any improvements since you originally posted this?

  • rubyreed Profile Picture rubyreed
    Posted 17 Jun 2024 at 17:13:17
    Gantt-like Display Using Standard Power Apps Controls

    Hi Ron! This is just what I was looking for. I am trying to download your file, and upload it to check out your code but I keep getting an error. Do you know if it's still working or maybe it's too outdated?

  • jed76 Profile Picture jed76 1,317
    Posted 15 May 2024 at 20:41:13
    Gantt-like Display Using Standard Power Apps Controls

    I highlighted the day by adding a rectangle to the day column and set the visible property to true if the date = Today(). also, I set the transparency property to 0.5.

  • kapplegate Profile Picture kapplegate
    Posted 15 May 2024 at 17:23:49
    Gantt-like Display Using Standard Power Apps Controls

    @ronietapeno I was able to change the date ranges to start from todays date and then end 30 days from now. Start by updaing the global OnVisible variables:
    // Set up some global vars to manage the values
    Set(gblGanttRangeStart, DateValue(Today()));
    Set(gblGanttRangeEnd, DateValue(Today()+30));

    Then in the actual inputs under the InputTextPlaceholder:

    Text(Today(), dteStartDate.Format, dteStartDate.Language)

    Text(Today()+30, dteEndDate.Format, dteEndDate.Language)

     

    Hope that helps

  • ronietapeno Profile Picture ronietapeno
    Posted 15 May 2024 at 00:46:58
    Gantt-like Display Using Standard Power Apps Controls

    Thanks for this. Is there anyway we can adjust the global variable gblGanttrangeStart and gblGanttrangeStart so that it adjust based on current date? Also how to put a vertical line to show date today?

  • ronietapeno Profile Picture ronietapeno
    Posted 15 May 2024 at 00:45:55
    Gantt-like Display Using Standard Power Apps Controls

    Thanks for this. Is there anyway we can adjust the global variable gblGanttrangeStart and gblGanttrangeStart so that it adjust based on current date? Also how to put a vertical line to show date today? 

  • Yobeekster Profile Picture Yobeekster 170
    Posted 11 Apr 2024 at 02:20:01
    Gantt-like Display Using Standard Power Apps Controls

    This is very impressive @RonLar  and am very excited to get started on this. This looks like alot of work you put in, so I thank you for posting the description and the demo. Very generous!!!!

  • kapplegate Profile Picture kapplegate
    Posted 04 Apr 2024 at 23:59:49
    Gantt-like Display Using Standard Power Apps Controls

    Hello Ron, I've based a project off your Gantt solution but ran into a couple of issues that I can't seem to solve. I would like to display multiple events for a single row and user would like to sort the galProjectList by a specific column, in my case I have a room list and they want it sorted by floor, which is a column I have available in my sharepoint list that I'm pulling the data from. Otherwise its working perfect! Any help would be greatly appreciated, thanks.