How to Build Custom Approval Forms in Power Apps

00:19:01
https://www.youtube.com/watch?v=cyDyBTBW5Z8

Summary

TLDRThis video by Razza guides viewers on creating a custom approval form process in Power Apps. By integrating Power Apps with SharePoint, Razza demonstrates how to orchestrate the approval process within Power Apps using form control. The approval form includes columns like 'approval status', 'approver', 'approval comments', and 'approval history'. The initial approver for any expense is the user’s manager, and changes in approvers can be handled by managers directly within the app. Notifications are automatically sent via email using Office 365 connectors when an approval status is 'pending'. The video also showcases building a Power App that easily connects with a SharePoint list, enabling CRUD operations and allowing for the creation of an intuitive approval form workflow. Razza outlines the steps to set default values, manage form visibility and mode changes, and utilize connectors to streamline approval processes.

Takeaways

  • 📝 Create custom approval workflows in Power Apps.
  • 🔗 Integrate Power Apps with SharePoint for form management.
  • 👥 Use SharePoint columns to track approval status and history.
  • 📧 Send approval notifications via Office 365 Outlook.
  • 👨‍💼 Assign initial approval to a user's manager automatically.
  • 🛠 Utilize Office 365 Users connector to fetch manager details.
  • 📋 Perform CRUD operations seamlessly with Power Apps.
  • 🎨 Design intuitive forms with visibility control based on mode.
  • 💾 Connect to SharePoint automatically through Power Apps gallery.
  • 🔄 Enable approvers to decide on the next in line for approvals.
  • 📥 Parameterize app links to direct to specific approval items.
  • 📍 Use named formulas for efficient data management in apps.

Timeline

  • 00:00:00 - 00:05:00

    The video explains how to build a custom approval form process in Power Apps by integrating with a SharePoint list. It involves configuring the approval status, approver, and approval history columns. The narrator demonstrates creating a Power App to manage CRUD operations on the expense requests, setting up a form control for submitting requests, and initially assigns the current user's manager as the approver using Office 365 user details.

  • 00:05:00 - 00:10:00

    The process continues with configuring form controls to display approval details conditionally. The approver's information is defaulted to the current user's manager, and the display mode is adjusted to prevent the user from changing this information. The video discusses setting properties to ensure approval commands are only visible to the approver. Additionally, the approval history is logged with each action, and the visibility of this section is controlled based on the form's mode.

  • 00:10:00 - 00:19:01

    The final section describes sending email notifications to the approver upon form submission, detailing how to construct the email using attributes like recipient, subject, body (with links), and importance. The narrator shows how to retrieve the app and request details using parameters and integrate them into the approval process. This allows the approver to access the approval context directly from the email. The video closes with encouragement to like, comment, and subscribe.

Mind Map

Video Q&A

  • What does the approval status in the SharePoint list indicate?

    The approval status indicates whether an expense request is pending, approved, or rejected.

  • How is the current approver's information stored?

    The current approver's information is stored in a person type column called 'approver'.

  • How can managers change the approver?

    Managers can select the next approver in sequence to transfer the approval.

  • What purpose does the approval history column serve?

    The approval history column stores the entire history of the approval process.

  • What happens when a new expense request is created?

    The approval status is set to pending, and the current user's manager is assigned as the approver.

  • How is the manager's information retrieved?

    The manager's information is retrieved using Office 365 users connector.

  • How are email notifications sent to approvers?

    Email notifications are sent using Office 365 Outlook connector when the approval status is 'pending'.

  • How is the Power App connected to the SharePoint list?

    The Power App is connected to the SharePoint list using the gallery design feature in Power Apps.

  • How can the app provide a link to the approver?

    An email with a link to the app and details of the specific expense request is shared with the approver.

  • What must approvers do once they receive an email notification?

    Approvers should follow the link in the email to the Power App to review and act on the expense request.

View more video summaries

Get instant access to free YouTube video summaries powered by AI!
Subtitles
en
Auto Scroll:
  • 00:00:00
    hello everyone razza here in this video
  • 00:00:03
    I will show you how to build a custom
  • 00:00:06
    approval form process in power apps we
  • 00:00:10
    will orchestrate the entire approval
  • 00:00:12
    process from within power apps by using
  • 00:00:15
    the form control sending notifications
  • 00:00:18
    to approvers and design an approval
  • 00:00:22
    process where an approver can pick the
  • 00:00:24
    next approver in sequence so let's go
  • 00:00:28
    ahead and check it out in action
  • 00:00:32
    [Music]
  • 00:00:37
    I have a SharePoint list called expense
  • 00:00:40
    request
  • 00:00:41
    list since I'm trying to design an
  • 00:00:44
    approval process I would like to
  • 00:00:47
    maintain the information about the
  • 00:00:50
    approval and for that I have added
  • 00:00:53
    additional columns to my
  • 00:00:57
    list the First Column that I have added
  • 00:01:00
    is called approval
  • 00:01:02
    status it's a choice column that has
  • 00:01:05
    three values pending approved and
  • 00:01:09
    rejected the default value I have set as
  • 00:01:13
    pending meaning any new expense that is
  • 00:01:17
    created the approval status will start
  • 00:01:21
    from
  • 00:01:23
    pending I also have a person type column
  • 00:01:26
    called
  • 00:01:28
    approver here I will store the details
  • 00:01:30
    of the current
  • 00:01:33
    approval approval commands is a column
  • 00:01:36
    of type multi lines of
  • 00:01:39
    text and finally I have a column of type
  • 00:01:43
    multi-line of text called approval
  • 00:01:46
    history this is where I would like to
  • 00:01:49
    store the entire history of the approval
  • 00:01:53
    process whenever an expense is submitted
  • 00:01:57
    the first approval would be the users's
  • 00:01:59
    manager
  • 00:02:01
    the manager can take the approval
  • 00:02:03
    decision either approve or reject or
  • 00:02:06
    transfer the approval to another
  • 00:02:09
    approver that they can do by selecting
  • 00:02:12
    who the next approver
  • 00:02:15
    is let's go ahead and build a power app
  • 00:02:18
    that will connect to that SharePoint
  • 00:02:21
    list I'll start with a page
  • 00:02:25
    design I leverage the design gallery
  • 00:02:28
    connected to sh SharePoint I'll select
  • 00:02:32
    this creates the
  • 00:02:35
    connection I can put my SharePoint site
  • 00:02:38
    URL
  • 00:02:40
    connect and pick the SharePoint
  • 00:02:45
    list I'll click create
  • 00:02:48
    app this will begin the process of
  • 00:02:51
    creating a single screen power app
  • 00:02:54
    experience that will allow the user to
  • 00:02:56
    perform full crud operations create
  • 00:02:59
    delete update and delete against that
  • 00:03:02
    connected expense request
  • 00:03:05
    list here's the app I can click on new
  • 00:03:10
    the form experience lights up which
  • 00:03:12
    allows me to enter the expense
  • 00:03:16
    details now let's make modifications to
  • 00:03:19
    this form
  • 00:03:21
    experience in the main container is
  • 00:03:23
    where the form control is
  • 00:03:26
    placed columns I'll set to three
  • 00:03:30
    so this will place the columns in a
  • 00:03:32
    three column
  • 00:03:34
    format I also have the option to
  • 00:03:37
    reposition The Columns in the
  • 00:03:40
    form I've gone ahead and done
  • 00:03:44
    that for the form
  • 00:03:47
    Fields I'll go and insert a custom
  • 00:03:52
    card I'll use this to create a sectioned
  • 00:03:56
    experience in the
  • 00:03:57
    form I'll position this card
  • 00:04:00
    right before the approval
  • 00:04:02
    columns expand its width reduce its
  • 00:04:06
    height and in this
  • 00:04:09
    card I'll insert a label
  • 00:04:13
    control I'll call this approval
  • 00:04:19
    information now when the user is
  • 00:04:21
    creating a new expense
  • 00:04:25
    request approval status by default will
  • 00:04:28
    be set to
  • 00:04:31
    pending so this data card should not be
  • 00:04:34
    visible if the form is in new
  • 00:04:37
    mode the approval status data
  • 00:04:40
    card visible
  • 00:04:42
    property I'll change this to my form
  • 00:04:45
    control which is called form
  • 00:04:48
    one. mode is not equal to form mode.
  • 00:04:54
    new so notice the approval status column
  • 00:04:59
    is hidden when the user is creating a
  • 00:05:01
    new
  • 00:05:03
    item
  • 00:05:05
    approver who should be the current
  • 00:05:08
    approver for the expense
  • 00:05:10
    request when a new item is being created
  • 00:05:14
    this should be the current users
  • 00:05:18
    manager to do that I'll go to data add
  • 00:05:24
    data and use the Office 365 users
  • 00:05:28
    connector
  • 00:05:30
    this connector has a function that
  • 00:05:33
    allows me to get the manager
  • 00:05:35
    details that I would like to store in a
  • 00:05:40
    formula the app object has a property
  • 00:05:44
    called
  • 00:05:46
    formulas so I'll give this a
  • 00:05:48
    name I'll call it user manager and its
  • 00:05:51
    value will be Office 365 users dot
  • 00:05:57
    manager
  • 00:05:58
    V2 and it requires the ID of the current
  • 00:06:01
    logged in
  • 00:06:02
    user that we can get from the user
  • 00:06:05
    function that exposes a property called
  • 00:06:08
    entra object
  • 00:06:11
    ID so this will get me the current users
  • 00:06:15
    manager
  • 00:06:16
    information and this is what I would
  • 00:06:19
    like to plug in as the default value of
  • 00:06:23
    the approv data
  • 00:06:25
    card to make changes to a data card we
  • 00:06:28
    have to first unlock the data
  • 00:06:32
    card and I would like to change the
  • 00:06:34
    default property depending upon the mode
  • 00:06:37
    of the
  • 00:06:39
    form I'll switch on form. mode if the
  • 00:06:45
    mode is form mode. new then I would like
  • 00:06:48
    to put the current users
  • 00:06:51
    manager for now I'll use the named
  • 00:06:54
    formula which is user
  • 00:06:56
    manager
  • 00:06:58
    else I use this item.
  • 00:07:02
    approver format
  • 00:07:04
    text user
  • 00:07:06
    manager if you
  • 00:07:08
    explore it has gone and picked my
  • 00:07:10
    manager information from ad but the data
  • 00:07:15
    card is not defaulting to my user that's
  • 00:07:19
    because approver is a person type
  • 00:07:23
    column I wrote a blog post around how to
  • 00:07:27
    patch data to SharePoint
  • 00:07:30
    and in here I covered different types of
  • 00:07:32
    SharePoint columns and one of them is
  • 00:07:35
    the person column the way we set values
  • 00:07:39
    for the person type column is as
  • 00:07:41
    follows so I'll simply go and copy
  • 00:07:45
    this go back to my power app approv a
  • 00:07:49
    data card default value instead of user
  • 00:07:53
    manager I'll just paste that
  • 00:07:55
    code format
  • 00:07:58
    text now now it shows a value for the
  • 00:08:00
    approver it's the current logged in user
  • 00:08:03
    itself which is me
  • 00:08:05
    Raza but I need the manager
  • 00:08:08
    information all I have to do replace the
  • 00:08:11
    user object details with the information
  • 00:08:14
    coming from my named formula user
  • 00:08:18
    manager here I need the email I'll use
  • 00:08:21
    user manager.
  • 00:08:23
    mail here I need the full name user
  • 00:08:27
    manager. display name
  • 00:08:30
    here as well I need the
  • 00:08:32
    email and if You observe the data card
  • 00:08:35
    it has defaulted to my manager which is
  • 00:08:39
    Sarah now this data card is something
  • 00:08:42
    that I do not want to allow the user
  • 00:08:45
    creating the request to
  • 00:08:47
    change the data card has a property
  • 00:08:49
    called display mode let's change this as
  • 00:08:53
    follows if the mode of my form is
  • 00:08:57
    edit then you respect the display mode
  • 00:09:01
    of the form else you set the display
  • 00:09:05
    mode to view so now I cannot change
  • 00:09:10
    it approval commands should only be
  • 00:09:13
    visible to the approver which would be
  • 00:09:16
    the user editing the item so the visible
  • 00:09:20
    property my form. mode is it equal to
  • 00:09:24
    form mode. edit currently it's a new
  • 00:09:27
    form so it's hidden
  • 00:09:30
    for approval history this is where I
  • 00:09:33
    will track the entire process of my
  • 00:09:36
    approval I'll unlock this
  • 00:09:40
    card it's default value I would like to
  • 00:09:43
    change as
  • 00:09:44
    follows if this is a new form I would
  • 00:09:48
    like to plug in details in the approval
  • 00:09:50
    history around who this approval is
  • 00:09:53
    assigned
  • 00:09:54
    to I'll create this
  • 00:09:57
    demarcation now gives me the current
  • 00:09:59
    date and time use the same
  • 00:10:03
    demarcation it's a simple string ENT
  • 00:10:06
    allows me to concatenate
  • 00:10:08
    string double
  • 00:10:10
    codes enter to go to a new line approval
  • 00:10:15
    assign
  • 00:10:16
    to the users's
  • 00:10:19
    manager
  • 00:10:20
    comma if it's not the new form just keep
  • 00:10:24
    the original value format text
  • 00:10:29
    this data card just span its
  • 00:10:32
    width and
  • 00:10:35
    preview current date and time approval
  • 00:10:39
    assign to whoever the approver
  • 00:10:42
    is this data card is not something I
  • 00:10:45
    would like to show to the user when they
  • 00:10:48
    are creating or editing the item so the
  • 00:10:51
    visible
  • 00:10:53
    property I will set as form. mode is
  • 00:10:57
    form mode. View
  • 00:11:00
    so at this point if I was to preview the
  • 00:11:03
    app when a user clicks on a new expense
  • 00:11:06
    request they get the expense form to
  • 00:11:09
    fill
  • 00:11:10
    out any mandatory fields that I've
  • 00:11:12
    defined in my SharePoint list will be
  • 00:11:15
    respected the approval info section will
  • 00:11:17
    only show me the approval to begin with
  • 00:11:20
    and please note none of the approval
  • 00:11:22
    columns I have set as mandatory in my
  • 00:11:25
    data source I will handle the mandatory
  • 00:11:29
    law loic later when the approver comes
  • 00:11:31
    into picture in the app so at this point
  • 00:11:35
    the user can submit an expense
  • 00:11:40
    request the user can also attach files
  • 00:11:43
    as part of the expense
  • 00:11:46
    request and submit the
  • 00:11:50
    request the expense request is
  • 00:11:52
    created I can view the details of the
  • 00:11:56
    submitted
  • 00:11:57
    request the approval status is pending
  • 00:12:01
    the approver is Sarah and the approval
  • 00:12:05
    history has started tracking the
  • 00:12:08
    information when we submit the form we
  • 00:12:12
    would need to send an email notification
  • 00:12:14
    to the
  • 00:12:16
    approver whenever data is submitted in
  • 00:12:18
    the form control and when it does it
  • 00:12:22
    successfully it will trigger a property
  • 00:12:24
    in the form control called on
  • 00:12:27
    success this is what the formula looks
  • 00:12:31
    like this is where I would like to send
  • 00:12:34
    the notification email to the
  • 00:12:37
    approver the email should go to the
  • 00:12:39
    approver if the approval status of the
  • 00:12:42
    request is
  • 00:12:44
    pending I'll use the formula if form one
  • 00:12:49
    which is the name of the form in my case
  • 00:12:52
    do last submit meaning the last
  • 00:12:56
    submitted instance of the form for for
  • 00:12:59
    the current logged in user session go
  • 00:13:01
    and grab that and from here get the
  • 00:13:06
    approval status which is a choice column
  • 00:13:09
    so get me its
  • 00:13:10
    value if that is equal to
  • 00:13:14
    pending then I would like to send an
  • 00:13:17
    email to send the
  • 00:13:21
    email I'll go and connect to Office 365
  • 00:13:27
    Outlook so if the status is
  • 00:13:30
    pending Office 365
  • 00:13:33
    outlook. send email
  • 00:13:36
    V2 who do you want to send the email to
  • 00:13:40
    form do last submit do approver that's
  • 00:13:46
    the person type column that has the
  • 00:13:48
    information about the current
  • 00:13:50
    approver I'll pick the email address of
  • 00:13:52
    that
  • 00:13:54
    user
  • 00:13:56
    subject expense request approval
  • 00:14:00
    erson to concatenate this with form.
  • 00:14:03
    lsub submit.
  • 00:14:05
    tile comma the body of the email here I
  • 00:14:10
    can use
  • 00:14:11
    HTML I'll start with expense request
  • 00:14:14
    submitted by and I'll put the name of
  • 00:14:17
    the user who submitted the expense form.
  • 00:14:21
    last submit do created by display name
  • 00:14:25
    will give me that
  • 00:14:26
    info to this I add a line break I'll
  • 00:14:30
    give an anchor tag I'll plug in the hrf
  • 00:14:34
    later the text form. last submit.
  • 00:14:40
    tile and I am free to add other pieces
  • 00:14:43
    of information right
  • 00:14:46
    here I can also set additional
  • 00:14:48
    attributes of the email for example the
  • 00:14:51
    importance of this email I'll set it to
  • 00:14:55
    high I'll close the send email function
  • 00:14:59
    close the if condition format
  • 00:15:04
    text in the email I would like to give a
  • 00:15:09
    link for the user to come to this
  • 00:15:12
    app for power apps the URL is apps.
  • 00:15:18
    power apps.com
  • 00:15:20
    slpl SL I need the ID of the
  • 00:15:25
    app I'll save the app and give it a name
  • 00:15:31
    I'll call it my expense
  • 00:15:34
    app I'll make sure I publish the
  • 00:15:37
    app head over to make. power
  • 00:15:41
    apps.com you should see your app
  • 00:15:44
    listed head over to
  • 00:15:47
    details and copy the app
  • 00:15:52
    ID back to the power app the link right
  • 00:15:56
    after play Slash
  • 00:15:59
    I'll put the ID of the
  • 00:16:02
    app but I also want that expense to be
  • 00:16:05
    directly selected in the screen and for
  • 00:16:09
    that I'll pass a parameter here I'll
  • 00:16:13
    call it ID so question mark ID all caps
  • 00:16:18
    equal
  • 00:16:20
    to two double quotes two
  • 00:16:23
    erson concatenating
  • 00:16:26
    this form. last sub submit dot the ID of
  • 00:16:32
    the item in SharePoint which will always
  • 00:16:35
    be
  • 00:16:36
    unique so the approver will get the
  • 00:16:39
    email they'll get this link and there
  • 00:16:43
    will be the parameter ID which will give
  • 00:16:45
    the context of the request item under
  • 00:16:50
    approval now I'll go to app
  • 00:16:54
    formulas here I would also like to read
  • 00:16:58
    that I ID
  • 00:17:00
    parameter so I'll create a named formula
  • 00:17:02
    called param
  • 00:17:04
    ID and use the function param of
  • 00:17:09
    ID exactly the same name as the
  • 00:17:12
    parameter I'm
  • 00:17:14
    passing I'll create another formula
  • 00:17:17
    called approval
  • 00:17:19
    item now I need to get the actual item
  • 00:17:22
    under
  • 00:17:23
    approval for that I will first check to
  • 00:17:25
    see
  • 00:17:26
    if not is
  • 00:17:29
    blank param ID then go and look up my
  • 00:17:36
    SharePoint
  • 00:17:37
    list where ID is equal to parm
  • 00:17:44
    ID if the parameter that's being passed
  • 00:17:47
    is blank then you set an empty object
  • 00:17:51
    for this approval
  • 00:17:53
    item
  • 00:17:55
    semicolon notice here it says inoma able
  • 00:17:59
    types that's because param ID although
  • 00:18:03
    it will be a number param function
  • 00:18:05
    returns it as a
  • 00:18:07
    string so we need to type cost this
  • 00:18:10
    using the value
  • 00:18:13
    function approval item has the context
  • 00:18:16
    of the
  • 00:18:17
    item if there is the ID parameter
  • 00:18:22
    available for the screen there is an
  • 00:18:25
    unvisible
  • 00:18:27
    property here
  • 00:18:29
    I would like to set the context of the
  • 00:18:32
    selected
  • 00:18:33
    item update context item selector
  • 00:18:37
    true current item this stores the
  • 00:18:40
    context of the current item to select in
  • 00:18:42
    the gallery this I will get from my
  • 00:18:46
    named formula which is approval
  • 00:18:52
    item if you enjoyed this video then do
  • 00:18:55
    like comment and subscribe to my YouTube
  • 00:18:58
    channel and thank you so much for
  • 00:19:00
    watching
Tags
  • Power Apps
  • Approval Process
  • SharePoint
  • Form Control
  • Emails
  • Office 365
  • Manager Approvals
  • Customizable Forms
  • Express Approval Workflow