Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Community App Samples
    • Re: Gantt-like Display Using Standard Power Apps C...

    Re: Gantt-like Display Using Standard Power Apps Controls

    08-24-2021 14:01 PM

    R3dKap
    Community Champion
    23425 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    RonLar
    RonLar Advocate IV
    Advocate IV
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Gantt-like Display Using Standard Power Apps Controls

    ‎08-23-2021 04:45 PM

    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

     

     

    watch?v=l60u2IpveTA

    Gantt Demo Data.zip
    Gantt Demo - Ron Larsen v1.1.msapp
    Labels:
    • Labels:
    • Formulas and Controls
    • Web Desktop Hub App Design and User Experience
    • gantt
    Message 1 of 52
    27,587 Views
    34 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • …
      • 6
    • Next »
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎08-24-2021 02:01 PM

    Amazing stuff here @RonLar! Very good job!

    Message 2 of 52
    23,425 Views
    1 Kudo
    Reply
    VP2021
    VP2021 Advocate II
    Advocate II
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎09-22-2021 03:30 AM

    @RonLarthis is awesome, thanks for sharing.  I found a few bugs, 

    1. Days in range =7, it shows only 5.5 days on my screen, and 14 =>11
    2. Days in range =70, it shows only 8 days and Days in range and the days of the week starts to repeat itself e.g. Sun Sun Sun Sun Sun Sun Sun Sun
    3. Duration shows inconsistancy e.g. Days in range <=70 shows only a single day,  > 70 shows 4 days correctly, 
    Message 3 of 52
    23,021 Views
    1 Kudo
    Reply
    StaceykWebber
    StaceykWebber
    New Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎12-14-2021 06:08 PM

    @RonLar This looks fantastic and some of the features are exactly what I've been looking for. I am having trouble uploading the msapp file. Do you have a zip of version this? Thanks in advance.

    Message 4 of 52
    22,033 Views
    1 Kudo
    Reply
    igreenspan
    igreenspan
    Regular Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎01-24-2022 05:34 AM

    Hi Ron, 

    Your app looks very interesting, however the msapp file is not downloading. Can you recheck the file. 

    Thank you so much!

    Ian

    Message 5 of 52
    21,035 Views
    1 Kudo
    Reply
    dkayt
    dkayt Advocate III
    Advocate III
    In response to StaceykWebber
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-29-2022 01:30 AM

    @StaceykWebber 
    @igreenspan 
    I'm also facing the same problem. Could you open the file now?

    Message 6 of 52
    17,222 Views
    0 Kudos
    Reply
    RonLar
    RonLar Advocate IV
    Advocate IV
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-29-2022 09:16 AM

    For those that have had some trouble with the file, I am uploading new msapp as well as exported solution zip.  Hopefully this will resolve the issue.

    Gantt Demo - Ron Larsen v1_2.msapp
    GanttDemo-RonLarsenv1.2_20220429161324.zip
    Message 7 of 52
    17,186 Views
    8 Kudos
    Reply
    RodCha
    RodCha Resolver II
    Resolver II
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎05-13-2022 12:43 PM

    Hey, I was working with your project...

    Is really nice the way you arrange the data in the gallery, just in case that this help anybody I arrage the way days are changed and also the zoom of the calendar.

     

    Thanks for your app. I will help me a lot with a similar project.

    RodCha_0-1652470693081.png

    BTW, whenever you click the 'Zoom In' icon it will display the 'slider' to increase or decrease your 'pixels/days', then you can click anywhere an it will hide that option or click back in the icon.

    97 KB
    Gantt Demo.msapp
    Message 8 of 52
    16,540 Views
    4 Kudos
    Reply
    Mrkelley
    Mrkelley
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎05-24-2022 03:11 PM

    This is an awesome app.  I am still learning PowerApps and was wondering if this could be modified to act as an office vacation tracker?  

    I already changed the project to company location, task to section, sub task to work center, task name to the person’s name, task type to event type (Vacation, Sick, WFH, etc).  

    But can’t figure out how to (or if even possible) to enable multiple events per person?  I guess it would be somewhat equivalent to a irregularly repeating task.  If so, would appreciate any help you could provide or where I can find how to do that.  

    Message 9 of 52
    16,067 Views
    0 Kudos
    Reply
    jed76
    jed76 Post Prodigy
    Post Prodigy
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎07-01-2022 05:38 AM

    This is really great - thank you!

     

    However, I am running into issues when trying to populate the chart from a realtime SP list rather than an imported Excel file. I have got it working however I am unable to get the Show/Hide lines to work correctly. I have revised your code for the show/hide to include a PATCH command to update the SHOW / EXPAND columns to true / false, however I am not sure that it is working correctly and I wonder whether the update to server is not quick enough to respond? Many thanks. 

    Message 10 of 52
    14,396 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
      • …
      • 6
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    California Consumer Privacy Act (CCPA) Opt-Out Icon Your California Privacy Choices