Using PCF to display contact cards

What is PCF?

If you are building Model Driven Apps, you would have realised by now that Unified Interface is the future. Microsoft has made huge investments in this area to ensure that you have an optimal experience regardless of the device or form factor. Unified Interface is composed of several components/controls that help you to visualise and interact with the data.

If you wanted to swap out the control or build a new one that is better than what comes out this box, the only way you could do this earlier was to build a custom webresource and embed it into an IFrame. Using IFrame is clunky, and you had to handle all the complexities of building a responsive interface. IFrame also cannot be displayed on a view, only on a form.

But with the arrival of PowerApps Component Framework, you can build custom components/controls that can be used in fields or view fairly quickly. PCF entered public preview around April, 2019. The are three things that you will be using while developing a custom components/control: PCF, the framework that can be used to build the components, a CLI (similar to yeoman, if you are from node world) that is used to scaffold, build & deploy the control and a test harness to assist you during development.

What do you need to know to build components/controls using PCF

  1. TypeScript (preferable) or JavaScript
  2. NodeJS
  3. Ability to run commands from commandline
    • If you don’t like to live in the commandline, download XrmToolBox tool called PCF Custom Control Builder by Danish
  4. React (preferable)
  5. Office UI Fabric  (preferable)
  6. Edge Dev Tools or Chrome Dev Tools (while build/debug)
  7. Fiddler (while build/debug)

Where do I go to get inspired or assess the capabilities

There are couple of places:

  1. Community Content on PCF Forum
  2. PCF Gallery

In this post I will share a control that I built using PCF that displays the view as a set of cards. Here is how it looks on the contact grid when you choose the Full layout.

Full Layout

You can also display the result in the compact layout.

Compact Layout.png

Clicking on the card takes you to the record, and you can load more records, by clicking on the “Load more” button on the command bar.

In order to install the control, you would first need to install the managed solution by downloading Contact.Card.Component.zip from https://github.com/rajyraman/Office-UI-Fabric-Card/releases

After you have downloaded and installed the managed solution, you can add the PCF component/control to an existing view or new view.

View Properties

As you can see above, I am configuring the view to show the results using “Cards” control, and not “Read only Grid” control. After this you need to configure each property to the correct field on the entity, that you would like be shown on the card.

Card Layout

Card Props

Each property on this control maps to the card as below

Card.png

How do you get the image to display on the custom control?

If you don’t need image on the card, you can skip this step. This is the tricky bit. There is a field on each entity that is capable of storing a image. The name of the field is entityimage. This screenshot should jot your memory.

Upload Image.png

You cannot however, add the entityimage field to a view, as this field is not visible in the View Builder: both classic experience and maker experience. But, entityimage is a valid field, so you can add this field using the awesome tool called “View Designer” in XrmToolBox.

View Designer.png

This allows you to modify both the FetchXML and LayoutXML of the view. Using this tool you can add the “entityimage” field.

Edit View.png

Once you do this, you can see the entityimage field on the view in the classic designer. If you try to open the same view in the modern designer it will fail.

PCF View

After save and publish, you should now be able to use the custom control on the view that it is bound to. You can also use a custom control to display results on the Quick Find as well, using similar update to FetchXML and LayoutXML, but Quick Find does not seem to be supporting entityimage attribute at the moment.

I hope this is an useful control that everyone can use.

Further reading:

  1. Using TypeScript with modern React (YouTube)
  2. Office UI Fabric Controls
  3. Office UI Fabric CodeSandBox
  4. What are custom components (docs.microsoft.com)
  5. PCF Forum

People to Follow for PCF

  1. Andrew Butenko
  2. Andrew Ly
  3. Aung Khaing
  4. Greg Hurlman
  5. Jose Aguilera
  6. Oleksandr Olashyn
  7. Vignesh

Using Virtual Entities to query metadata

After my previous post, I continued to explore virtual entities to see what real life problems I can solve using them. One problem I could think of was metadata. How awesome would it be, if I can use Advanced Find to query entity and attribute metadata, or visualise them as a normal entity! It is not a dream anymore. I have developed an open-source solution to do this.

Here is some of the sample queries:

Query all attributes of type customer

Query by Attribute Type

Query by Attribute Type Results

Query all mandatory attributes

Query All Required.png

Query All Required Results.png

Query by Attribute Type and Entity

Query by Attribute Type and Entity.png

Query by Attribute Type and Entity Results.png

Query all Many to Many intersect entities

Query MM Entity.png

Query MM Entity Results

Query entities that have quick create enabled

Query Quick Create

Quick Create Results

You can open the entity and see more details.

Entity Form

You can open the attribute and view more details as well.

Attribute Form

All this is awesomeness is possible using the power of virtual entities. There are two virtual entities that you can query. They are called Entity and Attribute.

VE Solution

You can download the source code and managed solution from https://github.com/rajyraman/Metadata-Virtual-Entity/releases.

This step is important

After importing the managed solution,  change the data source for the attribute entity from “Entity Datasource” to “Attribute Datasource”. You have to do this from the Customization area and not from the managed solution.

Customise.png

Change Datasource.png

This is because by default, the system does not allow relationships between two virtual entities that have different datasources. This exception is shown when you try to do this.

Solution Exception

Stack Trace.png

In order to workaround this exception, you keep the data source same for the “Entity” virtual entity (parent) and “Attribute” (child) virtual entity, create the relationship and then change to the right datasource. Hence, the managed solution has the datasource set to “Entity Datasource” for the “Attribute” virtual entity, which has to be changed manually after importing the solution.

I hope this solution would be really useful for administrators. Please let me know any feedback on the post or on GitHub issues.

Sourcecode: https://github.com/rajyraman/Metadata-Virtual-Entity

Managed Solution: https://github.com/rajyraman/Metadata-Virtual-Entity/releases/latest

 

 

Puppeteer and Dynamics 365

Puppeteer is a Node API to drive Headless Chrome. I have used Selenium and DalekJS in the past to do some UI testing. I have been experimenting/learning puppeteer for the past few weeks and have found it to relatively easy to learn and use. It is still on alpha though and so there are some bugs.

In my sample repo (https://github.com/rajyraman/Puppeteer-Dynamics-365), I demonstrate:

  1. How to use puppeteer to login to ADFS OnPrem CRM
  2. How to use puppeteer to take full page screenshot
  3. Annotate the screenshot using imagemagick

I envision this repo to provide documentation assistance by capturing and annotating screenshots. Below are the steps to run this project:

    1. After cloning the github repo run the following command to download the npm packages: yarn
    2. Install imagemagick from https://www.imagemagick.org/script/download.php#windows
    3. Confirm that the path to magick.exe exists in PATHImagemagick path.png
    4. Create a new .env file in the root of the repo. Below is the .env file that I used: OnPrem
      env onprem
      Onlineenv online.png
    1. Change the USER_SELECTOR, PASSWORD_SELECTOR, LOGIN_SUBMIT_SELECTOR if they are different. These were the ids in the OnPrem ADFS login page
    2. Check the runsheet.csv file provided in the repo and change it to suit your screenshot requirements. The run sheet specifies the sequence of clicks. In this file, on line 2, I am specifying that I should first click Workspace group and then Clients subgroup. The screenshot should be annotated with text “Clients list”. On line 3, I am specifying that the “NEW” button should be clicked and the screenshot should be annotated as “New client form” and the file name should be “New Client Form.png”. The command bar clicks are always specified in a new line with blank group and subgroup.run sheet.png
    3. Run the node application using “node index.js”Run application.png

 

The screenshots will be captured with headless Chrome and annotated using imagemagick. Here is a sample screenshot:

Administration-Annotated.png

Possible future improvements:

  1. Build the exe using pkg and distribute the exe, .env and runsheet.csv. Building the exe using pkg requires a copy of the puppeteer folder from node_modules along side the exe
  2. Navigate to a record based on id
  3. Run workflow/dialogs
  4. Populate new entity form with data before command bar button click
  5. Automatically scroll if group is outside of viewport

Please submit your feedback/ideas/criticism on the comments area or as a issue in the repo.

Convert Personal View to System View

When you design a query from the “Advanced Find” window, you can save the query for future use. I call this “Personal View”, but the official name for this is “Saved View”. This view is only visible to the person who saved the view (unless it is shared/reassigned).

As more personal views get created, it becomes an issue during migration, as these are not transported in the solution xml. You can of course use Solution Extender to copy this across, but I would like to do this right from the Advanced Find window. Apart from data migration, another scenario where you might find the need to create a system view from a personal view, is when you are constantly sharing views to a large number of people of group. When you are doing this, it is good time to actually make this a system view.

With these scenarios in mind, I have developed a solution that simplifies the process of creating a system view from a personal view. After installing the managed solution, you will see a new button called “Promote to System View” in the advanced find, when you switch to the “Saved Views” tab.

screenshot

To create a system view from the personal view, simply choose the views that need to be converted, and click the “Promote to System View” button. A message will be displayed after the conversion is complete. Once you refresh the window, you should be able to see the newly created system view(s).

Please log any issues/feedback/feature request in the github repo -> https://github.com/rajyraman/Personal-View-to-System-View/issues

You can download the managed solution from https://github.com/rajyraman/Personal-View-to-System-View/releases

Chrome Extension: Site Highlighter

EDIT (30/12/16): I have unpublished the extension from Chrome store and retaining this post and the GitHub repo. Stylish is a better extension and offers more features. This extension was a good learning experience for me on how to develop Chrome extension.

Site Highlighter is a Chrome extension I developed to do only one task: change the background colour of an element or a tag. The element could be selected by classname or id. I will give you an example. CRM 2013 doesn’t support themes. But if you just want to differentiate the various environments (DEV/TEST/PROD) by the navigation bar colour, it is not possible without changing the css using the the CRM web application. This is easy to do in OnPremise, but is technically an unsupported change.

In this instance you can use my extension to change the navigation bar to a different colour. The ID you can to match is navBar. The screenshot below shows you the config menu of the extension.

Site Highlighter Options

After you set this up the extension will highlight the element by id navbar, with green colour. The source code for the extension is available at https://github.com/rajyraman/Site-Highlighter. You can install the extension from https://chrome.google.com/webstore/detail/site-highlighter/hembcpepmfkaigjalcajpjjbeimbhnnk

This is my first extension and I worked on it only for three days, including constant ALT+TABing the Chrome Extension developer documentation, and so it may be a little rough around the edges.

Request to people with expertise in Chrome extension Development/UX & Users: If you can give your thoughts on things that I am not doing correctly, it will be helpful for me to make improvements. Thank you.