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

Aishwarya
edited October 15, 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

  • Skuidward Tentacles (Raymond)
    edited October 15, 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}}.
  • Aishwarya
    edited August 18, 2017
    Hi Raymond
    Thanks for your reply.

    I have tried this, but it doesn't seem to works.
  • Skuidward Tentacles (Raymond)
    edited October 15, 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.
  • Aishwarya
    edited August 18, 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 Sones
    Matt Sones 💎💎💎
    edited September 8, 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);


  • Aishwarya
    edited September 1, 2017
    Hey Matt,

    Hope u r doing well.

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


  • Matt Sones
    Matt Sones 💎💎💎
    edited September 4, 2017
    I haven't tested, but something like this might work:

    skuid.$('.HeaderComponentCssClass').css('background-color',YourColorValue);
  • Aishwarya
    edited September 4, 2017
    Thanks Matt.
    It seems to work, while the CSS is not working for the buttons on "Show Popup".
  • Aishwarya
    edited September 5, 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 Sones
    Matt Sones 💎💎💎
    edited September 5, 2017
    you will need to place it in quotes, but I believe that should work:
    skuid.$('.HeaderComponentCssClass').css("background-color","red !important");

  • Aishwarya
    edited September 6, 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 Sones
    Matt Sones 💎💎💎
    edited March 21, 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.
  • Aishwarya
    edited September 8, 2017
    No problem. I will try to do the same.
    Thanks!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!