web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Microsoft Dynamics CRM (Archived)

Custom control for option set with defined colours

(0) ShareShare
ReportReport
Posted on by 100

The custom control for option sets which Microsoft provided is cool. but I would like the colour of the selected option set to be the colour associated with the options set items colour property.

Is it possible for us to create custom control in the custom control framework referencing the colour property on an option set item?

The reason I would like this is if my option sets values are good bad ok, I would like to use red Amber Green for the selected item.

If so where can I get training in developing new controls in the custom control framework?

*This post is locked for comments

I have the same question (0)
  • Verified answer
    Kokulan Profile Picture
    18,054 on at

    Hi

    As of yet, you cannot customise or create your own Custom Control in a supported way.  The Custom Control Framework will most probably released to developers soon

    medium.com/.../what-is-the-custom-control-framework-and-why-should-dynamics-365-developers-be-excited-about-it-a3f0e3f8be4

    But if you want to try and see if you can modify the JS of the control to get the colors you want, have a look at the following link

    bguidinger.com/.../custom-controls-framework-part-1

  • Suggested answer
    Sreevalli Profile Picture
    3,256 on at

    Hi,

    hope this works for you - docs.microsoft.com/.../display-custom-icons-instead

  • Alan O Keeffe Profile Picture
    100 on at

    Thank you for the information Kokulan.

  • Alan O Keeffe Profile Picture
    100 on at

    As CCF is not supported yet and there is very little documentation on CCF, I decided to go down the unsupported route of adding custom css to the form.  The following works, but it is unsupported.

    I have multiple option sets on the screen with valued Good, Ok, Bad.  I am using the new CCF control from Microsoft.

    On load of the form add the following JavaScript

    function on_load() {
        try {
    
            var style_rules = [];
    
            style_rules.push("div[aria-label='Good'] label.ui-radio-on" + " { background-color:Green !important } ");
            style_rules.push("div[aria-label='Ok'] label.ui-radio-on" + " { background-color:Amber !important } ");
            style_rules.push("div[aria-label='Bad'] label.ui-radio-on" + " { background-color:Red !important } ");
            
    
            var style = '<style type="text/css">' + style_rules.join("\n") + "</style>";
            $(window.parent.document.getElementsByTagName('head')[0]).append(style);
        }
        catch (err) {
        }
    }
    


  • Alan O Keeffe Profile Picture
    100 on at

    This is an unsupported solution but it works (tested in Web and Mobile app Andriod and IOS).  It injects CSS into the page and updates the text color of the dropdown list or the background-color of the custom control for option sets based on the CSS selectors "select[title=Bad]" and [aria-label='Bad'].  I have multiple Good, OK, Bad option sets on my form and it applies to them all.

    Put the following code in your on_load event.

    //Set Red Amber Green 
        try {
            var style_rules = [];
    
            style_rules.push("select[title=Good]" + " { color:Green } ");
            style_rules.push("select[title=OK]" + " { color:Amber } ");
            style_rules.push("select[title=Bad]" + " { color:FireBrick } ");
    
            style_rules.push("div[aria-label='Good'] label.ui-radio-on" + " { background-color:Green !important } ");
            style_rules.push("div[aria-label='OK'] label.ui-radio-on" + " { background-color:Amber !important } ");
            style_rules.push("div[aria-label='Bad'] label.ui-radio-on" + " { background-color:FireBrick  !important } ");
    
            var style = '<style type="text/css">' + style_rules.join("\n") + "</style>";
            $(window.parent.document.getElementsByTagName('head')[0]).append(style);
        }
        catch (err) {
        }

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
SA-08121319-0 Profile Picture

SA-08121319-0 4

#1
Calum MacFarlane Profile Picture

Calum MacFarlane 4

#3
Alex Fun Wei Jie Profile Picture

Alex Fun Wei Jie 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans