How can I change the color of widget's title based on color of the record?

[Shane J]

I have a custom widget I copied from the Simple List Widget.  I am trying to have the color of the title change dynamically based on a color field (hex) on the record being shown.  Right now the widget is referring to the Instance Options, but simply replacing that hasn't worked as I expected (I'm not that familiar with  Angular).

I believe this is what is driving the color right now:

<div ng-if="data.isRequest && c.data.count > 0">
<div class="panel panel-{{::c.options.color}} b" ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)">
  <div class="panel-heading" ng-if="::!c.options.hide_header">
    <h2 class="h4 panel-title">
      <span ng-if="c.options.glyph">
        <fa name="{{::c.options.glyph}}" />

BLAH BLAH THE REST OF IT

I can get the background to change (by using ng-style="{background: item.color}" in the appropriate spot, but I can't get the title to change (about all I've been able to do is make it transparent, not by choice...).  I would prefer the title to change in color vs the background of the body in this case.

[SanjivMeher]

I used data.color = 'danger' and got this:

Which I suppose is what you were expecting.  How does that help me in this case though?  🙂

Didn't this change the panel background?

[Shane J]

No, I used it here:

<div class="panel-{{::c.data.color}} b" ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)">

That IS the part I want to dynamically change the color of so you're on the right track there (I DO NOT want to change the background of the records listed - just the title).  But that's the part I can't get to change based on the u_related_color field of the record.

I've done some further messing around, and seemingly have verified that c.data.color is coming across to the HTML.  I put it into the Header text like this:

</span>Related to This Request {{c.data.color}}</h2>

and in turn now see this:

But as you can see the title/header is acting as if there's no color even though this is in place:

<div class="panel panel-{{::c.data.color}} b" ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)">

[Chris Stoll-SN]

First the Bootstrap class -> panel-{{identifier}} - is expecting a word that represents one of the defined panel alternatives as seen here - https://getbootstrap.com/docs/3.3/components/#panels-alternatives  The alternative types' color can be overridden with their equal identifiers in the Service Portal Configuration branding. 

You can not use a HEX (#ffffff) color value as a replacement to the pre-determined identifiers.  So you have to take the more aggressive approach (outlined above), if using a table field that is defined as a 'Color' type.

As for the panel header, the same concepts apply - 

- background-color: will set the background of an element

- color: will set the color of the text in the element

So, using a part of the code snippet you provided:

<div class="panel panel-{{::c.options.color}} b" 
     ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)"
     ng-style="{background-color: item.color}">
<div class="panel-heading"
     ng-if="::!c.options.hide_header">
    <h2 class="h4 panel-title"
        ng-style="{color: item.color}">

Because ng-style is an inline style action, it will take priority over any CSS class settings.

My only concern is that in the code snippet you are not showing anything that leverages the ability to use the item.### referencing like one would get with using the ng-repeat action.

Can you share a bit more on what table you are getting the data from?

You gave the example in a prior post of using "data.color = gr.getValue('u_related_color');"
That is part of a GlideRecord query which could return multiple records. 
So, did you modify the Simple List widget to build multiple panels with 1 record being referenced in them?
Because that is not clear from the HTML snippet you provided.

Just missing some coding to better understand what the widget is actually doing and to best answer your question.

[Shane J]

I can dump the entire Server script on you but I'm not sure you want that.  I switched from item.color because of the same reason you mentioned, as it was trying to pull from the multiple records that were coming back in the query.

This is the top of the Server Script I am using:

(function () {

	var thisone = $sp.getRecord();

	  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	
	data.table = $sp.getParameter('table') || input.table;
	data.id = $sp.getParameter('sys_id') || input.id;
	
		
	var thisone2 = new GlideRecord(data.table);
	thisone2.get(data.id);
	data.canRead = $sp.canReadRecord(thisone2);
	//hides the widget unless being shown on a RITM
	data.isRequest = thisone2.sys_class_name == 'sc_req_item';

		data.color = thisone.u_related_color.toString();

The last portion being the new part, so I am trying to use c.data.color now instead of item.color.

I tried what you offered up with that in mind:

<div class="panel panel-{{::c.options.color}} b" ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)" ng-style="{background-color: c.data.color}">

But it's still coming across in Blue.

[Chris Stoll-SN · Accepted solution]

Sorry, that is my fault in the ng-style code.  The CSS attribute needs to be wrapped in ( ' ) quotes.

Also, move it down to the panel-heading DIV ... if you leave it in the panel DIV it changes the background color of the bottom section.

<div class="panel-heading" ng-style="{'background-color': c.data.color}">

Also, you might want to use the following so the bottom border of the panel to be the same color.

<div class="panel-heading" ng-style="{'background-color': c.data.color, 'border-bottom-color': c.data.color}">