Beautifying Dynamics 365 – Model Driven Apps

Part 3

In previous posts I talked about Themes and how PCF controls can be used to replace a set of fields. This time I’ll describe other usages of PCF controls, for instance when there is a need to introduce complex visualizations or to show data that is not directly related with current entity.

PCF Controls to extract and show complex data

There are cases in which we need to show more than just simple fields in the form of an Entity, we need to show more complex data and sub-grids are not enough because the data is not found in the model as a one-to-many relationship between the data and the entity table.

For these kinds of cases, we usually end building a PCF control, which allow us to get required data from the Metaverse using a FetchXML query, and then presenting that data in the desired format, could be a grid, a chart or whatever we need.

Let’s use the following model to see a simple example:

The goal is to include a chart in the account form, representing the count of Airplanes in which the account appears as operator, group by airplane series.

We can use the following fetchXML query to retrieve that data. (I won’t explain the query here; for more info about FetchXML queries please go to: FetchXML to construct a query)

How to integrate the FetchXML query into the PCF control?

The key to accomplish this is to use the WebAPI feature, an integration point between PCF controls and MS Dynamics backend framework.

You can declare the use of that feature in the ControlManifest.xml, under the feature-usage section.

Once that’s done, when initializing the control, you should be able to retrieve the data doing something like this:

Getting the response, you can process the result and prepare your data to be sent as the input of the UI control you would like to use.

That’s the next piece of this puzzle, how to include in the PCF control any external library.

Including UI libraries

We are building PCF controls using typescript on top of React so that enable us to include any React library we would like to use.

The first option should always be the libraries Microsoft is already using in their framework like Fluent UI, so we get consistency in L&F and user experience. Unfortunately, there are cases in which the usage of external libraries is necessary.

The following is simple React code, nothing specific to PCF control but I’ll show it for completeness.

Using the following code we implemented a simple chart control, using a third-party UI library.

Conclusion

PCF controls are very useful and give us the flexibility to do almost everything we need around data and UI, being always in MS Dynamics framework.

In other words, MS Dynamics covers very well and helps to show easily the 80% of the cases, but also support the other 20% of cases in which there is a complicated requirement that’s necessary. For those cases, you can always implement your own PCF control and use all development power.

Hope the series gave some of light on different options you can handle to create beautiful and useful UI for MS Dynamics.