[Tip 137] - Custom Naming Colors

#1

When you’re branding your dashboards for your own specific company, it is useful to have your custom colors styled and named to be stored in the UI for easy access without going back and forth to lookup specific Hex codes.

This can be done using a JavaScript override and editing the list of colors. Running on Version 7+, this can be done by going to Setup -> App Styling and double click on the JavaScript resource to add something similar to this:

color_code

Note: the ‘value’ provided is an integer representation of your ARGB value and there are a lot of tools online that can help you get this value. Here’s is an example:

https://www.rapidtables.com/convert/number/hex-to-decimal.html

color_code2

4 Likes
#2

This seems to work upon first use, but then when refreshing the page it renders all customer colors as #000000

Anyone else had this issue?

Here’s my code:
//Adding Custom colors to Dundas for ease of use
$(document).ready(function(){
window.dundas.context.ready(function(){
dundas.controls.Colors.push({name: “PtDarkBlue”, value: 2790348});
dundas.controls.Colors.push({name: “PtLightBlue”, value: 10280946});
dundas.controls.Colors.push({name: “PtGreen”, value: 5025616});
dundas.controls.Colors.push({name: “PtRed”, value: 16007990});
dundas.controls.Colors.push({name: “PtOrange”, value: 16752640});
dundas.controls.Colors.push({name: “PtPurple”, value: 8266137});
dundas.controls.Colors.push({name: “PtLightGray”, value: 15000804});
dundas.controls.Colors.push({name: “PtDarkGray”, value: 5066061});
dundas.controls.Color.updateColorNames();
});
});

#3

Hi @devon.byrd,

Please give this a go instead, it seems to work great on my end.

$(document).ready(function(){
dundas.controls.Colors.push({name: ‘PtDarkBlue’, value: 2790348});
dundas.controls.Colors.push({name: ‘PtLightBlue’, value: 10280946});
dundas.controls.Colors.push({name: ‘PtGreen’, value: 5025616});
dundas.controls.Colors.push({name: ‘PtRed’, value: 16007990});
dundas.controls.Colors.push({name: ‘PtOrange’, value: 16752640});
dundas.controls.Colors.push({name: ‘PtPurple’, value: 8266137});
dundas.controls.Colors.push({name: ‘PtLightGray’, value: 15000804});
dundas.controls.Colors.push({name: ‘PtDarkGray’, value: 5066061});
dundas.controls.Color.updateColorNames();
});

#4

Hi,

Just an update that in version 8.0.1 we just released a full feature for this that you can set up in configuration settings in administration. Because they’re not defined in JavaScript, they can also be taken into account when doing things like exporting to Excel.

It’s set using a JSON array with similar names & values. The values can be either regular numbers or standard hex color codes (starting with ‘#’):

[
  { "name": "CorporateBlue", "value": "#0078D4" },
  { "name": "CorporateGreen", "value": "5025616" }
]
#5

I was pleased to find this tip, however it isn’t working as expected. Am I doing something wrong? Using the latest Dundas 8.0.1.1002.nc - I have tried both hex values and ARGB values in the “Custom Colors” config setting.

[
{ “name”: “ASL brand main”, “value”: “#458e8e” },
{ “name”: “ASL brand light”, “value”: “#D8E8E8” },
{ “name”: “ASL brand accent”, “value”: “#6ac4ad” },
{ “name”: “ASL text default”, “value”: “#555555” },
{ “name”: “ASL danger”, “value”: “#d9534f” },
{ “name”: “ASL warn”, “value”: “#f8a400” },
{ “name”: “ASL success”, “value”: “#28a745” }
]

But when I try to select a color, they show as all black or purple:

21%20PM

#6

Hi @kevin.1

I don’t know for sure, but it seems to me the colors can’t have ‘spaces’ in the name
With your JSON array I got the same result, but when I changed to:

[
{ “name”: “ASLBrandMain”, “value”: “#458e8e” },
{ “name”: “ASLBrandLight”, “value”: “#D8E8E8” },
{ “name”: “ASLTextDefault”, “value”: “#555555” },
{ “name”: “ASLDanger”, “value”: “#d9534f” },
{ “name”: “ASLWarn”, “value”: “#f8a400” },
{ “name”: “ASLSuccess”, “value”: “#28a745” }
]

I got:
image

2 Likes
#7

That works, thanks Ole!

#8
#9