Month: July 2020

How to use a sample PCF component in your Power Apps

If you are PowerApps developer and wanted to extend the capabilities by bringing in third party or community driven PCF (Power Apps Component Framework) components, you can find lot of samples from the Power Apps community website PCF.gallery, Power Apps Community and from Microsoft for Model driven and Canvas apps.

Sample components from Microsoft

If you are new to component framework, I recommend going through the documentation from the following link:

https://aka.ms/pcfdocs

The PowerApps component framework enables the developers to create code components for model-driven and canvas apps. I have recently used a control from the PCF gallery community site, let’s see how to package and deploy a sample control to the Power Apps environment and then consume it on your Canvas app. There are two methods to deploy a code component:

  1. Import the solution in to CDS
  2. Power Apps CLI

To follow along the blog post, have the following available and installed on your environment

  1. Install Power Apps CLI and Node.js
  2. Access to Power Apps CDS Environment
  3. Developer Command prompt for Visual Studio 2017 or 2019
  4. Power Platform Administrator
  5. Enabling the PowerApps component framework on canvas applications

Method 1: Import the solution in to CDS:

For this post, I have chosen the React Face pile component from Microsoft Power Apps samples github repo. Follow the steps to create the solution ZIP file to be imported on the solutions gallery. If you already have the solution package, directly proceed to the Step 10.

Step 1: Download as a ZIP package and extract to a folder on your computer or git clone from the Microsoft Github repository. I have downloaded on C:\ PCF\Controls\sample-controls

git clone https://github.com/microsoft/PowerApps-Samples.git

Step 2: Open the Developer command prompt and navigate to the folder on the computer where you have downloaded the React Face pile component using the cd folder-path-react-facepile-component command e.g folder-path: C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl

Step 3: Install all the required dependencies by running the command 

npm install

Step 4: Create a folder (e.g ReactStandardControlSolution) on the root of the React face pile component project (e.g C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl) either manually or using the command mkdir ReactStandardControlSolution

Step 5: Navigate to the created folder by using the command cd ReactStandardControlSolution

On your command prompt, you should now be on e.g C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl\ ReactStandardControlSolution

Step 6: Create a new solution project using the following command. The solution project is used for bundling the code component into a solution zip file that is used for importing into Common Data Service.

pac solution init --publisher-name developer --publisher-prefix dev

The Published-name and publisher-prefix values should be unique to your environment

Step 7: Add the reference using the command shown below. This reference informs the solution project about which code components should be added during the build. The path should to the root of the downloaded react face pile component and not to the newly created solution folder

pac solution add-reference --path C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl\

Step 8: To generate the ZIP package, enter the following command

msbuild /t:build /restore

Step 9: The generated ZIP file will be available on \bin\debug\ folder once the build is successful

Note: Make sure there is no spaces on the folders you create to avoid deployment issues

Reference:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/use-sample-components

Step 10: Now it’s time to import the solution to the solutions gallery by signing into Power Apps and select Solutions from the left navigation. On the command bar, select import and then browse to the Zip file solution created from the above steps. After the solution is imported successfully, the solution is available to use in Power Apps canvas and Model driven apps.

Reference: https://docs.microsoft.com/en-us/powerapps/maker/common-data-service/import-update-export-solutions

Let’s see the next method to deploy the code component

Method 2: Power Apps CLI:

In the previous method Power Apps CLI was used to generate the solution package and then the solution was imported to the gallery, on this method the code component will be directly pushed to the CDS service instance using the CLI push command.

Step 1: Create an authentication profile to the CDS instance by executing the following command on a command prompt, it’s not necessary to open a VS command prompt.

pac auth create --url https://xyz.crm.dynamics.com

To get the url sign into Power Apps and select your environment which has CDS in the top right corner and the environment you are planning to deploy the code component. Select the settings button in the top right corner and select Advanced settings. Now copy the URL from the webbrowser which should look like below

https://orgchangedhere.crm4.dynamics.com/main.aspx?settingsonly=true

The URL is https://orgchangedhere.crm4.dynamics.com/

Once your profile is successfully created, you should see the following message on your command prompt

Step 2: Navigate to the root folder of the custom component project using the cd folderpath command which has the .pcfproj file (e.g C:\ PCF\Controls\sample-controls\PowerApps-Samples\component-framework\TS_ReactStandardControl)

Step 3: Install all the required dependencies by running the command 

npm install

Step 4: Run the following command to push the code components to the CDS instance

pac pcf push --publisher-prefix contoso

Note: The publisher prefix that you use with the push command should match the publisher prefix of your solution in which the components will be included.

Reference:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls#deploying-code-components

List of common PAC commands

https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/view-download-developer-resources

The component is now ready to be used in the Canvas or a Model driven app after the code deployment using Method 1 or Method 2.

To add the component in a Canvas App:

Follow along then the documentation from Microsoft

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/component-framework-for-canvas-apps#add-components-to-a-canvas-app

Find below the sample controls I’ve added on the Power App canvas app

To add the component in a Model Driven app:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/add-custom-controls-to-a-field-or-entity

Summary: You can also create a custom component from scratch or extend the functionality from the available samples based on your needs. Hope you have found this informational & helpful in some way. Let me know any feedbacks or comments on the comment section below

Advertisement

SharePoint Online & MS Graph API Metadata service document

I have recently received a request from a customer to break the inherited permissions of a SharePoint document library folder, as of now there is no Power Automate action to break the permission of a folder but with the action Send an HTTP request to SharePoint you can call any SP REST API endpoint. Then I started exploring the Rest API endpoint to break the permission, have found the API endpoint

_api/lists/getbytitle(‘Documents’)/items(itemID)/breakroleinheritance()

I was trying to understand the method breakroleinheritance() in the endpoint and its parameters. This method passes two Boolean parameters, copyRoleAssignments and clearSubScopes.

  1. copyRoleAssignments parameter specifies whether to maintain the current role assignments already inherited from the parent site collection or Web site or List/Library,
  2. clearSubScopes parameter specifies whether to clear unique permissions of child objects so that they will subsequently inherit permissions from the parent Web site or list

So how to know that the method breakroleinheritance() accepts two parameters

  1. Documentation from Microsoft
  2. API Metadata document

The metadata document ($metadata) is published at the service root for SharePoint & Graph API (v1.0 & beta versions). It describes about endpoints, methods, parameters, properties, associations etc

SharePoint Online API Metadata:

To access the metadata document for SharePoint REST service, hit the following URL from the browser after authentication

https://yourdomain.sharepoint.com/sites/sitename/_api/$metadata

The response to the request will be an XML document. If I search on the XML file for breakroleinheritance, I found the following information

It will not give you information about the HTTP method [GET, POST, PUT etc] to use but it will provide you some insights on the API metadata. I understand it is difficult to search the XML document, a big shout out to Sergei Sergeev who has created an excellent project SharePoint REST API Metadata Explorer to handle the difficulty. Find the link below to access the project

https://s-kainet.github.io/sp-rest-explorer

As per the information on the project, the metadata is getting updated daily.

MS Graph API Metadata:

To access the metadata document for MS Graph service, make a GET request in MS Graph Explorer to the following URL based on the versions you would like to get the metadata

Microsoft Graph API v1.0 metadata

https://graph.microsoft.com/v1.0/$metadata

Microsoft Graph API beta metadata

https://graph.microsoft.com/beta/$metadata

The response metadata will be in JSON.

Reference: https://docs.microsoft.com/en-us/graph/traverse-the-graph

Hope this helps someone. Sharing is Caring.

Create Tile view card for custom List item image attachments using PowerAutomate & JSON row view formatting

In Modern SharePoint lists you can display list item content in a more modern way using the Tiles view layout. If you have very big list with multiple columns along with picture columns you get a horizontal scroll bar on the list view, the Tiles view can solve this issue since the content will be displayed on the tile card where you can design the layout of the tile card to display the different list column values.

There are many blog posts & PnP Samples which will help you to create a Tiles view using JSON row formatting. If you are new to JSON row formatting, I recommend you to go through this link from Microsoft. Microsoft has recently brought in interface to format the list item row & do conditional formatting by creating rules based on column values

On this blog post, lets see how to create Tiles view as shown above for the Images stored as attachments in the list item. If you add an attachment to list item in SharePoint list, the attachments are stored in the following path

https://domain.sharepoint.com/sites/SiteName/Lists/ListName/Attachments/ItemID/attachmentName.extension

Components used in this blog post

  1. Power Automate Flow: To get the path of the attached file (Image file in this case), we will be creating an automated Flow which gets triggered on List item creation to get the path of the image & update it to the custom hyperlink list column (ProductPhotoHL).
  2. JSON: To create a Tile view layout using list row view formatting.

Pre-Requisites:

  • Create a SP List by the name ProductInformation with the following columns
    1. Title: Single line of text
    2. ProductPhotoHL: Hyperlink (to the image)
    3. ProductPhotoPic: Picture (to the image)
    4. ProductPrice: Number
    5. Features: Multiple lines of text
  • Couple of list items with Images as attachments after the Power automate flow is created
    1. Only images as attachments
    2. Not more than one image as an attachment

Power Automate to get the path of the Image attachment URL:

Create an automated flow with Trigger When an item is created and configure the trigger to the ProductInformation list. Add the Get Attachments action connected to the Product Information list & for Id parameter it should the List item Id (ID) selected using the dynamic content from the trigger When an item is created.

Now with the above action we have the attachment URL of the image, this must be updated to the list column ProductPhotoHL & ProductPhotoPic of the ProductInformation list in order to be displayed in the Tile view. To create the above shown Tile view ProductPhotoPic (Picture) is not required but I’ve used it show you that we can create a Thumnail of the image on the default list view using the Picture column ProductPhotoPic. By the time I am writing this post the Power Automate action Update item is not capable to update a column with Picture as a DataType but it can update a HyperLink column. Action Send an HTTP request to SharePoint to make HTTP requests to any SharePoint Rest endpoints, I’ve used this action to update the ProductPhotoPic (Picture) column as below

I’ve said this on the pre-requisite section that there should not be more than one attachment. In the Body of the HTTP request, the Url parameter for the ProductPhotoHL & ProductPhotoPic gets only the first attachment URL from the previous action “Get attachments” AbsoluteUri as dynamic content. To get the first attachment URL you can use any of the following formula from the expression

  • first(body(‘Get_attachments’))?[‘AbsoluteUri’]
  • body(‘Get_attachments’)?[0]?[‘AbsoluteUri’]

I’ve used the function first() to get the first item from the array. The flow is ready, add couple of items to the list by filling in information only for Title, ProductPrice, Features & a Image as an attachment. The flow gets triggered which will update the ProductPhotoHL & ProductPhotoPic with the image attachment url. You can download the flow template from the following GitHub repo link.

Create Tiles View layout using JSON:

I’ve used the sample from PnP List view formatting samples to create items in tile layout for images. On the sample JSON I’ve updated the column ProductPhoto to ProductPhotoHL. The updated JSON is available here for download. Now copy the JSON & go to the List view & click on the down arrow (All Items)>Format current view>Advanced mode as shown below

The Apply formatting to should be set to Entire Row & paste the JSON to box as shown on the picture and then Save it.

Now you will have another layout by the name Tiles added to the existing layouts List & Compact List as shown below, select it

Now its time to see the need for the column ProductPhotoPic of datatype Picture, with the default layout you can see the thumbnail of the image added as an attachment

Summary: There are many samples available in PnP Github repo for List Row View & Column view formatting. In document & picture libraries the Tiles view layout are added by default, there is also a Column by the name Thumbnail in a Picture library. You can display a Thumbnail view of Images in PowerApps gallery for the Images stored in Document library, go through this link for more information. If you are storing images on a seperate document library & not as an attachment, the url of the image can be added on the HyperLink column. Hope you find this interesting & helpful.