Colorful Optionset PCF – Virtual and Improved

It was my first PCF: the ColorfulOptionset πŸ§‘πŸ’›πŸ’šπŸ’™πŸ’œπŸ–€; developed about two years ago and published on pcf.gallery: https://pcf.gallery/colorful-optionset/. This month we’ve got a very important and long awaited PCF feature: the Virtual Components. Of course I had to try it out, and the ColorfulOptionset seemed to be the best fit for this first try. And since I was at it, I’ve implemented a few more features I had in mind since a while. I plan to add even more features in the future: stay tuned. πŸ˜‰

Customizing

Customizing of colors

The base idea for this component is to allow the Choice components (OptionSet) to make a bigger impact by showing colors. The colors can be customized directly on the Options (unfortunately this is possible still only using the old “classic” customizing).

The rest is standard PCF customizing, by choosing the ORBIS.ColorfulOptionset component for your optionset control (I’ll get to the other parameters in a second)

Customizing the icons

The first version of the PCF could show only one type of icon. Mitch Milam called it “that thing with a dot” in his video “Join the Power Apps Component Framework (PCF) Revolution” (loved that). That’s because the icon I used was the FluentUI icon “CircleShapeSolid” .

Starting with the new version (v1.1) you can choose an icon from the Fluent UI icons gallery. Just scroll down to “Available icons” and choose or search for the something that fits your column.

This icon can be used for the Icon-property (in the customizing image below, the icon was “FavoriteStarFill”

Extended customizing of icons and colors

Sometimes one icon is not enough, even if the colors are powerful. Sometimes it’s even more impactful if the component is showing different icons for different options. For that case, you can pass a JSON string as the “Icon” property. Let’s see some examples.

Like/Dislike

Let’s see something with “like/dislike/warning”:

The customizing would look something like this:

Let’s format the setting

{
"434350000": {"icon":"LikeSolid"},
"434350002": {"icon": "DislikeSolid"}, 
"434350001": {"icon": "WarningSolid", "color": "orange"}, 
}

So it’s a JSON object, where for each option we define the icon and/or the color.

For the options where the icon is not defined, the fallback will be the “CircleShapeSolid“.

The color doesn’t have to be specified. That’s only for the cases where the color from the customizing needs to be overridden. The color can be defined using the color name (like “red” or the hex code. (like #ff0000)

You can pass “both icon and color”, “only icon”, “only the color” or none.

Don’t forget to remove the formatting before you paste it in the “Icon” property.

Happy/Sad

The JSON for this icons would be
{
"434350002": {"icon": "Sad", "color": "#ff0000"}, 
"434350001": {                "color": "orange"}, 
"434350000":{"icon":"Emoji2"}
}

The icon for the second option is missing, so the “dot” is shown.

In this case I’ve set also the color to red, by using the “#ff0000”.

Sorting the options

Another feature introduced with the new version (1.1) is allowing to sort the options at runtime. Usually you define the options in customizing, and define also the order they should be shown. That it’s still the default for ColorfulOptionset.

But sometimes you would like to show the options in the alphabetical order. That’s not possible to do using only the customizing, because the users have different languages and the sorting will differ in each language.

That’s why I’ve introduced the 3rd property for the PCF: the SortBy property.

There are two options: Value and Text.


The default will be “Value” (the order defined by the customizing). The “Text” option will sort based on option-text in the user language.

SortBy (left is “Value”, right is “Text”)

Using the component

Virtual Component – much smaller and faster

One of the best improvements is using the new Virtual Components possibilities. When the component is virtual, it uses the platform own Virtual DOM, and the doesn’t have to bring it’s own React and FluentUI libraries.

We can see the difference by comparing the solution size: 5,85 KB, compared with the old 314KB. That’s a big difference.

But it’s getting even better, if we compare the bundle size:

Love it!

But the difference that really matter, is how fast the components are loaded now. I’ve recorded the behavior of the same form: the first part is with the standard component, the second one with virtual component version of the PCF. Remark the black box during the loading. Using the virtual component the controls are instant there, we practically have no loading time.

Isn’t it amazing? If feels like we’ve got un upgrade to 1st class.

Using the ColorfulOptionse Virtual Component on Business Process Flows

Maybe you’ve seen the blog from Ben den Blanken about how to customize a PCFs on the BPF. The standard customizing doesn’t allow to add PCFs to BPF, but the runtime supports it. Thanks to ClΓ©ment Olivier and Tanguy TOUZARD who offered us a great PlugIn for XrmToolBox , I could test the virtual version of the Colorful Optionset PCF also on the Business Process Flow. And it works like a charm.

I hope you enjoy the component.

4 thoughts on “Colorful Optionset PCF – Virtual and Improved

Add yours

  1. Thanks to amazing article. I just start work User Story with color option set. You save my day.

  2. Hi Diana,

    Thanks for bring new things all the time!

    Amazing about Virtual Component!
    Does it support complex PCFs such as import lots of 3rd lib from NPM?

    And if Virtual Component present some kind of direction of customization in Dynamics, is that means we might have breakthrough on some pain points. For example, in the high density header we are not allowed to use PCF because ‘to ensure a very highly data dense experience’, since virtual component can do that, we might break this limitation?

    When will us probably get a useable version? I can’t wait to have a try!

  3. Hi Jerry,

    Happy you like it!

    Virtual Component doesn’t make any difference in customizing. Only the way you write the PCFs is different. The only difference is that you use the platform own React and FluentUI, instead of bringing your own, and that the code is really integrated in the platform rendering process. That why it’s much smaller and faster.
    But we can include other npm packages, like we are used to.

    I know that the high density shows PCFs only in the flyout, and that’s not very helpful, since you customize the control in the header since you want to have it “right there” on the form. The Virtual Components are not different there.

    You can download the Virtual Component version of the ColorfulOptionset from my GitHub : https://github.com/ORBISAG/ORBIS.PCF.ColorfulOptionset/releases . For the version 1,1 scroll a little down, and look for “ColorfulOptionset_20220420.zip” in the Assets.

    Hope you’ll enjoy it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Powered by WordPress.com.

Up ↑

%d bloggers like this: