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]

Do you want to change the panel color or the text inside it.

If you want to change the text, add another css class and use it in title div

.h4-custom1 {
background-color: #a3a84d!important;
}

.h4-custom2 {
background-color: #a3a84d!important; 
}

<div class="{{::c.data.color}}">

[Shane J]

If I hard-code it, it works.

HTML:

<div class="panel panel-custom">

CSS:

.panel-custom {
background-color: #a3a84d!important;
}

But I don't know how to get the CSS to read info from Server.

[SanjivMeher]

If you want to make it dynamic based on CSS, You can do so my passing the class name from server script.

For ex

add following CSS

.panel-custom1 {
background-color: #a3a84d!important;
}

.panel-custom2 {
background-color: #a3a84d!important;
}

Pass the class from server based on record type

Server Script

data.myclass= 'panel-custom1';

html

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

[Chris Stoll-SN]

 "... title change dynamically based on a color field (hex) on the record being shown"

"I would prefer the title to change in color vs the background of the body in this case."

If I understand correctly, you are not looking to change the panel's title background color or text, but the individual links listed in the widget?

To change the individual links, then try changing the anchor <a> tag with the same ng-style type of statement:

<li ng-if="c.data.list.length > 0" ng-repeat="item in c.data.list track by item.sys_id" class="list-group-item">
      <a class="focus-inline-block"
         ng-style="{color: item.color}"
         ng-click="c.onClick($event, item, item.url, {})" 
         href="javascript:void(0)" >

If that doesn't work, then you might have to go a bit deeper into the HTML code block and make the change here:

<div ng-switch on="item.display_field.type" ng-class="{'l-h-40': !item.secondary_fields.length}">
            <span class="translated-html"
                  ng-style="{color: item.color}"
                  ng-switch-when="translated_html" 
                  ng-bind-html="item.display_field.value"></span>

NOTE: This is all with the understanding that item.color is the appropriate table field holding the color value.

[Shane J]

Actually just the opposite of what you thought, I AM trying to changed the panel title/header background based on the item.color value.