Using SARIF Viewer to read the static analysis results generated by Microsoft.PowerApps.Checker.PowerShell module

In the last post, we saw how we can use the Microsoft.PowerApps.Checker.PowerShell module to analyze the Solution (Unmanaged and Managed – Online or On-Premise) outside the PowerApps Maker Portal.

https://nishantrana.me/2019/07/12/using-the-powerapps-checker-powershell-module-to-validate-the-solution/

The reports generated by the tool are in SARIF format i.e. Static Analysis Results Interchange Format (JSON based) standard for the output format of the static analysis tool. This format originated at Microsoft.

To view the result, we can use the below tools

For Visual Studio :

After installing the extension, navigate to Tools à Import Static Analysis Log files for Error List à Import SARIF file and select the result file generated.

It will list down the details in the Error List Window as shown below.

For Visual Studio Code :

For Visual Studio Code, after installing the SARIF Viewer, simply open the file

Below is how the result is displayed in the UI inside Visual studio code.

Hope it helps..

Using the PowerApps checker PowerShell Module to validate the solution

Using PowerApps Checker PowerShell Module we can perform the solution check functionality from outside the PowerApps Maker Portal. This can be useful for automated build and release pipelines. Apart from that some of the notable capabilities of the module include

  • Support for both managed and unmanaged solution.
  • Support for On-Premise.
  • Support for more than one solution at a time.

To get started à

Open the PowerShell (as administrator) and install the module

  • install-module Microsoft.PowerApps.Checker.Powershell

Next, we need to register an Azure Active Directory application in a tenant with PowerApps or Dynamics 365 licensing, even if it is on-premise environment (solution) against which we want to run it.

  • Login to Azure Portal

https://portal.azure.com

  • Click on New registration to register a new application

  • Provide the below details

Redirect URI

  • Type: Public client (mobile & desktop)
  • Redirect URI: urn:ietf:wg:oauth:2.0:oob

Copy the values of Application id and Directory (tenant) Id which we will use later and click on View API Permission to give the required permission to the app.

Click on Add a permission (we’d see Sign and read user profile added by default)

API level permissions to the PowerApps-Advisor first party Microsoft AAD application

  • Application permissions to Analysis.All

Permissions à

PowerApps solution checker uses Solution checker rule set. Here we are getting all the rulesets available passing our tenant’s id.

  • $rulesets = Get-PowerAppsCheckerRulesets -TenantId ‘290055c6-7eb1-4ec4-93e6-81f053d13f76’

We wil be using Solution Checker rule set here.

  • $rulesetToUse = $rulesets | where Name -EQ ‘Solution Checker’

Now let us run it against the Solution Zip file as shown below

  • $analyzeResult = Invoke-PowerAppsChecker –ClientApplicationId ‘48131848-3b81-44f7-a999-d8362b391f25’ –TenantId ‘290055c6-7eb1-4ec4-93e6-81f053d13f76’ –Ruleset $rulesetToUse –FileUnderAnalysis “C:\PowerApps\Test_1_0_0_1_managed.zip” –Output “C:\PowerApps\Result” -Verbose

Give the required consent

We can see the results download at the path specified

Result is in JSON format

IssueSummary to get the quick overview

Get all the details here

https://docs.microsoft.com/en-in/powershell/powerapps/overview?view=pa-ps-latest

Hope it helps..

Using PowerApps Solution Checker from the PowerApps maker portal

The PowerApps Solution Checker feature released for general availability on May 2019, can be used to perform static analysis of the Unmanaged solution for components like plugin, web resources, custom workflow activities and provide guidelines and recommendations around the issues found.

To get started à

Sign in to PowerApps maker portal

https://make.powerapps.com/home

Select the Solutions in the left navigation pane and click on Install to install the Solution checker.

Click on GET IT NOW from the AppSource, specify the instance and the PowerApps Checker Solution will be installed in that Instance.

This will install the PowerApps Checker solution for the selected instance.

After the installation is done, we’d see the Solution checker menu enabled for the unmanaged solution.

Click on Run to run the test

We can see the results in the portal and can download the same as shown below.

Result of running it against another solution in which we are still using Xrm.Page object model à

The results will be available in both Excel and CSV format on the download

csv à

Excel will include a report as wellà

In the next post, we will see how to use the PowerApps Checker PowerShell Module to validate the solutions.

https://nishantrana.me/2019/07/12/using-the-powerapps-checker-powershell-module-to-validate-the-solution/

Hope it helps..

How to – Add Style to Custom Component in PowerApps Component Framework

Kindly refer the previous post, here we will be adding style to the component created in the post.

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Let us continue with our previous sample component and try adding style to it.

  • Open ControlManfiest.Input.xml and specify the CSS file to be referred.

  • Uncomment the CSS tag in the manifest and create a new folder named CSS and place the CSS file there.

  • Edit the index.ts file and add the class to the label

  • Edit the CSS file

  • Edit the version number in case of updating the existing control in ControlManifest.Input.xml

  • Followed by the build command
  • npm run build


  • After the successful build, we can see the CSS added in the out folder for the component


  • Run the MSBuild command to generate the new solution zip files



  • Import the managed solution.
  • Open any of the existing contact records, we can see the style is applied to the control.

Hope it helps..

Step by Step – Create a very simple PowerApps Custom Component to show the GUID of the record

Update – use context instead of Xrm.Page

https://nishantrana.me/2019/10/22/using-pcf-custom-control-builder-xrmtoolbox-plugin-to-update-existing-control-in-dynamics-365-powerapps/

Also,

https://nishantrana.me/2020/01/20/best-resources-to-start-with-power-apps-code-component-pcf/

Go through below articles to get a better understanding

Below is the quick step by step guide to get started (sort of Hello World example) 

  • Install NPM (that comes with Node.js)

https://nodejs.org/en/

http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi

  • Install Visual Studio 2017 or later or Download .NET Core 2.2 along with Visual Studio Code.
  • Create the new folder for the project, and in Developer Command Prompt for VS 2017 navigate to the folder and run the below command to create a new component project

pac pcf init

– -namespace <namespace for the component>

– -name <name of the component>

– -template <component type>


It adds the following files in the folder.


  • Next run npm install command to install the project dependencies.

  • Open the ControlManifest.Input.xml file created inside the folder created with the control’s name.

  • Here we have opened it in Visual Studio Code, for this simple example purpose let us not change the default values.
  • Open the index.ts which wherein we’d be writing code for our custom control

  • Add the following line of code to add a label control that will display that GUID of the record.

  • Run npm run build command to build the control

  • To test the control run npm start command

*Use ctrl + c è to terminate the job.

  • Create a new folder to hold the solution

  • Run the below command to define the publisher name and prefix and initialize the solution files creation

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

  • Run the below command to add reference to our custom control in the solution

pac solution add-reference – -path [path to pcfproj file]

i.e. reference of the below path.

  • This creates the file with extension cdsproj

  • To generate Zip File run the below command in the Developer Command Prompt for Visual Studio 2017
    • MSBUILD /t:restore
    • MSBUILD

  • This adds the Solution zip in the bin Debug folder.

  • To get both managed and unmanaged solution, update the cdsproj file

  • We can see both managed and unmanaged solution created.

  • Import the solution in Dynamics 365 CE and open any of the entity’s form. Here we have created a new text field named GUID in the Contact form and have set our custom control for that field.

For reference à

  • After publishing the changes, we can see the GUID being displayed in the form.

  • To update the control, change the version for it in the ControlManifest.Input.xml

Followed by

  • npm run build
  • msbuild
  • Importing the new solution file generated

In a nutshell below are the high-level steps à

1. Install npm

2. Install PowerApps CLI

3. Install Visual Studio 2017 or later

4. Create a new folder for the project.

5. Navigate to the folder in Developer Command Prompt and run the following command to create the component project

pac pcf init –namespace <component namespace> –name <component name> –template <component type>

1

6. Install the project dependencies using below command

npm -install

7. Update ControlManifest.Input.xml

8. Update index.ts

9. Build the project

npm run build

10. Use the below command to test the component

npm start

11. Create a folder for holding the solution zip and related files. Navigate to that folder and run the below command.

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

2

12. Add reference of the custom component in the solution

pac solution add-reference – -path [path to pcfproj file]

3

13. To create the Solution Zip File

MSBUILD /t:restore

MSBUILD

4

14. Import the solution file and use it inside Dynamics 365 CE.

lastly – Don’t forget to check the wonderful PCF Gallery

https://pcf.gallery/

Hope it helps..

Few improvements in new model-driven form designer WYSISYG Preview in PowerApps

Few months back I wrote about the features of the new model drive form designer in PowerApps.

https://nishantrana.me/2018/12/24/the-new-model-driven-form-designer-wysisyg-in-powerapps-for-model-driven-apps-dynamics-365-ce-preview/

There are few improvements done in it since then

For e.g.

  • Fields and Sections can now be selected and positioned.

Phone field:

Address Section:

  • Header and Footer are available now for customization.

However still there are few important features missing when compared to our classic form designer like

  • Sub Grid control are not available on the form for configuration.
  • No Business Rules or Form Properties dialog box.
  • No Enable Security Roles option
  • No field explorer or Relationship explorer so cannot create new fields or relationships.

The new model driven form designer looks promising, however we’d have to wait a bit more, before it can have all the expected (or some new) features added to it.

Hope it helps..

Implementing Multi-level approval using PowerApproval in Dynamics 365 CE

We recently had a requirement of multi-level approval in our Project. We thought of evaluating the PowerApproval add-on from Power Objects.

The add-on is powerful, feature-rich and allows us to easily configure our Approval logic and to track it as well.

Let us quickly see the steps to configure it and start using it.

Download the Solution and import it in the organization.

https://www.powerobjects.com/powerpacks/powerapproval/

After successful import, open the configuration page of the PowerApproval Solution and click Try or Subscribe, provide the required details to start using it.

The solution adds the following PowerPack area in the interface and the entities that we would be working with.

Suppose we want to enable the Approval process for Contract entity of Dynamics 365 CE, so we would open the Approval Entity Lists and create a new record as shown below using the schema name.

Save the record and click on REGISTER to enable the approval on the contract entity.

Next, we define the Approval Process by creating the record of that entity and defining it within the Approval Process Step related records.

Here we have created the Approval Process record named My Contract Approval and inside the Approval Process Steps sub-grid, we have added a new record named the First Step.

Step Number as 1 as it is the first step.

Approver type can be either user, team or the manager.

Here we have selected team for the first step.

For the second step, we have defined User – Test User as the approver.

This is how our approval process looks like

The users need to have the PowerApproval Admin
and PowerApproval User roles (part of PowerApproval solution), to design and work with the Approval process.

Next, we will customize the Contract form to add the PowerApproval web resource. (Insert a tab, and insert the web resource with 20 rows)

After publishing the changes, let us now create a contract record to see the approval process in action.

In the contract record, select the Approval Process and click on Submit for Approval. (The approval can also be triggered using workflow)

We can see the following update after submission, the field grayed out and status reflecting the current status highlighted in color.

Now let us login with the user who is the part of Test Team.

The user gets the option of Approving and Rejecting it and also to put his comments.

Let us select Approve and click on Submit. This updates the steps with appropriate status.

Now let us login with the Test User who is the final approval. As we can see the field is enabled again for this user and had grayed out for the previous step user.

Again, let us select Approve and click on Submit. The web resource refreshes automatically with the current status.

Similarly, we can have a situation where it is rejected in the first step by the approval and it being submitted again by the initiating user and then approved by the user and then in the final step of the approval again rejected. This is properly reflected in the web resource within our contract record.

When the final user rejects it in the last step, it cannot be submitted again by the user who initiated it.

Thus we saw how easy it is to configure and start using the approval solution PowerApproval in matter of few minutues.

The user guide à

https://www.powerobjects.com/guides/powerapproval

Pricing à

https://www.powerobjects.com/powerpacks/powerapproval/

The other options of implementing it could be by using the Approval Flows (although it won’t be as feature rich)

https://docs.microsoft.com/en-us/flow/modern-approvals

Hope it helps..

The new model-driven form designer (WYSISYG) in PowerApps for Model-driven apps (Dynamics 365 CE) Preview

The new model-driven form designer (Preview) has some nice features added to it like

  • Searching for fields in the form

  • Tree View showing visual hierarchy of the controls for quick view and navigation inside the form.

The icon also makes it easy to identify the data type of the field.

  • We can also check and configure how the UI would render for different type of client application

  • Property Pane for the type of control selected which allows us to quickly update the properties unlike selecting the field and then clicking on Change Properties which will open the dialog box.

Few things that we could not found are

  • Ability to select and position fields and sections.
  • Sub Grid control are not available on the form for configuration.
  • No Header.
  • Footer is available but we cannot add fields to it.
  • No Business Rules or Form Properties dialog box.
  • No Enable Security Roles option

  • No field explorer or Relationship explorer so cannot create new fields or relationships.

Get more details here

https://powerapps.microsoft.com/en-us/blog/introducing-the-new-wysiwyg-model-driven-form-designer-public-preview/

As Microsoft mentions it is just a start and they’d keep adding the remaining functionality, let us wait.

Hope it helps..

Embedding Canvas App on a Model-Driven App’s Form (Preview) – Passing list of related records as context

Similarly to passing the current record as context to the embedded canvas app, we can pass the list of related records as context.

Let us see how it works step by step.

Open the form for customization and insert\edit an existing Sub-Grid control and select Canvas App for the Add Control option.

Select the option Web for the canvas app. Here clicking on Customize will open the PowerApps studio for creating\editing the app.

Here View Name shows All Accounts the Default View selected in the Data Source section of the Display tab of the properties dialog box.

Clicking on Customize opens the PowerApps Studio as shown below. Here ModelDrivenFormIntegration is the special control which provides us the contextual data from our form.

Click on Edit, specify the layout and select from the available fields of the entity for the layout.

Go to App Settings à Advanced Settings and turn on the “Enable app embedding user experience”

Save the app in the Cloud, this will also publish the app.

This will auto-generate the App ID and auto-fill it in the Set Properties dialog box of the Sub Grid control.

Save and publish the form.

We can see our canvas app embedded in the Unified client interface as shown below in the right.

Also à

Hope it helps..

Embedding Canvas App on a Model-Driven App’s Form (Preview)

Login to Dynamics 365 CE, open any of the Entity’s form and either pick any of the existing single line of a text field or sub-grid control or add one to the form.

We will use Single Line of Text if we want to pass the current record as context and Sub-Grid if we want to pass the list of related records as context.

In this post, we will first see how to pass the current record as context.

For this let us open Lead form and select Topic field which is a single line of text for customization (Change Properties).

Select Controls tab, and click on Add Control and choose Canvas app.

Here Entity name is auto-populated by the selected Entity and although it seems editable, changing it will have no effect.

App ID is auto-generated on creation of canvas app.


Let us click on Customize to create our canvas app. This opens the PowerApps Studio.

ModelDrivenFormIntegration is the special control which provides us the contextual data from our form.

Clicking on Edit for the Fields property for the gallery1 control opens a pane that shows all the fields from our lead entity.

Let us change the Layout to Title, subtitle, and body and set Body1 to the description, Subtitle1 to Fullname and Title2 to Subject.

Now before saving and publishing the app, go to File à App Settings à Advanced Settings

Set Enable app embedding user experience as On.

Save the App to the Cloud. This also publishes the app.

Back in our form editor, we can see the App ID auto-populated

Select Web option for the Canvas App in the Controls Tab.

Click on Ok to close the form, followed by Save and Publish.

We can see the Canvas App in the form in the Unified Client Interface

Although the app doesn’t make much sense, it gives an idea on how to configure things for embedding it within form. This feature really opens up infinite possibilities.

Get all the details here

https://powerapps.microsoft.com/en-us/blog/enrich-your-model-driven-forms-with-embedded-canvas-apps-public-preview/

https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/pass-current-embedded-canvas-app

https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/embed-canvas-app-in-form

Hope it helps..