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

AishwaryaAishwarya Member
edited October 2019 in Questions
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.

Comments

  • edited October 2019
    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}}.
  • AishwaryaAishwarya Member
    edited August 2017
    Hi Raymond
    Thanks for your reply.

    I have tried this, but it doesn't seem to works.
  • edited October 2019
    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.
  • AishwaryaAishwarya Member
    edited August 2017
    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.
  • Matt SonesMatt Sones Member ✭✭
    edited September 2017
    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);


  • AishwaryaAishwarya Member
    edited September 2017
    Hey Matt,

    Hope u r doing well.

    Well your solution works fine with the HeaderComponentId.
    What if I need to use  - HeaderComponentCssClass ?


  • Matt SonesMatt Sones Member ✭✭
    edited September 2017
    I haven't tested, but something like this might work:

    skuid.$('.HeaderComponentCssClass').css('background-color',YourColorValue);
  • AishwaryaAishwarya Member
    edited September 2017
    Thanks Matt.
    It seems to work, while the CSS is not working for the buttons on "Show Popup".
  • AishwaryaAishwarya Member
    edited September 2017
    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);

  • Matt SonesMatt Sones Member ✭✭
    edited September 2017
    you will need to place it in quotes, but I believe that should work:
    skuid.$('.HeaderComponentCssClass').css("background-color","red !important");

  • AishwaryaAishwarya Member
    edited September 2017
    Hey Matt,

    This doesn't seem to work. In fact Css is not working If I use "!important" in the CSS. Any suggestion?
  • Matt SonesMatt Sones Member ✭✭
    edited March 2019
    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.
  • AishwaryaAishwarya Member
    edited September 2017
    No problem. I will try to do the same.
    Thanks!
Sign In or Register to comment.