Show Hide Power Apps Form Based On Gallery Selected Item

I developed a leave request app in Power Apps. Managers/Approvers can see all the requests and approve/reject waiting for them. When they tap a request, they see all the details. After they approve or reject it, the details form closes automatically.

In this tutorial, I will explain how to show hide Power Apps form based on gallery selected item with a simple scenario.

Show Hide Power Apps Form Based On Gallery Selected Item

In the example below, you can see that on the welcome screen, I clicked on the Team Lead button, which navigated me to the dashboard screen. As a team lead, I can see the employee leave requests that are assigned to me.

When I click on an item in a gallery, a Power Apps form appears on the screen, showing the details of the selected leave request for the gallery. I can approve or reject it here; when I click on the cancel icon, the form disappears.

Here is the SharePoint list that stores the employee leave request details.

Follow the steps below to achieve this!

1. In the Power Apps application, add the SharePoint list, then create two screens for :

• Welcome Screen
• Dashboard Screen

Add a button control for the approver on the welcome screen and provide the code below for its OnSelect property.

ClearCollect(colLeaveRequestDetails,'Employee Leave Requests');Navigate(DashboardScreen);Set(varShowForm,false)

I created a collection [colLeaveRequestDetails] that stores the SharePoint list details to avoid deligations while performing filtrations.

Navigate() function will take us to the provided screen.

2. On the dashboard screen, add a gallery control and provide the formula below for its Items property.

Also, provide the below code on the OnSelect property of gallery control.

Items = Filter(colLeaveRequestDetails,'Team Lead'.Email =User().Email && TeamLeadApproval.Value ="In Progress")
OnSelect = Set(varShowForm,true)

3.  Now, add a Container and a Form control within that. Then, do the following steps one by one.

Container Fill Property = ColorValue("#ffffff")

Provide the SharePoint list name on the DataSource property of the form control and the formula below on its Item property.

DataSource = 'Employee Leave Requests'
Item = Gal_TeamLead.Selected
DisplayMode = FormMode.View

Add two button controls for approve and reject and a cancel badge icon at the top of the form within the container. Provide the following formulas for the OnSelect property of these controls.

Approve button OnSelect property:

Patch(
    'Employee Leave Requests',
    LookUp(
         'Employee Leave Requests',
        ID =Gal_TeamLead.Selected.ID
    ),
    {
        'Team Lead Approval':{Value:"Approved"}
    }
);
Refresh('Employee Leave Requests');
Collect(colLeaveRequestDetails,'Employee Leave Requests')

Using the Patch() function, I’m updating the ‘Team Lead Approval’ status to “Approved.”

• LookUp() = Used to update the status for gallery-selected items based on condition.
• ‘Employee Leave Requests’ = Sharepoint list name.

Reject Button OnSelect property:

Patch(
    'Employee Leave Requests',
    LookUp(
         'Employee Leave Requests',
        ID =Gal_TeamLead.Selected.ID
    ),
    {
        'Team Lead Approval':{Value:"Rejected"}
    }
);
Refresh('Employee Leave Requests');
Collect(colLeaveRequestDetails,'Employee Leave Requests')

Here, the status is updated as “Rejected.”

Cancel icon OnSelect property:

Set(varShowForm,false)

Here, we assign the varShowForm to false so the container will be hidden.

4. Add the below formula to the Visible property of the Container.

varShowForm

If the varShowForm value is true, the container will be displayed. Otherwise, it will hide.

Save the changes and preview the app once. Now, test the application; when you click on any item in the gallery, the selected item details will appear on the form control. When you click on the Cancel icon, the form will be hidden.

I hope you understand how to show and hide Power Apps from control when you click on gallery items. In this article, I also explained how to filter the gallery items based on the current user and status field at a time. Also, approve or reject a leave request from the app itself.

Follow this article if you are also trying to create a Dashboard for approvers in Power Apps, where you can see full details of a leave request before approving or rejecting it.

Also, you may like:

• Switch Light Or Dark Theme Color Using Power Apps Toggle Control
• Hide Power Apps Combo Box Choice Value Based On Text Input
• Create Multiple Tabs in Power Apps Form [Download Lead Management App Example]
• Remove Duplicate Rows From a Power Apps Collection
• Patch Power Apps Collection to SharePoint List
• Sort Power Apps Gallery By Month [With Examples]