Skip to main content
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Gallery / Power Automate - Webinars and Video Gallery / 🚀 Build an Approval Timeli...

🚀 Build an Approval Timeline using SharePoint list formatting & Power Automate Approvals

1876 Views
RezaDorrani Profile Picture Posted by RezaDorrani 12,141

In this video we will walk through an end-to-end solution tracking Power Automate Approvals with SharePoint Lists using an approval workflow & SharePoint column formatting.

Using column formatting, we will showcase an Approval timeline which will include a progress / status indicator for showcasing the current state of the approval process related to the SharePoint list item + Approval history which includes all details of the approval action (approver name, approval date, time taken to respond, comments), highlight the current approvers & calculate the time the approval action is in pending state.

This can be handy in identifying where the approval process is taking more time. We will also define dynamic approvers based on metadata & log the approval history to SharePoint list item (best practice since flow approval history is only available for 28 days). Scenario in video is a help desk application in SharePoint where users log information which triggers the approval process.

 

Topics covered:

✔️ SharePoint Column Formatting

✔️ Approval Workflow using Power Automate

✔️ Dynamic approvers

✔️ Approval history logging

✔️ Approval Timeline


Thanks,
Reza Dorrani, MVP
YouTube
Twitter

Categories:

Comments

  • Loudibread Profile Picture Loudibread
    Posted at
    ?? Build an Approval Timeline using SharePoint list formatting & Power Automate Approvals

    Hi,


    The timeline doesn't work for me. Everything is recognised to "left" regardless of status. Appreciate if I can pick up your brain. Thank you.

    Screenshot 2024-02-15 131317.png

    {
    "elmType": "div",
    "style": {
    "position": "relative",
    "width": "100%",
    "height": "70px"
    },
    "children": [
    {
    "elmType": "div",
    "style": {
    "position": "absolute",
    "display": "flex",
    "align-items": "center",
    "justify-content": "center",
    "width": "100%",
    "height": "100%"
    },
    "children": [
    {
    "elmType": "div",
    "style": {
    "width": "100%",
    "height": "5px"
    },
    "attributes": {
    "class": "ms-bgColor-neutralSecondaryAlt"
    }
    }
    ]
    },
    {
    "elmType": "div",
    "style": {
    "position": "absolute",
    "display": "flex",
    "align-items": "center",
    "justify-content": "=if([$TicketStatus]=='Approval In Progress','center',if([$TicketStatus]=='Approve','right','left'))",
    "width": "100%",
    "height": "100%"
    },
    "children": [
    {
    "elmType": "div",
    "style": {
    "width": "25px",
    "height": "25px",
    "border-radius": "50%",
    "cursor": "pointer"
    },
    "attributes": {
    "class": "=if([$TicketStatus]=='Rejected','ms-bgColor-red',if([$TicketStatus]=='Approval In Progress','ms-bgColor-yellow',if([$TicketStatus]=='Approve','ms-bgColor-green','ms-bgColor-blue')))"
    },
    "customCardProps": {
    "directionalHint": "rightCenter",
    "openOnEvent": "click",
    "isBeakVisible": true,
    "formatter": {
    "elmType": "div",
    "style": {
    "width": "300px",
    "height": "300px",
    "padding": "10px 20px 10px 20px",
    "background-color": "#E6E6E3"
    },
    "children": [
    {
    "elmType": "div",
    "txtContent": "=if([$TicketStatus]!='Approval In Progress',[$ApprovalComments],'No History Available'",
    "style": {
    "width": "100%",
    "height": "100%"
    }
    }
    ]
    }
    }
    }
    ]
    }
    ]
    }

     

     

     

  • ChButler Profile Picture ChButler 29
    Posted at
    ?? Build an Approval Timeline using SharePoint list formatting & Power Automate Approvals

    Reza,

     

    All your videos are some informative and have helped me build a Procurement Tracking List. Now I do have a couple of issues and wondering if you can take a look:

     

    1. Approval Pending Since: with the json provided for this column (date and time; included time), but the showing time is still 28 million mins. Any ideas

    ChButler_0-1704735458375.png

     

    2. Approval Timeline: I submit a new request and it sends me an email and teams notification. However, when I "Approve" the request it comes back to sharepoint as "Rejected"

    ChButler_3-1704735681234.png

     

    ChButler_2-1704735651052.png

    Here is the json that I changed to satisfy my columns:

    {
    "elmType": "div",
    "style": {
    "position": "relative",
    "width": "100%",
    "height": "70px"
    },
    "children": [
    {
    "elmType": "div",
    "style": {
    "position": "absolute",
    "display": "flex",
    "align-items": "center",
    "justify-content": "center",
    "width": "100%",
    "height": "100%"
    },
    "children": [
    {
    "elmType": "div",
    "style": {
    "width": "100%",
    "height": "5px"
    },
    "attributes": {
    "class": "ms-bgColor-neutralSecondaryAlt"
    }
    }
    ]
    },
    {
    "elmType": "div",
    "style": {
    "position": "absolute",
    "display": "flex",
    "align-items": "center",
    "justify-content": "=if([$Approval]=='Pending','center',if([$Approval]=='New','left','flex-end'))",
    "width": "100%",
    "height": "100%"
    },
    "children": [
    {
    "elmType": "div",
    "style": {
    "width": "25px",
    "height": "25px",
    "border-radius": "50%",
    "cursor": "pointer"
    },
    "attributes": {
    "class": "=if([$Approval]=='Rejected','ms-bgColor-red',if([$Approval]=='Pending','ms-bgColor-yellow',if([$Approval]=='Completed','ms-bgColor-green','ms-bgColor-blue')))"
    },
    "customCardProps": {
    "directionalHint": "rightCenter",
    "openOnEvent": "click",
    "isBeakVisible": true,
    "formatter": {
    "elmType": "div",
    "style": {
    "width": "300px",
    "height": "300px",
    "padding": "10px 20px 10px 20px",
    "background-color": "#E6E6E3"
    },
    "children": [
    {
    "elmType": "div",
    "txtContent": "=if([$Approval]!='New',[$ApprovalComments],'No History Available'",
    "style": {
    "width": "100%",
    "height": "100%"
    }
    }
    ]
    }
    }
    }
    ]
    }
    ]
    }
     
    3. Approval Timeline box: I have the same issue with it not showing the flow for the of the approval
    ChButler_4-1704735978387.png

     

    Workflow:

    ChButler_5-1704736090714.pngChButler_6-1704736137402.pngChButler_7-1704736165543.pngChButler_8-1704736194295.pngChButler_9-1704736232861.pngChButler_10-1704736258005.png

     

    And last issue: When I submit new, I have the description of my request. When it sends the request and moves to pending it deletes my description.

    ChButler_11-1704736374686.pngChButler_12-1704736470992.png

     

     

     

     

     

     

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    ?? Build an Approval Timeline using SharePoint list formatting & Power Automate Approvals

    Hello, I have the same issue! Did you find a solution ? 🙂

  • Community Power Platform Member Profile Picture Community Power Pla...
    Posted at
    ?? Build an Approval Timeline using SharePoint list formatting & Power Automate Approvals

    @RezaDorrani,

     

    I really enjoy your videos, they are a big help.  I am having an issue with the custom card on my approval timeline.  I am not showing any text after the process begins.  I can see the No History Available when the item status is new but the box remains empty after this status is changed.  Any help on this would be much appreciated. 

     

    woodwaptwt_0-1666021086237.png

    woodwaptwt_1-1666021155877.pngwoodwaptwt_2-1666021253070.png