Dynamic Background Color for Deck component cards

  • 1
  • Question
  • Updated 5 months ago
  • Answered
I have a UI Only field that is being used to set the background color for my calendar component and I'd like to do the same for the deck component. 

Adding a style to the deck component is not working. Has anyone dynamically colored their deck component based off of a field falue? 
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb

Posted 10 months ago

  • 1
Photo of Josh Lewis

Josh Lewis

  • 1,218 Points 1k badge 2x thumb
Hi Josef,

There isn't a way that I know of to achieve this declaratively, but you could likely achieve what you are looking for with a snippet. I found this post from a few months ago: https://community.skuid.com/skuid/topics/help-highlighting-a-table-cell-based-on-two-table-row-value... where you were working on some conditional rendering of table rows, and setting this up with the deck might be similar (you may find some of this as useful code to reuse) if you'd like to try that approach?

Thanks,

Josh
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
Hi Josh - It would be lovely to repurpose that javascript, but I'm not sure how to do that with cards since there is no place to insert a snippet. 

This post references a potentially issue, but has to resolution yet. 
https://community.skuid.com/skuid/topics/brooklyn-deck-background-question
Photo of Josh Lewis

Josh Lewis

  • 1,218 Points 1k badge 2x thumb
Thanks for sharing that related post Josef. I'll take a look at that and the associated issue as well and get back to you with what I find on this side.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Josef,

I wanted to offer a workaround in lieu of coloring the entire card.  Here is a sample page based on Opportunities that uses a Template component with dynamic coloring.  A Model UI Formula field generates the color value.

You could even use the Template component for displaying all of your data.  This would be close to setting the background color for the card.

Thanks,

Bill

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="Opps" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Opportunity">
            <fields>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="Amount"/>
                <field id="CloseDate"/>
                <field id="Name"/>
                <field id="Id"/>
                <field id="Color" uionly="true" displaytype="FORMULA" label="Color" ogdisplaytype="TEXT" readonly="true" returntype="TEXT">
                    <formula>IF({{Amount}}&gt;50000,'#66ccff','white')</formula>
                </field>
                <field id="Probability"/>
                <field id="StageName"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Opps" uniqueid="sk-2_hzhN-287">
            <maintitle>Opportunities</maintitle>
            <actions>
                <action type="savecancel" label="New Button" uniqueid="sk-2_i0Dq-328">
                    <savehotkeys>
                        <hotkey modifiers="ctrl" key="s"/>
                    </savehotkeys>
                </action>
            </actions>
        </pagetitle>
        <deck searchmethod="server" searchbox="true" columngutter=".75em" rowgutter=".75em" model="Opps" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" uniqueid="sk-1QFeWi-265" buttonposition="" pagesize="10">
            <components>
                <wrapper uniqueid="sk-1QFqJI-335">
                    <components>
                        <template multiple="false" uniqueid="sk-2_XXpI-620" allowhtml="true" model="Opps">
                            <contents>&lt;table id="decktable" style="background-color:{{{Color}}};"&gt;
&lt;tr&gt;&lt;td&gt;{{Account.Name}}&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;{{Amount}}&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</contents>
                            <conditions>
                                <condition type="contextrow" field="Id" mergefield="Id" operator="="/>
                            </conditions>
                            <renderconditions logictype="and"/>
                        </template>
                        <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Opps" buttonposition="" uniqueid="sk-1QFran-348" mode="read">
                            <columns>
                                <column width="100%">
                                    <sections>
                                        <section title="Opportunity Fields" collapsible="no" showheader="false">
                                            <fields>
                                                <field uniqueid="sk-1QFy6J-437" id="Name" valuehalign="" type=""/>
                                                <field uniqueid="sk-2_kQ8m-749" id="Probability"/>
                                                <field uniqueid="sk-2_kQ8m-750" id="StageName"/>
                                                <field uniqueid="sk-1QFy6K-439" id="CloseDate" valuehalign="" type=""/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                            </columns>
                        </basicfieldeditor>
                    </components>
                    <styles>
                        <styleitem type="background" bgtype="none"/>
                        <styleitem type="border"/>
                        <styleitem type="size"/>
                    </styles>
                    <renderconditions logictype="and"/>
                </wrapper>
            </components>
            <massactions/>
            <interactions/>
            <actions/>
            <styles>
                <styleitem type="border"/>
            </styles>
        </deck>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css>
            <cssitem location="inline" name="decktableCSS" cachelocation="false">#decktable {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
</cssitem>
        </css>
        <actionsequences uniqueid="sk-1QFTZV-228"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
Hey Bill,

As usual, I appreciate the response!

Unfortunately I am trying to color the entire card b/c it's being viewed on mobile in a stacked formation. 

Do you happen to know of anyway to include merge syntax in CSS? I was able to create an onload javascrpt snippet that changes the card background, but I can't make it dynamic without the merge syntax in the CSS. 
Photo of Rich Slack

Rich Slack

  • 4,134 Points 4k badge 2x thumb
Thanks Bill!  I like it!
Photo of Josh Lewis

Josh Lewis

  • 1,218 Points 1k badge 2x thumb
Josef,

Here is a pretty basic example shared with me by a colleague internally at Skuid, which might be a way you could leverage CSS to change the background colors as you outlined:

If you want to show red, blue, and green, you would define the following rules in a stylesheet:

.red{

   background-color: red;

}

.blue{

   background-color: blue;

}

.green{

   background-color: green;

}

From there, you would create a UI-Only formula on the deck model that checks the value of whichever field you want to be the deciding factor and returns the name of the CSS selector you’ve defined.

For example, if you want to see red when a field named `Measurement` is less then 50, blue when it is between 51 and 70, and green when it is above 70. To do this, you’ll create a UI-Only formula named "MeasurementBackgroundColor" with the following logic:

IF({{Measurement}} < 50, "red", IF({{Measurement}} < 70, "blue", "green"),"")

Finally, in the template component, you would apply the class value for `MeasurementBackgroundColor` in the HTML directly:

<div class="{{{MeasurementBackgroundColor}}}">

   <!-- Comment -->

</div>

For a value of Measurement of < 50 it would render like this:

<div class="red">

   <!--  Comment -->

</div>
Photo of Josh Lewis

Josh Lewis

  • 1,218 Points 1k badge 2x thumb
David, would you be able to provide more details about what you are looking to achieve? Are you looking to change the alignment of the content within the card?
Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb
Not at all.. I have the deck good to go and can drop the template above into the deck but the div etc only changes the color of the template itself.. not the card

I was wanting to alter the color of the card background itself if possible. 
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
David,

The template is the card. In my case, I had to set the padding to 0 for .sk-deck article so that the white spacing was shrunk and I was left with just the colored backgroudn. 

.sk-deck article {
    padding: 0;
}

These are what my cards look like. Could you post a screenshot of your cards and/or the CSS you have applied? 
Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb
Hey Josef.. thanks for the message. The template being in the card delivers the pink and green band at the top I understand .. does on mine also .. I was after the entire card background color being changed to our selected color(s)

Great look cards by the way ) .. I was keen to be able to alter the entire background (grey in your case)  .. if you have any tips that would be great but it may be too hard (
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
Hi David,

You can change the background by changing the CSS attached to the templates.


Josh has outlined that process as noted above, but I will share my setup to hopefully provide additional clarity.


I have a deck and within that deck I have a template. 

Template specific:

<div class="{{{ColorCodeCard}}}">
    <table class="CardTable" id="CardTable" style="width:100%">
        <tr>
            <td rowspan="2" style="width:70px">{{Meeting_Date__c}}</td>
            <td>Related to: {{#WhatIdReadOnly}}{{WhatIdReadOnly}}{{/WhatIdReadOnly}}{{^WhatIdReadOnly}}None{{/WhatIdReadOnly}}</td>
        </tr>
        <tr>
            <td>Sub-Type: {{Sub_Type__c}}</td>
        </tr>
    </table>
</div>

{{{ColorCodeCard}}} is my UI formula field:
IF({{Type__c}}=="Opportunity Support","oppSupport",
IF({{Type__c}}=="Marketing Support","marketingSupport",
IF({{Type__c}}=="Training & Development","traingAndDevelopment",
IF({{Type__c}}=="Customer Care Support","customerCareSupport",
IF({{Type__c}}=="Demo Build and Tenants","tenantMaintenance",
"ccc9c9")))))

                       
I then have the following CSS class to modify my cards based on the given type:

.oppSupport{
    border-top: 3px solid #63a6f7;  
    border-radius: 4px;
    background: blue;
}
.marketingSupport {
    border-top: 3px solid #65ccaf;  
    border-radius: 4px;
    background: red;
}
.traingAndDevelopment{
    border-top: 3px solid #ff5c9a;  
    border-radius: 4px;
    background: green;
}
.customerCareSupport{
    border-top: 3px solid #9933ff;  
    border-radius: 4px;
    background: black;
}
.tenantMaintenance{
    border-top: 3px solid #ffa126;  
    border-radius: 4px;
    background: white;
}
.ccc9c9 {
    border-top: 3px solid #ccc9c9;
    border-radius: 4px;
    background: gray;
}

.sk-deck article {
    padding: 0;
}

.CardTable {
    table-layout: auto;
}

#CardTable td {
    color: black;
}

.sk-deck article {
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-top: 0;
    border-radius: 4px;
}

You would need to add the background: xxx property to the specific card types noted in bold above. 
Photo of Josef Lagorio

Josef Lagorio

  • 2,874 Points 2k badge 2x thumb
Josh & Bill - Thanks a ton for helping me get this done. After removing the padding from the card, everything looks great!