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.

Advertisement

11 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!

  4. Looks like the below can only handle three values, anything beyond that doesn’t work
    {
    “434350002”: {“icon”: “Sad”, “color”: “#ff0000”},
    “434350001”: { “color”: “orange”},
    “434350000”:{“icon”:”Emoji2″}
    }

    1. It shouldn’t be a limit: it should be possible to define colors and icons for every option.
      Maybe it helps to check:
      – the JSON string shouldn’t contain line breaks: please remove the formatting before customizing the control.
      – reopen the customizing, and check if the string still contains everything you’ve passed. Maybe it was cut. The length of the PCF parameters is limited to 160 chars, but this limit is not on the server side. It actually works with much longer strings. YOu can use the developer tools to extend that limit to 1000 (for instance).
      This blog is about something else, but I’ve described there how to extend the length of the parametere: https://dianabirkelbach.wordpress.com/2021/03/12/the-form-component-control-promotes-the-pcfs-to-the-next-level/ (scroll down, it’s just before Summary)

  5. An amazing control and I love that it works with BPFs. Thank you so much for developing and releasing it to the community!
    It looks like the solution version still says 1.0 for this 1.1 release.

  6. An amazing control. I use this all the time. Thanks for developing and releasing. Question. Is there anyway that I can show the colorful optionset in a model driven app Header. At present when I add the control to a field in the header it stops displaying the field. It still show the field and the control in the flyout, but does not show it in the header. Pretty sure its a limitation, but would love to know if there is a way around it.

  7. Hi Diana,

    I am looking forward to using your PCF. But the colored icon does not show up…

    – I downloaded and imported the most recent solution.
    – Confirmed that each option in the option set has hex color
    – Go to the classic editor Entity -> Form -> Select Field for configuration
    – Go to Controls -> select ORBIS.ColorfulOptionset for Web, Phone, Tablet
    – Tried multiple Icon names in the SingleLine.Text
    – Tried sort by Value (enum or text)
    – Published all changes

    Do I need to install something else? Is it possible the icons are missing from my environment?

    Any help would be appreciated. Your PCF solves exactly the problem I need solved.

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: