PowerApps Portals Build Tools - An Azure DevOps Extension to Automate Portal Deployment

 

About PowerApps Portals Build Tools

This tool empowers developers to enable CI/CD (Continuous Integration/Continuous Deployment) of portal configuration. You can use this tool to check-in the portal configuration to source control and move the portal configuration to any environment using Power Apps CLI.

For more details about Power Apps CLI support for Power Apps Portal. You can check these articles:

• https://docs.microsoft.com/en-us/powerapps/maker/portals/power-apps-cli-tutorial
• https://docs.microsoft.com/en-us/powerapps/maker/portals/power-apps-cli

Task	Description
Portal Tool Installer	This tasks install pre-requisites tools like node.js and npm to connect, authenticate, download, and upload the portal configuration
Export Portal Configuration	This task exports the portal configuration from the power platform environment and saves it in the source control.
Import Portal Configuration	This task imports the Portal configuration in the power platform environment

Steps to configure

Step 1 - Install the extension in your Azure DevOps Instance

1. Create a build pipeline in Azure DevOps and find the tool with the name: "Power Apps Portal Build Tools".
2. Click on "Get it free" to get this tool installed in your Azure DevOps instance.

Step 2 - Portal Tool Installer

Portal Tool Installer task is used to install all prerequisites software and tools like npm, node.js, etc in Azure DevOps VM. These tools and software are required to connect, authenticate, download, and upload the portal data from/to your Power Platform environment.

Step 3 - Export Portal Configuration

Export Portal Configuration task is used to export(download) the portal configuration (form, list, webpages, content snippet, etc) from your Power Platform environment and store it in the source control. In order to use this task in your build pipeline(CI), You need to pass some mandatory information like D365 instance URL, application Id, client secret, tenant id, website id, and the folder path of your source control where you want to save the portal configurations.

Here are the mandatory details that you need to provide:

• Dynamics 365 URL: https://.crm.dynamics.com
• Application Id: Register an Azure AD app in azure and capture this value from there
• Client Secret Key: Register an Azure AD app in azure and capture this value from there
• Azure Tenant Id: Capture this value from your Azure AD
• Portal Website id: Capture this value from Dynamics 365 instance, where your portals are installed
• Save export data: Repository path where you want to store your portal configuration data. For Ex. if you have a folder in the repository with the name Power-Platform-Solution and inside that there is one more folder called PowerApps-Portals, where you want to export the portal configuration, then this parameter value must be: Power-Platform-Solution\PowerApps-Portals

Step 4 - Commit data to source control

Once you export the portal configuration, it is currently available on your Azure DevOps virtual machine. You need to commit that data to your source control in the Master branch. To do that, you should add a Powershell task and add the following script.

Note: In the git add the command (4th line in the script, as shown below), give the folder path where you want to store the portal configuration in the repository

Step 5 - Import Portal Configuration

Import Portal Configuration task is used to import(upload) the portal configuration (form, list, webpages, content snippet, etc) to your Power Platform environment. In order to use this task in your release(CD) pipeline, You need to pass some mandatory information like D365 instance URL, application Id, client secret, tenant id, and the folder path of your source control where you have exported/stored the portal configurations.

Here are the mandatory details that you need to provide:

• Dynamics 365 URL: https://.crm.dynamics.com
• Application Id: Register an Azure AD app in azure and capture this value from there
• Client Secret Key: Register an Azure AD app in azure and capture this value from there
• Azure Tenant Id: Capture this value from your Azure AD
• Portal data: Repository path, where you had stored the portal configuration using Export Portal Configuration task. For Ex: if your portal configuration is stored in \Power-Platform-Solution\PowerApps-Portals\Starter-Portal folder, then you should choose the Starter-Portal folder in the folder path (as shown below)

Demo and Usage

PowerApps - Highlight First Record in Canvas App List Gallery

Introduction

Hey Everyone!

I hope you all had fun and great learning this weekend in PowerApps Developer Bootcamp.

I would like to express my sincere appreciation to all the Speakers and Participants who generously helped us make this event come together to become a success 💪

During the event, one of our participants had a question about Highlighting the first record in the Canvas App List Gallery control. I found this requirement quite interesting and tried to google it to check if someone else has already been implemented this before or not. However, I couldn't find anything on the internet.

So, I thought of implementing it using my experience and knowledge of PowerApps.

Today in this blog post, I am going to share a #PowerGuideTip32, where I'll show you a simple trick to highlight the first record in the List Gallery.

So let's get started...

Implementation

Step 1 - Add a List Screen in your Canvas App.

Step 2 - Connect with Data Source to display the records

Step 3 - Add a Rectangle Icon to the screen (above the Gallery control).

(a) Make sure this Rectangle icon must be added outside your List Gallery control. To do that, you can select the Gallery control from the left navigation panel and drag it down a bit and then place the Rectangle icon right above the Gallery (as shown below)

(b) Make sure the Height and Width of the Rectangle are similar to List Gallery's first record (as shown below). So that it can cover the complete information being displayed in the record.

(c) Change the Background color of the Rectangle as per your need.

Step 4 - Right click on Gallery control from the left navigation panel and choose Reorder > Bring to front

The idea to do this setting is to set the Rectangle Icon in the background of the Gallery's first record.

Step 5 - Now drag and adjust the whole Gallery, so that the first record of the Gallery control could appear on top of Rectangle (As shown below)

Step 6 - Run the app and see the result.

Demo of Implementation

Important Note: In this example, I haven't used any query or formula like Lookup(...), First(...), and Filter(...) expressions in order to find the first record of the table. This is just a simple example to showcase the capabilities of out of box controls of Canvas App in order to highlight the first record of List Gallery, 

I hope you found this Tip useful.

Stay tuned for the next Tip - #PowerGuideTop33.

PowerApps - Get Canvas App Logged-In User Role from Dynamics 365

Introduction

Hi Everyone,

Hope you are doing great and staying safe!

Today, in this blog post I am going to share #PowerGuideTip31, where I'll demonstrate how to read Dynamics 365 security role in PowerApps Canvas App.

There are many business use cases, where we need to design an App based on the Dynamics 365 security role. One of the best examples is:

Role-based Canvas App, where we need to navigate the user to different-2 screens or perform different process/flow based on the role assigned in the Dynamics 365 application.

I have already been demonstrated this feature in my earlier blog post, In that post, I had used Power Automate to get the Dynamics 365 Security Role in Canvas App. However, today I am going to retrieve it directly in Canvas App without using any external components.

Let's get started...

I have designed a Canvas App that allows -

• Event Organizers to manage the organization events.
• Speakers to submit their session.
• Participants to register for an event.

Implementation

Step 1: Design a Login Screen

Step 2: Use an expression to retrieve Canvas App logged-in user's security role from Microsoft Dataverse

I am using the following expression (Microsoft Power Fx) on OnStart property of the Canvas App.

That means, every time when you open the app, all security roles assigned to the logged-in user will get automatically stored in the Canvas App Collection.

ClearCollect(UserRoles, (LookUp(Users,domainname = User().Email).'Security Roles (systemuserroles_association)').Name)

Here User().Email - returns the logged-in user email address.

LookUp(Users,domainname = User().Email) - Retrieve User from Office 365 whose email address is equal to logged-in user email address

'Security Roles (systemuserroles_association)'),Name - will return the name of all security roles assigned to the logged-in user.

Finally, I am storing the list of all security roles in Collection, so that I can read it throughout my app.

Important Note: App OnStart event will not trigger when you play/run the app from Power Studio Editor. Hence, you won't see any value stored in the Collection. To do that, you need to manually trigger the OnStart event by clicking on Run OnStart (see below).

Step 3: Restrict Canvas App user's login based on security role

Once you have the security roles of the logged-in user, the next thing you need to write the expression on Login Screen to check whether a user has sufficient privileges to access the app or not.

To do that, I have used the following expression on click of 'Event Organizer' control

If(IsBlank(LookUp(UserRoles,Name="Event Organizer")),Navigate(RoleErrorMessage,ScreenTransition.CoverRight,{rolemissing:"Event Organizer"}),Navigate(HomeScreen))

Explanation: Here, I am checking whether the canvas app collection has an Event Organizer role in the list. If it returns blank, then redirect the user to Error Screen else redirect the user to Home Screen.

And, using the following expression on click of 'Participants control

If(IsBlank(LookUp(UserRoles,Name="Participant")),Navigate(RoleErrorMessage,ScreenTransition.CoverRight,{rolemissing:"Participant"}),Navigate(HomeScreen))

Explanation: Here, I am checking whether the canvas app collection has a Participant role in the list. If it returns blank, then redirect the user to Error Screen else redirect the user to Home Screen.

Step 4: Test and Demo

Useful Tip

In the above example, I have retrieved the user's security role on the canvas app OnStart event and stored it in the Collection. Afterward, I am using these roles to design a role-based canvas app, However, you might also have a requirement to show the list of logged-in user roles in the Canvas App Screen. To do that, perform the followings steps:

Add a List type of Screen from the Screen List

Set the 'items' property of the list screen to the Collection name (created in Step 2)

I hope you found this PowerGuideTip helpful.

Stay tuned for #PowerGuideTip32

Canvas Apps - Auto populate Option Set value in the Canvas App Form

Introduction

Hi Everyone,

Hope you are well and staying safe!

In today's #PowerGuideTip30, I will show you how to auto-populate or set value in Option set field in Canvas App.

I have designed a Canvas App for Event Management purposes, where I have added a screen that the Event Organizer uses to create an Event. This screen has an Option Set field called 'Event Status' that shows the status of the event.

I don't want to allow the Event Organizer to set the Event Status value manually and want to auto-populate its value to 'Submitted' instead.

Solution

To auto-populate value in Option Set value or Set value in Option Set value you should use Choices() expression.

• The Choices function returns a table of the possible values for a lookup column.

• Use the Choices function to provide a list of choices for your user to select from. This function is commonly used with the Combo box/ Drop Down control in edit forms.

Syntax

Choices( column-reference )

column-reference – Required. A lookup column of a data source or Option Set Field column. Don't enclose the column name in double-quotes. The reference must be direct to the column of the data source and not pass through a function or control.

Implementation

Choices('Event Status (Events)'.Submitted)

where 'Event Status (Events)' represents the Event Status column of the Event table in Microsoft Dataverse and Submitted is the Option set value that I want to auto-populate.

Note: I want to auto-populate the option set value, hence I have used the Choices(....) expression directly on the items property of Combo box. If you want to set the value on button click then you can use the same expression on onselect property of button control.

Useful Reference

Choices function in Power Apps

I hope you found this PowerGuideTip helpful. 

Stay tuned for #PowerGuideTip31