Set the background color of the Skuid Header dynamically on basis of the value of a field in custom object

  • 2
  • Question
  • Updated 1 year ago
  • Answered
Set the background color of the Skuid Header dynamically on basis of the value of a field in custom object.
For example: If a user enter the value red in the field then background color will be set as red.
Photo of Aishwarya

Aishwarya

  • 290 Points 250 badge 2x thumb

Posted 1 year ago

  • 2
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
You can by hacking the XMl. Start by adding a background color as normal in the page builder. Then, open the xml and find the the line of code that sets the background color. Replace the color with a merge variable like {{$Model.MyPageSettings.data.0.Color__c}}.
Photo of Aishwarya

Aishwarya

  • 290 Points 250 badge 2x thumb
Hi Raymond
Thanks for your reply.

I have tried this, but it doesn't seem to works.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Hmmm... I use this method to change background images.... I assumed it would work for colors as well. I know it works for images because I am doing it. For images, save the images in static resources and then use the method I laid out to change them. You could upload solid color images set to stretch and it would give you a solid color background.
Photo of Aishwarya

Aishwarya

  • 290 Points 250 badge 2x thumb
Thanks @Raymond.
I will try this solution.

In addition to this, I tried with Custom Label to set the background color, but that didn't work too.
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Have you tried Raymond's method with everything in the header inside a wrapper component, setting the background of the wrapper dynamically with merge syntax? You would have to run skuid.$C('WrapperId').render() every time your color field changed.

If that doesn't work, you can use a brute force jQuery method.

Set a model action to run every time your color field changes. The action should run a javascript snippet.

To begin, set the snippet to just console.log(arguments) to see what you get in the runtime console, in order to get the value of the field from the arguments.
Once  you have the value of your color in the snippet, you can do something approximately like this:

skuid.$C('HeaderComponentId').element.css('background-color',YourColorValue);
Photo of Aishwarya

Aishwarya

  • 290 Points 250 badge 2x thumb
Also Matt,

Just want to know may be you have done something like:
can we set the color property with element - !important

e.g : skuid.$('.HeaderComponentCssClass').css('background-color',red !important);
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
you will need to place it in quotes, but I believe that should work:
skuid.$('.HeaderComponentCssClass').css("background-color","red !important");
Photo of Aishwarya

Aishwarya

  • 290 Points 250 badge 2x thumb
Hey Matt,

This doesn't seem to work. In fact Css is not working If I use "!important" in the CSS. Any suggestion?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Not sure, sorry. I'm not a css expert. I always just play with it in the browser console and elements panels until it works.
Photo of Aishwarya

Aishwarya

  • 290 Points 250 badge 2x thumb
No problem. I will try to do the same.
Thanks!