Filtering Requests based on Signed in User
Introduction
Stand-alone power apps are a great choice for Individual and Team Productivity. However, to take the collaboration to the next level, having the Power App built and available within Teams is going to serve the purpose better. We can either create a Power App and embed it in Teams or we can create the Power App from scratch in Teams itself.
In this article, we will see how to get started with Power App Creation in Microsoft Teams.
Scenario
We will create a Power App within Microsoft teams to take care of the Procurement requests from different departments and having it within Teams will help boose collaboration due to the ease of access of the App.
We will have an input form to add the details as well as an option to approve Manager Approval images and submit the records. We will ensure that the Procurement records created by a user are available for only his/her viewing and only the admin will have the option to approve and add comments to the records which can be seen by the Initiator.
Implementation
To get started, add Power App from the App Collection to Teams. Click on Start now to get started with the App Creation Experience.
Before heading over to the App Creation Interface, select to which team, the app has to be added.
Clicking on Create will open the App maker where we can name the app.
Create Table
Once we have created the App, let’s create a Table in Dataverse which will hold the information collected using the App.
Let’s name the table as Requests.
It will by default add a column by the name “Name”.
We can either rename it or add a new column. For time being, we will rename it as Procurement Title
Since we are editing an existing column, it does not let us edit the Data Type. So, ensure that you are pretty clear on the data type you would want to use for a column you are creating in a Dataverse table.
Let’s go ahead and create a few more columns like Department, Justification, Initiator Email ID, Priority. We will also add a column named Approval Status as a choice column with Approved and Rejected Values.
The table with the created columns will look like this:
Now, we can see the newly created table in the Data tab. If we want to add data to the table at some point, we can click on Edit Data to update the table.
Building the screen
By default we have a blank screen available in the app, but since we have already created a back end table
Clicking on “with data option” in the screen will update the screen with a template with which we can interact with the Requests table. It creates a Left Container with a Gallery that lists the Items from the recently created table. It also has an option to add a new record. To the right, we have a Right Container which houses a Form that toggles between New and Display form when we click on the “New Record” or the edit Icon at the top right corner. The delete icon, let you delete the current record from the table.
Subtle Design Changes
In case we want to modify the data cards and change the font size of update the width of the controls,we can do that by Selecting “Unlock to change properties” option from the advanced tab.
To change the width of the control, set the Width fit to Off to play around with the control.
In case we want to set the width of control to occupy the full screen, we can set its width to Parent.Width after turning of Width fit.
We have also updated the Title’s Font Size and Font Weight
Let’s also add a Button to the Top Container so that it can be considered as an App Name. We will set the button to be disabled so that it will be nonclickable and behaves like a label that can be styled. We will also set its Disabled Colour to as shown in the settings below and add a border-radius to it. The reason for using this approach is because this provides better flexibility in styling the component to give a header feel.
Adding an Image Column
Now let’s see how we can add a new image column to the already created Dataverse table so that we can use it to store Manager approval for the Procurement requests. To do this, head over to the Build Tab in the top menu and select the Requests table that we had created for the app.
Select Add Column and we can see that there are a lot more data types available from this Build Section view than in the Table view we used for column creation last time. Select the Image data type and click on Done. Finally, Click on Save Table.
Now let’s head back to the App that we were developing by clicking on Apps -> <App name>
We will now add the newly added Manager Approvals Image field to the form, by clicking on Edit fields and selecting the Manager Approvals field.
This will add the Data Card to the form, we will stretch it to fit the Parent Width using the below expression in the Width property.
We can see that the Datacard for Manager Approvals Image field has a label named Manager Approvals as well as an AddPicture control.
Since the form is in display mode now, we will not see the Add Picture Control button in action. But once we preview it and go into New or Edit more, we can see a Button that will let us explore the file system and upload the image. In the case of the mobile app, it will also let us use the camera to take a snap of the images.
I have just previewed the app and clicked on the new record which shows the Button to add the image and on browsing and selecting the image it will be shown like below.
Now let’s, make a change to the Manager Approvals label and center align it to give it a better aesthetic look. We have applied the below settings to the Label of the Data Card to look like below.
Approval/Rejection Comments
We will head to the Build tab, select the table and add one more column to capture the approval/rejection comments.
Click on Done, followed by that Click on Save Table, and let’s head back to the app. We will add the recently added column to the Screen by selecting Edit fields of the Edit Form.
The newly added table column is now available on the Screen.
We will bring down Approved Status and align it along with the Comments field.
Let’s give some styling to both Approved Status and Approval/Rejection Comments labels by applying background colour and increasing their height
Control Visibility
The Approved Status and Comments fields have to be editable only for the admins. To achieve this, we will add some conditional rendering expressions. To get started with that let’s add the Admin email ids to a collection in the App OnStart.
Now we will select the Approved Status Data Card and set the DisplayMode property using the below expression
| If(User().Email in Admins.AdminMailID,DisplayMode.Edit, DisplayMode.Disabled) |
The same expression goes into the DisplayMode for Comments fields as well
Filtering Requests based on Signed in User
We will now add additional functionality to show the records based on signed-in users. So as to do that, let’s assign the initiator email Id with the currently logged-in user’s email so that whenever a new record is created, the field is automatically populated with the email value. We will then use this email id to filter the gallery on the left side.
| If(EditForm1.Mode = FormMode.New,User().Email,ThisItem.’Initiator Email ID’) |
This expression will check if the form is in New Form Mode, if so it will assign the current logged-in user email id to the field, else it will retain the existing value.
We will now head over to the Gallery in the left container and set its Items property to the below expression
| If(User().Email in Admins.AdminMailID,Requests, Filter(Requests,’Initiator Email ID’ = User().Email)) |
It checks if the user is an admin, if so, the entire records will be shown, else only the requests where the signed-in user email id is present in the Initiator email id field will be shown. This way, we can show only the current user’s records.
Thus we have completed the creation of a simple procurement Requests App, lets go ahead and Publish it.
Publish the App
We can Publish the App so that it becomes available to other users.
Click on Next
Select the + icon to add it as Tab to the Teams Channel and Save
Test the Teams App
Let’s head over to the Channel and test the app by creating a new record. I have logged in as a normal user who is creating a Procurement request.
The request will be submitted on Saving it. We can even come back later and edit it. The approved Status and Comments will be read-only as its only available for admins to edit. The current user will be able to see on his/her record in the left gallery
When we log in as the admin, we can see the entire records created by various users and we can go ahead and approve and add comments as well.
Summary
Thus, we saw how to create a Procurement Power App from scratch directly within the Teams environment and set conditional access to the records created in the app.
