You’re offline. This is a read only version of the page.
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
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.
Share
Report
All responses (
Answers (
//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) {
}
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) {
}
}
Thank you for the information Kokulan.
Hi,
hope this works for you - docs.microsoft.com/.../display-custom-icons-instead
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
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
#1
Mohamed Amine Mahmoudi
83
Super User 2025 Season 1
#2
Community Member
54
#3
Victor Onyebuchi
6
