We opened multiple support tickets with Microsoft to find the root cause of the issue and improved the performance using the Power Apps Review Solution from the PowerCAT team, but it was still not an acceptable load time.

In the last couple of weeks we have gone through the Api calls when the app was loading, and one of the things that we found out was that the app was making 8 calls on load to the primary table hosting the embedded Canvas App, each time retrieving a JSON of 500 records.

That didn’t make any sense, but we did some further analysis, and the first thing that we found out was the setting of Data row limit, which limits the max number of records to be returned when delegation is not supported, was being called on load multiple times. As we had this setting set up to 2000 it was making 4 calls to return the data on load for each call. We analyzed the data that is to be returned and made some adjustments so that we could accommodate 500 records, and reverted that change.

This change lowered our Api calls on load from 8 to 2.

That was an improvement, but not a full resolution. We are making 2 JSON calls, retrieving 500 records each on the load of the form. This is still taking more time than expected. We were able to get in touch with someone from the product group that provided us some additional insight on this.

The ModelDrivenFormIntegration has two properties, DataSource and On DataRefresh. The DataSource property is set to [@TableName], and the OnDataRefresh is set to Refresh([@TableName]). Each one of these properties is making the Api call that is retrieving the 500 records. Again, doesn’t make sense, but it seems like this is the expected behavior at the time.

Hopefully sometime in the near future, when Converged Pages can be embedded, this will be resolved.

For now, Microsoft did provide a resolution for this, and there are a few steps.

First, get rid of the code in the DataSource property of ModelDriveFormIntegration. That does not have to be loaded. Once you do that, you might end up seeing a bunch of errors, which you will need to resolve.

Next, on the OnDataRefresh property, add the following Code:

Refresh(TableName); // Note that this is not Refresh([@TableName])

Set(PrimaryId, GUID(First([@ModelDrivenFormIntegration].Data).ItemId)); // Not using the [@ModelDrivenFormIntegration].Item for this.

Next, in order to load data from the Primary record, we can add the following logic

If (!IsBlank(PrimaryId),

Set(PrimaryRecord, Lookup(TableName, PrimaryRecordId = PrimaryId));

)

You should then be able to use the Primary Record to populate and link to data in your embedded canvas app. Let’s look at the sample above as if we were using the Account table. The code on the OnDataRefresh would look something like this:

After adding these modifications, we no longer had the 500 records being loaded on the start of the app. There are still some additional performance issues that we are addressing on preload of Power Automate flows, but those are being addressed as well.

I will update this post with additional findings as we continue our process, but for now, it seems that these latest changes will allow us to go live with the solution. I am still finding some issues were this code is not working in other instances of Dataverse in separate tenants, which I am hoping to address soon.

I hope that this might be of some help in your projects, and looking forward to having converged pages embedded in the form.

Click for a Video demonstration

Special thanks to Srinivasa Dutta and Aaron Richards from Microsoft.

The post Embedded Canvas App Performance Enhancements appeared first on Aric Levin's Digital Transformation Blog.

In the post, I will demonstrate how we can enable co-authoring, and show how collaborating works when multiple users are trying to work on the app at the same time.

In order to implement this, there are a couple of prerequisites. We need to connect Power Apps to a Git repository and share the app with the other users that will be co-authoring. In order to connect to a Git repository, we first need to configure it. Currently the supported repositories that can be used are Github and Azure DevOps. In this post, we will be using Azure DevOps to demonstrate how this works.

Configure Azure DevOps:

If you have worked with Azure DevOps before, this should be pretty simple. You will need to create a new repository to use for the Canvas App and generate a Personal Access Token.

Let’s start by configuring Azure DevOps. Navigate to dev.azure.com to your organization, and open the project where you want to create the Repo. If you don’t have a Project yet, you can create a new Project. The url that you should see on your screen should look like:

https://dev.azure.com/ORG_NAME/PROJECT_NAME, where ORG_NAME is the name of your Azure DevOps organization, and PROJECT_NAME is the name of the project you are working on. The screenshot below shows what you should be seeing on the screen:

Click on Repos to start creating a new Repo. Click on the Plus sign next to the Project Name on the left navigation, and select New Repository. This will open a Panel on the right hand side. Enter the name of the Repo, and click the create button. Make sure that that Add a README checkbox is checked. The screenshot below shows this steps.

Once the Repo has been created, you can either copy the name of the Repo from the address bar.

For instructions on generating a personal access token, you can read the following post from a couple of years ago:

/Azure/Post/calling-azure-devops-pipeline-flow-canvas

You will not need to use GitBash to convert the token to base64 for this implementation.

Next let’s go back to our Power Apps. If you have not already done so, please make sure to share the app with the other users that will be co-authoring. Make sure it is shared with the other users as co-owners and not just users.

Now, as the owning user, open the app in edit mode. Click on Setting from the App main screen, or you can go to File menu, and click Settings from there. Within Settings, click on Upcoming Features, select Experimental and look for Show the Git version control setting. Turn this on.

Once this is turned on, within the popup you will see on the left navigation. Click on the link, which will show a window to connect to the Git Version control.

Click on the Connect button, and then enter the Git repository URL, Branch and Directory Name

Next you will get a repo authentication window requesting your username and password. Enter your user account email in the username field, and the Personal Access Token that you created and copied as the password. If you get a message that the directory was not found, just let the system create the directory for you.

Once you have finished configuring this, you will that there is an additional button added to the Canvas apps command bar, shown in the image below. This is the Commit changes and check for updates button.

Now that we have enabled the Git version control in our app, we can try and test out Co-authoring. You will probably have to log out and log back into the app for this to work.

The video below will show you the app open in two separate windows. We will make a change to the app in one of the windows, and click on the Commit changes and check for updates button. Once done, we will click on the same button on the other window (logged in as a different user), and you will see how the changes are updated in that window as well.
NOTE: If the video does not full show in your browser, right click the video and select Open in new tab.

This is one of the long awaited features, and although still experimental, and I am sure will improve over time, this is a great start for co-authoring. I know that it is something that I will be using shortly.

The post Co-Authoring in Canvas Apps appeared first on Aric Levin's Digital Transformation Blog.

Converged apps allows us to converge a Model-Driven App and a Canvas App into a single app. This does not change the ability to create standalone Canvas Apps, but only the ability to have them available in a single app. The link below details the changes that were announced at the end of July

https://powerapps.microsoft.com/en-us/blog/custom-pages-for-converging-model-driven-apps-and-canvas-apps/

In the maker portal, when you navigate to your apps section, you will see the list of both Canvas and Model Driven Apps, and you can still create your apps from here.

Custom pages can be used within our model-driven apps anywhere where all pages are supported. This means the main area of the application, dialogs or the new app side pane. It allows the ability to have functionality that is not achievable using the standard features of model-driven apps, but can be achieved using canvas apps.

Custom pages can be opened from the site map for ease of access or from existing model-driven app logic using the Client Api. Custom pages can also open other custom pages or model-driven app pages. They give us the ability to author pages that are too complex to achieve within the existing model pages.

When we create a new app we can now easily add custom pages and take advantage of Canvas Authoring.

There are a few ways to start with custom pages, but let’s go ahead and start by creating a new app.

First thing, let’s navigate to the maker portal, so that we can start creating the new app. This was previously only available in the preview maker portal, but is now part of the default maker portal (make.powerapps.com).

To start creating the new app, click on the “+ New app” command bar button and select Model-driven from the drop down menu.

This will pop up the create model driven app from blank window, where we can select to use the Modern app designer (preview) or the Classic app designer. To start with the Modern app designer, select that choice, and click Create.

Next we will need to give the app a name, and an optional description, and click on the Create button.

After a few seconds the new app will be created, and we can start adding pages. There are three different types of pages that can be created, these are table based view and form, dashboard and custom (which is currently in preview). The animated image below shows you the three options.

We will start by selecting the table type, once selected you will have the option to select the appropriate table or tables that you want to add to your app, and with an option to add these pages to your site map as well.

When you click on the add button, you will be able to see a preview of your app directly from the designer window, basically a preview of what you app would look like. The image below shows you the preview window. You will notice that the center area is the preview, and on the left hand side we see the tables that were added to the app.

The preview area, not only shows you the way the app looks, but allows you to change the layout so that you see how the app will look in responsive design for different devices.

You will also notice the section to the left that is expanded to show the data tables, which contains links to the pages and navigation. This first link shows you the tables, dashboards and custom pages that make up your app, while the second link shows you the site map. These were covered in additional detail in a previous blog post.

New Model-Driven App Designer

Let’s go ahead and add a custom page. Under the pages left hand navigation area (or from the command bar), click on Add page, and select the Custom (preview) option. Once selected you will have the option to create a new custom page or use an existing custom page that was previously created. In our case, since we don’t have an existing custom page, we will Create a new custom page and give it a name.

Once we enter a name, this will open a new designer, and we can start working on the new app. I have added to the app a couple of galleries and commands so that we can see how this looks and works in our model-driven app. The image below shows the app that we created. Once you are satisfied with the app, click on the Save button and then publish it.

Close the custom page, and then go ahead and Save and Publish the Model-driven app that you created. The animated image below shows the end result of the custom page inside the model-driven app.

To learn how to navigate between your Canvas app and the model-driven app, you can read more about it in the following Microsoft Docs page : https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/page-powerfx-in-model-app

Custom pages can also be available by calling them from JavaScript within the Model Driven App by using the Xrm.Navigation.navigateTo function and providing a page type “custom”, and providing the name of the custom page (canvas app). You can then open the custom page inline or as a centered dialog. The following Microsoft Docs page includes samples on how to open this page: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/navigate-to-custom-page-examples

Additional posts related to the Dynamics 365 and Power Platform 2021 Release Wave 2 will be posted by following the link below:

Power Platform 2021 Wave 2 Release Posts

The post Power Platform 2021 Release Wave 2 Maker Portal Updates – Converged Apps appeared first on Aric Levin's Digital Transformation Blog.

You can read about these two announcements in the Microsoft Power Apps blogs or by clicking on the links below:

https://powerapps.microsoft.com/en-us/blog/custom-pages-for-converging-model-driven-apps-and-canvas-apps/

https://powerapps.microsoft.com/en-us/blog/announcing-command-designer-with-power-fx-preview/

Now, let’s go ahead and review each one of these separately.

Custom Pages:

Let’s start with Custom pages. Custom pages can be used within our model-driven apps anywhere where all pages are supported. This means the main area of the application, dialogs or the new app side pane. It allows the ability to have functionality that is not achievable using the standard features of model-driven apps, but can be achieved using canvas apps.

Custom pages can be opened from the site map for ease of access or from existing model-driven app logic using the Client Api. Custom pages can also open other custom pages or model-driven app pages. They give us the ability to author pages that are too complex to achieve within the existing model pages.

When we create a new app we can now easily add custom pages and take advantage of Canvas Authoring.

There are a few ways to start with custom pages, but let’s go ahead and start by creating a new app.

First thing, let’s navigate to the maker portal, so that we can start creating the new app. As of the time of writing this blog post, we would need to access this by going to the preview maker portal at https://make.preview.powerapps.com.

To start creating the new app, click on the “+ New app” command bar button and select Model-driven from the drop down menu.

This will pop up the create model driven app from blank window, where we can select to use the Modern app designer (preview) or the Classic app designer. To start with the Modern app designer, select that choice, and click Create.

Next we will need to give the app a name, and an optional description, and click on the Create button.

After a few seconds the new app will be created, and we can start adding pages. There are three different types of pages that can be created, these are table based view and form, dashboard and custom (which is currently in preview). The animated image below shows you the three options.

We will start by selecting the table type, once selected you will have the option to select the appropriate table or tables that you want to add to your app, and with an option to add these pages to your site map as well.

When you click on the add button, you will be able to see a preview of your app directly from the designer window, basically a preview of what you app would look like. The image below shows you the preview window. You will notice that the center area is the preview, and on the left hand side we see the tables that were added to the app.

The preview area, not only shows you the way the app looks, but allows you to change the layout so that you see how the app will look in responsive design for different devices.

You will also notice the section to the left that is expanded to show the data tables, which contains links to the pages and navigation. This first link shows you the tables, dashboards and custom pages that make up your app, while the second link shows you the site map. These were covered in additional detail in a previous blog post.

New Model-Driven App Designer

Let’s go ahead and add a custom page. Under the pages left hand navigation area (or from the command bar), click on Add page, and select the Custom (preview) option. Once selected you will have the option to create a new custom page or use an existing custom page that was previously created. In our case, since we don’t have an existing custom page, we will Create a new custom page and give it a name.

Once we enter a name, this will open a new designer, and we can start working on the new app. I have added to the app a couple of galleries and commands so that we can see how this looks and works in our model-driven app. The image below shows the app that we created. Once you are satisfied with the app, click on the Save button and then publish it.

Close the custom page, and then go ahead and Save and Publish the Model-driven app that you created. The animated image below shows the end result of the custom page inside the model-driven app.

To learn how to navigate between your Canvas app and the model-driven app, you can read more about it in the following Microsoft Docs page : https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/page-powerfx-in-model-app

Custom pages can also be available by calling them from JavaScript within the Model Driven App by using the Xrm.Navigation.navigateTo function and providing a page type “custom”, and providing the name of the custom page (canvas app). You can then open the custom page inline or as a centered dialog. The following Microsoft Docs page includes samples on how to open this page: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/navigate-to-custom-page-examples

Command Bars using Power FX:

Next, we will take a look at using Command Bars. We will use the same app that we already created, and add a command bar button that will use Power FX to show/hide the button as well as a custom function that will execute on the click of the button.

In order to start using the new Command functionality, we first need navigate to the page (table in this case) that we want to work with, and select the Edit command bar (preview) option by clicking on the more options to the right of the table name and selecting that option as shown in the image below. This has to be achieved from the Pages navigation pane.

This will pop up a dialog where we have to select what command bar we would like to customize. There are four available options to select which include the Main grid, Main form, Subgrid view and Associated view. The image below shows these options.

Let’s go ahead and select Main form. When the Commands page open, we will see a view that contains all of the existing command bar buttons that are available for the table within the Main form. At this point in time (as this is still in preview, and we don’t know the exact timeline of release), modifying the existing buttons is not currently supported, so any customizations that is needed for this, will have to be done using Ribbon Workbench. The image below shows you the Main form Command Bar before we have added any additional buttons.

Now let’s go ahead and create a new command. We will create a simple command that is called Calculate Credit Limit which when clicked will multiple the number of employees in the company by 10,000, and will set it to only be visible when the number of employees contains data.

To start creating a new command, we click on the new Command button on the top of the left navigation pane.

Once we click on the new command button, we will see that a has been created. We can move the command (using drag and drop) within the Main form to place it in the appropriate location, however this can only be done for new commands, and not the existing ones. Let’s provide the new command some of the properties, such as the Label, Icon to use and the Tooltip text.

Next, we would like to set the functions for the Action that will be performed when the button is clicked as well as the Visibility of the button. On the right Command Pane, the last two options are Action and Visibility. The Action selection has two options: Run formula and Run JavaScript.

If we use the Run JavaScript option we can provide the name of the library and the name of the function to call when the button is clicked. This is more of a legacy type of action which might be used in the future for enabling the legacy buttons. The Run formula allows us to Run Power FX code when the command is clicked.

We can use the Patch function together with the Self.Selected.Item together in order to update the Credit Limit, and then compare the Number of Employees to Blank to control the visibility of the button. I am still working a few glitches as to what is working and what is not when it comes to Power FX for commanding, but the code below is working properly.

On Select:

Set(TotalCredit, Self.Selected.Item.’Number of Employees’ * 10000);

Patch(Accounts, Self.Selected.Item, {‘Credit Limit’: TotalCredit});

Visible:

Self.Selected.Item.’Number of Employees’ <> Blank()

The following Microsoft Docs page provides some samples on using Power Fx for commands in the Model driven apps: https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/commanding-use-powerfx

Now, let’s look at the end result after adding the button and publishing the app commands.

I hope that this blog post/article provided you with some insights as to what is coming in the new future.

The post Custom Page and Command Bars in Model-driven Apps appeared first on Aric Levin's Digital Transformation Blog.

The screenshot below shows the error message that we were getting.

After further investigation and with the help of our PFE, we found out that the issue was related to a change that Apple incorporated on devices with iOS 14 installed. This change was not allowing cross-website tracking which was enabled in previous versions of iOS.

To enable this, and allow embedded Canvas Apps to run on iOS 14 devices, we needed to change the setting below.

Once this change is done, navigate back to the Embedded Canvas App in your Dynamics 365 App or Power App and you should be able to see that you Canvas app is loading.

A special thanks to Aaron Richards, our Microsoft PFE for helping troubleshoot this issue.

The post Fix Embedded Canvas App error in iOS 14 devices appeared first on Aric Levin's Digital Transformation Blog.

This seems to be straight forward. The security is handled within our Dataverse environment, and users that do not have Read privilege would just not see the data, and I could control the look and feel within the Canvas app so that the result looks good to either user.

The screenshots below show the sample of how this should look like to users with the privilege and without.

Full Privileged User:

Limited Privilege User (with No Access to Project Members):

This looks good, but unfortunately this is not the end of the post. Actually, what ended up happening is that when I opened up the form using the less privileged account, I would see the following error:

The error makes sense, you don’t have privilege to see these records. I know this, but why are you displaying the error message.

So further analysis determined that this is the way that I load up the records into my Canvas App. I can load the records using the Data Source directly, in my case Projects and Project Members, or we can load the records into a local collection, and then manipulate the data if needed and display the data to the user as ProjectsCollection and ProjectMembersCollection. The source code below, shows the option of using a Collection.

Since we needed to manipulate the data, the second option made more sense, but now this error. To resolve this issue we first enabled Formula-level error management in the Settings area of the app.

Next we need to add code to handle the error message, so that we display something a little cleaner or maybe not at all.

We modified the code to include the IfError function and show a notification that the user does not have privileges to see the data.

We were also able to hide the completely from the user by setting the length of display to 1 millisecond.

So, the verdict is if you are using Collections that need to retrieve data from a data source, and your users might not have privileges to them, make sure that you add error handling code to that, because you Canvas app will not handle this automatically.

Adding a shoutout to Hardit Bhatia on his blog article on custom errors in Power Apps:
How to create custom errors in Power Apps! | Hardit Bhatia: The Power Addict

The post Handling Missing Dataverse Privileges in Canvas App appeared first on Aric Levin's Digital Transformation Blog.

In this post, I will show how we can use Power Automate Cloud flows to initiate an Azure DevOps Pipeline, and in turn use a Canvas App to call the flow that will call the Azure DevOps pipeline.

There are a few prerequisite steps that must be done, and you might already have done them, but I would like to review them again in case they have not been completed.

In order to call the Azure DevOps REST API we need to have a Personal Access Token. That can be acquired by going to our Personal Account Settings, and selecting Personal access tokens as shown in the image below:

If you already have a Personal access token, clicking on the above link will show you the list of available tokens, but if you don’t you will see a screenshot saying that you don’t have a personal access token yet, and you can click on one of the New Token links to create a New Access Token.

You will need to give your Personal access token a name, specify the organization and expiration date, as well as the Scope of the token. For the purpose of this demonstration, I have given Full access, but you can also provide a custom defined scope, which lets you determine whether you want to provide Read, Write and Manage access to the different objects that make up the API.

Once you click on the Create button, you will see the Success notification showing you the Personal access token, and an icon that allows you to copy the token to the clipboard. It is important to copy it and store in a safe place, as once the window is closed, this token will no longer be accessible.

Not that we have the token, we will need to convert it to base 64, so that it can be used in our HTTP call in the flow, passing it as a Basic Authentication token. This can be done by using Git Bash or other utilities that allow you to convert to Base 64. Open Git Bash, by clicking on Start -> Git and then selecting Git Bash.

Once Git Bash is opened, you will need to enter the following command in the Bash window:

$ echo -n :[PERSONAL_ACCESS_TOKEN] | base64

You will need to replace the [PERSONAL_ACCESS_TOKEN] with the real access token that you copied earlier. The following screenshot (with some blurring) shows the Git Bash command.

Copy the result into Notepad++ or another text editor, as you will need it at a later time.

The next thing that we will need to get is the Pipeline Id that we are going to call. Navigate to Azure DevOps and click on Pipelines. This will give you the list of Pipelines as shown in the image below.

Click on the Pipeline that you want to execute from your Cloud flow or Canvas app, and let’s examine the Url. You will notice that the end of the url contains a definition Id. That is the Pipeline Id that will will need to use in order to execute the Pipeline.

Next, we will be creating a table in Dataverse, so that we can store the executions. Although not required, I like having a log of who executed these processes and when. Mostly for historic purpose.

The columns that I added are the following, but additional columns can be added.

Let’s go ahead and look at the flow that I added to the Solution. I start the flow using a Power Apps trigger, and initializing three variables containing the Pipeline Name, Pipeline Id and the User Email that is executing the flow. The image below shows these steps

You will notice that each of the variables that are being initialized use the “Ask In PowerApps” option, so that the value is initialized from my Canvas App. The next step is to call the REST API using a HTTP Post request. The url below is the Microsoft Docs url containing the information of the Pipelines REST API:

https://docs.microsoft.com/en-us/rest/api/azure/devops/pipelines/runs/run%20pipeline?view=azure-devops-rest-6.1

Within the document, it details the actual url to be used in the HTTP request, which is:

https://dev.azure.com/{organization}/{project}/_apis/pipelines/{pipelineId}/runs?api-version=6.1-preview.1

You will notice the HTTP post request below. The blurred section contains the organization and project from DevOps within the URI parameter, and in the Header, we paste the result that we go from the conversion of our Personal access token to base 64 in Git Bash.

At this point, the execution will commence, and the final stage that I demonstrate below are really optional, but a nice to have. If I would like to write the results back to my table in my Dataverse instance, I can retrieve the Build Id and Build Url from the result of the HTTP. I can do this by using a Parse JSON request, which will give me the properties that I need.

The Parse JSON contains the Body from the HTTP request, and then a copy of the Schema. I can run the flow before adding the last two steps, and then get the JSON result to be pasted in the run results of the Cloud flow HTTP action step, by pasting them in the Generate from sample below which will generate the Schema.

You can find the actual needed schema for this step pasted below.

[Parse JSON Schema]

Finally the last step is to add the record to Dataverse. We have the Pipeline Id, Pipeline Name and User Email being passed from the Canvas App. The Build Id and Build Url are the results from the Parse JSON request, which are basically body(‘Parse_JSON’)?[‘id’] and body(‘Parse_JSON’)?[‘url’].

Once the flow is execute we will see a new record in my Dataverse instance.

We will also see that the Azure DevOps pipeline is being initialized

Now, in order to execute this, I create a Canvas App, that will have all the Pipelines that are part of my process. This might be temporary pipelines are automated and scheduled pipelines. The app is shown below

When you click on the Run Pipeline button under each of the pipelines, it will call the Power Automate Cloud flow by using the following Canvas App Command.

InitializeDevOpsPipeline.Run(“PublishExportUnpackGit”, 3, User().Email)

This can be of course enhanced further, but for an initial execution of the pipelines this is a great help. It is the first step in beginning to have an ALM. Like always, I hope this was helpful to some of our community members.

I also want to give a special thanks to Paul Breuler for Microsoft for helping me out in some of these challenges.

The post Calling an Azure Pipeline using a Cloud Flow or Canvas App appeared first on Aric Levin's Digital Transformation Blog.

The first part is to create a new project, which requires as one of the fields the name of the account on the project. When the project is saved, the primary contact on the account record is automatically added as a Project Member. The Image below shows the creation of the new project.

When the record is saved, a Cloud Flow is being called that retrieves the Primary Contact on from the account record, and creates the First Project Member on the Project. It also marks the member as Primary, so that it cannot be deleted from the App. The image below contains the steps in the Cloud Flow.

After the flow is executed, we will be able to see the project member that was added within the project record, as shown below.

Next, let’s go ahead and look at the Canvas App. When we load the Canvas App, we have the ability to select the project that we want, and then once the project is selected, we will see the Project Members in the gallery (as shown below). You will notice that there is a single member that is visible, as this is a new project that was created, and the default member was added to the project.

You will notice the + button above the gallery. Clicking on the Plus button will allow us to add a new Project Member. The action will show a new section on the form which will request a Contact, Date Added and Percentage, as shown below. The Contact field is filtered to only show members that have not yet been added to the gallery.

Once the member is added, I will be able to see the two members in my gallery. I also see that the Save button is disabled, because the total membership percentage is not equal to 100%. I will add one more member for the purpose of the demo. I now see that I have three members with a total membership percentage of 160%

In order for me to Save this record, I will have change the percentages so that they are equal to 100%. Let’s go ahead and do that, and then Save the record to see the results.

Now, let’s go back to the canvas app, and remove one of these members. You will notice that Paul Cannon, which is the Primary Member does not have a remove icon, because that is the primary member. All other members, we can delete. Let’s go ahead and delete Nancy Anderson, which has a 30% membership. The member is highlighted as removed. In order to save the changes again, we have to update the percentages to match 100%, and then save the changes. The image below shows the record to be removed and the updated percentages.

Now let’s go ahead and save the record, and look at the results in the Model-Driven app. You will notice that I still see the three Project Members, but that is because I am showing both Active and Inactive Users. The member that was removed from the group is showing a date value in the Member Removed on, which allows me to keep track of the members added and removed, and a history of such.

Next, let’s go ahead and look at the implementation. First, when the form loads, we select a project and click on the Go button. The OnSelect method of the Go button contains logic to load the projects into a collection, and load contacts into a collection removing the contacts that are already added to the project.

Set(SelectedProject, cmbProject.Selected.Projects); 

// Add Project Members to the Gallery
Clear(ProjectMembers);
ForAll(
    Filter('Project Members', Project.Projects = SelectedProject, Status = 'Status (Project Members)'.Active),
Collect(ProjectMembers,
{
    ProjectMemberId: 'Project Member',
    ProjectId: Project.Projects,
    ContactId: Contact.Contact,
    Name: Contact.'Full Name',
    DateAdded: 'Member Added On',
    Percentage: Percentage,
    IsPrimary: 'Is Primary',
    IsDeleted: false
})
);

// Add All Contacts to the Collection to allow adding of new contacts
Clear(AvailableContacts);
ForAll(Filter(Contacts, Role = 'Role (Contacts) Decision Maker'),
Collect(AvailableContacts,
{
    ContactId: Contact,
    FullName: ''Full Name',
    IsAvailable: true
})
);

// Mark the Contacts that are already in the Project Members Gallery as not available
// so that they do not appear in the Contacts Combo Box
ForAll(ProjectMembers,
    Patch(AvailableContacts,
        First(Filter(AvailableContacts, FullName = Name)),
        { IsAvailable: false })
        );

Set(hasError, false);

The plus button, only sets an Action Type value to Add, which in turn displays the entire list of controls that are visible to allow addition of a new record. Once clicked I can see the Add Project Member, Contact, Date Added, Percentage fields, and the Accept and Cancel icons.

The Contact Combo Box, has a Filter to only show Available Contacts, using the following line:
Filter(AvailableContacts, IsAvailable = true)

Clicking on the check button (Accept), will add a new Project Team Member into the collection, and remove that member from the list of available Contacts.

If(IsBlank(cmbContact.Selected.FullName),
   Set(hasError, true), 
    Collect(ProjectMembers,
    {
        ProjectId: GUID(SelectedProject),
        ContactId: cmbContact.Selected.ContactId,
        Name: cmbContact.Selected.FullName,
        Percentage: sliderPercentage.Value,
        DateAdded: dtpDateAdded.SelectedDate,
        IsPrimary: 'Is Primary (Project Members)'.No,
        IsDeleted: false
    });
    Patch(AvailableContacts,
        First(Filter(AvailableContacts, ContactId = cmbContact.Selected.ContactId)),
        { IsAvailable: false }
        );
    Set(hasError, false)
);

Reset(cmbContact);
Set(ActionType, "");

Finally, for the Save action, I loop through all the Project Team Members, and either create a new member (based on the Project Member Id being blank), or update an existing record. The update patch can either update the percentage of the project or deactivate the project.

ForAll(ProjectMembers,
    If (IsBlank(ProjectMemberId),
        // Create New Record
        Patch('Project Members', Defaults('Project Members'),
        {
            Project: LookUp(Projects, Projects = ProjectId),
            Contact: LookUp(Contacts, Contact = ContactId),
            'Is Primary': 'Is Primary (Project Members)'.No,
            'Member Added On': DateAdded,
            Percentage: Percentage
        }),
        // Update Existing Record
        Patch('Project Members', LookUp('Project Members', 'Project Member' = ProjectMemberId),
        {
            Percentage: Percentage,
            'Member Removed On': If (IsDeleted, Today(), ""),
            Status: If (IsDeleted, 'Status (Project Members)'.Inactive, 'Status (Project Members)'.Active),
            'Status Reason': If (IsDeleted, 'Status Reason (Project Members)'.Inactive, 'Status Reason (Project Members)'.Active)
        })
    );
);

Select(Button2);

Below you will also find a video of this blog and I will add the source code to my github repository as soon as I can.

The post Adding Membership selections to Canvas Apps appeared first on Aric Levin's Digital Transformation Blog.

Let’s go ahead and start by creating a new tablet-form factor canvas app, and use the blank app template. We can specify the name, icon and screen orientation. In this case, I set it as Landscape orientation and set the size to 16:9 (Default). I also added the header to make it look a little prettier.

We will be using Accounts and Contacts, that I added via the Import Sample Data wizard in my Dataverse environment. We will start by Inserting the first gallery. This will be used for accounts. This gallery should be scrollable, so the gallery that will be used will be Blank flexible height gallery, which can be inserted from the Insert tab or menu.

Once we inserted the gallery, we can name it, resize it and place it where we want on the screen. I left some space between the banner and the top of the gallery for adding some icons and labels later. I will now go ahead and connect to my accounts data, by clicking on the connect to data link inside the gallery.

This will pop up a dialog with available data sources. Expand the entities area, and select Accounts from the list of entities as shown in the image below.

You will now notice on the properties panel that the Data Source property has been set to accounts, as well as in the Items property in the function bar.

Let’s go ahead and click on the tree view to add a few labels that will display the different columns of this table. To add the first item, we can click on the Add an item from the insert menu inside our gallery, or insert from the Insert tree. Let’s select a text label. It will default to the Account Name column in our accounts table.

Before we add a few more columns, click on the area surrounding the Account Name column that we added as shown in the image below.

We might want to reconfigure the Template size of the gallery, so that the spacing is not too large. I will change the template size to 50, and change the height and top properties of the label accordingly so that it looks a little cleaner.

We can now add a few more columns, either by copied the first column that we added, or adding a few more text labels from the Insert menu. The image below shows the completed gallery.

Now that we are done with the Parent gallery, we can go ahead and create the child gallery, in our case the Contacts gallery. Before we insert the Contacts gallery, let’s expand the Template size of the parent gallery to 100. This will allow us to maneuver in the child gallery. While having the first row of the gallery selected, click on the Gallery icon on the Insert tab, and select Blank Vertical as shown in the image below.

Similar to the previous gallery, let’s go ahead and connect to a data source and insert a few items to the gallery. Click on the connect to data, expand entities, and select the Contacts entity. Then click on the Add an item for the insert pane and select a text label. We can expand the Full Name label a little and move it down and remove the scrollbar, but we would still see a little bit of a mess (shown below).

This doesn’t look appropriate as it is showing all the contacts under each account. Let’s first fix that so that we can continue customizing the gallery. We can do this by adding a filter to the Items property as such:

Filter(ThisItem.Contacts, statecode = ‘Status (Contacts)’.Active)

After adding the line above, I added the email address field to the Contacts, and the result is that I can see all the results of the parent and child galleries, as shown below.

Now, the next thing is that I don’t want to show all the items expanded all the time, but expanded or collapsed based on a click on an expand/collapse icon. I will add two icons to my accounts gallery (a Chevron Right and a Chevron Down). The Chevron down will show when the child gallery is expanded, and the Chevron right will show when it is collapsed.

I will set the visible properties for the icons as follows:

• Chevron Down Visible Property: ThisItem.IsSelected
• Chevron Right Visible Property: !ThisItem.IsSelected // Notice the ! before the ThisItem

We should now place them on top of each other.

Finally, we will select the Contacts child gallery, and will set the Visible property to ThisItem.IsSelected.

This will collapse all of the items with the exception of the selected one. We can change the selected item to see the items that are available under it. The animated gif below shows the final result.

I hope this post below was helpful for anyone who is beginning creating Canvas Apps. I will follow up on this post with a few extras including how to Expand All Collapse All Sorting and Additional Types of filtering. Wishing everyone in the community a Happy New Year.

The post Creating Nested Galleries for Canvas Apps appeared first on Aric Levin's Digital Transformation Blog.

After further investigation, the only requirement from the business was to check whether particular users belonged to groups, and there was no immediate requirement of having the AD Members stored in our Dataverse environment, especially due to the fact that we would have to continuously sync between AD and Dataverse.

I offered the business an alternative. What if you had an application where you could specify the name of the group and it would show you all of the users that belong to it, or even better, specify the user and it will let you know all the group the user belongs to. This seemed to be like a no-brainer, and from our point of view an easy solution especially since we finally got access to use the Graph API (for Users and Groups only).

There are other alternatives to this of course, but this was going to work for us, especially since individual users did not have access to Graph API, but we had an App Registration with Client Id and Secret.

The following section briefly explains how to set up permissions to Azure Graph Api. Login to Azure and click on App Registrations. You will need to set up the API permissions and the Client Certificate, and finally copy the information so that you can use it within your flow.

Once you get into the New App Registration and given it a name, click on the Api Permissions, and select Microsoft Graph, and choose the Application type (and not delegated). You will need to add two sets pf permissions: Group.Read.All and User.Read.All, and then make sure that you grant consent, as these permissions require admin consent.

Next, set up the Client Secret. Click on the Certificates & secrets, select the option to add a new Client Secret. You can set the Client secret to expire in 1 year, 2 years or to never expire. After you have created the Client Secret, copy it into notepad or another program. You will need this for later. Once you leave the App Registration, you will not be able to retrieve the Client Secret, so make sure that you store it for later use.

Now that you are done, go back to the Overview page of your app registration. You will need to copy the Application (client) ID and the Directory (tenant) ID, the same way you copied the Client Secret before. The following image shows the information on the Overview page.

Since I don’t really like designing stuff, and prefer to take predesigned templates, I took that Org Browser Canvas App template that is available from the Create App page.

The app contains more features then what I was looking for, so I removed it to a minimal so that it just contains the home screen and search screen .

At the end, I had two screens. Let’s quickly go over these. I named the app AD Search. My home screen contains the title and logo, and two buttons: User Search and Group Search, which both redirect to the Search Screen after Setting the parameter action type either Users or Groups.

The View my profile at the bottom is still in progress. I have not yet decided what to include there.

When the Search Screen loads, it clears any previous search results from the results collection, so it is always a new search by calling the Clear on the ADSearchResults collection.

The form displays a search control, and when the search text is entered, and the search icon is clicked, it calls Power Automate flows to retrieve the user matching the email address or the groups matching the display name of the group.

The following screenshots shows both scenarios.

If we look at the source for the search icon OnSelect function, it will show us that we are adding the results from the GraphUserSearch flow or GraphGroupSearch flow into a new collection called ADUserResults.

If (actionType = "Users", 
ClearCollect(ADUserResults, GraphUserSearch.Run(txtInputSearchUser.Text, actionType)), 
ClearCollect(ADUserResults, GraphGroupSearch.Run(txtInputSearchUser.Text, actionType))) 

The Gallery Items points to ADUserResults, and then we show the Initial, DisplayName and Title of each person in the results of each gallery item.

Now, let’s look at the logic for Power Automate, but before in case anyone is not aware, I would like to introduce Graph Explorer which can help out with configure Graph Api requests. The Graph Explorer can be accessed via: https://developer.microsoft.com/en-us/graph/graph-explorer.

Both flows start the same way, and we can combine both of them into a single flow, but I split them for simplifying this article. Our trigger for this flow is Power Apps, and then we initialize for variables of type string. These variables are the Search String (containing the value of the search string from the Canvas App), the Action Type (containing the action from the Canvas App, which can be Users, Employees, Groups or the type of search that we will be performing), the Query String and the Search Results (containing the placeholder for the results). The image below illustrates this.

The next part is we set the variable Query String. This will contain the Graph Api query string that will be called, as shown in the image below.

We can take that same query string and test it out in Graph Explorer to make sure that it works before adding it to the flow. Next, we need to call the Api, using a GET request and passing the Query string that we specified in the URI parameter. We add a contentType header with a value of application/JSON, as our results will be in JSON format.

We need to provide the authentication method to retrieve the results. As we created an App Registration using a Client Secret, we will use Active Directory OAuth. This is where we will need to information that I previously mentioned you should write down.

We will provide the Directory (Tenant) Id, the Audience, the Application (Client) Id and the Client Secret. The image below illustrates the HTTP request.

Finally, we need to store the results in the variable we instantiated earlier (called Search Results), and then pass the Response back to the Canvas App using the Response action (of the Request Connector).

The value that is entered in the SearchResults variable is the value of the body of the previous step or:
body(‘HTTP_Graph_Users’)?[‘value’]

We enter that value in the Body of the response. We also need to specify the Response Body JSON Schema, which will contain the elements that will be returned to the Canvas App. The sample below shows this text.

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "id": {
                "type": "string"
            },
            "displayName": {
                "type": "string"
            },
            "givenName": {
                "type": "string"
            },
            "surname": {
                "type": "string"
            },
            "mail": {
                "type": "string"
            },
            "jobTitle": {
                "type": "string"
            },
            "userPrincipalName": {
                "type": "string"
            }
        },
        "required": [
            "id",
            "displayName",
            "givenName",
            "surname",
            "mail",
            "jobTitle",
            "userPrincipalName"
        ]
    }
}

When we want to use the same logic for Querying the Groups, the flow is similar but there are a few options that are changed. After the initialization of the variables, we need to first query the Graph Api to get the Id of the group that we are querying, and only then can we get the members of the group. This flow contains two calls to the Api. The image below illustrates the calls to the Api.

The solution files has been posted to my github repository:
ariclevin/MSGraph (github.com)

A You Tube video is available as well:
https://youtu.be/DqqpDmdaVxc

Special shoutout to Elaiza Benitez for her episode on Microsoft Graph API authentication on What the Flow:
How to authenticate as an application with Microsoft Graph API (youtu.be)

The post Calling MS Graph API from Canvas Apps by using Power Automate and HTTP Request appeared first on Aric Levin's Digital Transformation Blog.