Create a Procurement Power App for Microsoft Teams

Introduction

Scenario

Implementation

Create Table

Building the screen

Subtle Design Changes

Adding an Image Column

Approval/Rejection Comments

Control Visibility

Filtering Requests based on Signed in User

Publish the App

Test the Teams App

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.

Graphical user interface, application, Teams

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

Before heading over to the App Creation Interface, select to which team, the app has to be added.

Graphical user interface, application, Teams

Description automatically generated

Clicking on Create will open the App maker where we can name the app.

Graphical user interface, application, PowerPoint

Description automatically generated

Create Table

Once we have created the App, let’s create a Table in Dataverse which will hold the information collected using the App.

Graphical user interface, application

Description automatically generated

Let’s name the table as Requests.

Graphical user interface, application

Description automatically generated

It will by default add a column by the name “Name”.

Graphical user interface, application

Description automatically generated

We can either rename it or add a new column. For time being, we will rename it as Procurement Title

Graphical user interface, application

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

The table with the created columns will look like this:

Graphical user interface, application, table

Description automatically generated

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.

Graphical user interface, text, application

Description automatically generated

Building the screen

By default we have a blank screen available in the app, but since we have already created a back end table

Graphical user interface, application, Teams

Description automatically generated

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.

Chart

Description automatically generated with low confidence

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.

Graphical user interface, application

Description automatically generated

To change the width of the control, set the Width fit to Off to play around with the control.

Graphical user interface, application, Teams

Description automatically generated

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.

Graphical user interface, application, Teams

Description automatically generated

We have also updated the Title’s Font Size and Font Weight

Graphical user interface, application

Description automatically generated

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.

Graphical user interface, application, Teams

Description automatically generated

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.

Graphical user interface, text, application, email

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

Now let’s head back to the App that we were developing by clicking on Apps -> <App name>

Graphical user interface, text, application

Description automatically generated

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.

Graphical user interface, application, Teams

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

We can see that the Datacard for Manager Approvals Image field has a label named Manager Approvals as well as an AddPicture control.

Graphical user interface, application

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

Approval/Rejection Comments

We will head to the Build tab, select the table and add one more column to capture the approval/rejection comments.

Graphical user interface, application

Description automatically generated

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.

Graphical user interface, application, Teams

Description automatically generated

The newly added table column is now available on the Screen.

Graphical user interface, application, Teams

Description automatically generated

We will bring down Approved Status and align it along with the Comments field.

Graphical user interface, application, Teams

Description automatically generated

Let’s give some styling to both Approved Status and Approval/Rejection Comments labels by applying background colour and increasing their height

Graphical user interface, application, Teams

Description automatically generated

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.

Graphical user interface, application

Description automatically generated

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)
Graphical user interface, application, Teams

Description automatically generated

The same expression goes into the DisplayMode for Comments fields as well

Graphical user interface, application

Description automatically generated

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.

Graphical user interface

Description automatically generated
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.

Graphical user interface, application

Description automatically generated

Click on Next

Graphical user interface, application, Teams

Description automatically generated

Select the + icon to add it as Tab to the Teams Channel and Save

Graphical user interface, application, Teams

Description automatically generated

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.

Graphical user interface, application, Teams

Description automatically generated

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

Graphical user interface

Description automatically generated with low confidence

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.

Graphical user interface, application, Teams

Description automatically generated

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.

Related Articles

Author

Author

Priyaranjan KS is a Modern Workplace Architect primarily focused on developing and architecting solutions around Office 365,Power Platform and Azure.He is also a Microsoft Most Valuable Professional(MVP) and a Microsoft Certified Trainer(MCT)

Latest Articles