Dynamic Background Color for Deck component cards

edited February 5 in Questions
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? 

Comments

  • edited January 2018
    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
  • edited January 2018
    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
  • edited January 2018
    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.
  • edited February 5
    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>


  • edited January 2018
    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. 
  • edited February 2018

    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>

  • edited January 2018
    Josh & Bill - Thanks a ton for helping me get this done. After removing the padding from the card, everything looks great!
  • edited February 2018
    Hi Josh.. just a quick follow up question if I can. I see how this changes background on the template. How can I get the card background shifted also? Is there some way to get the card itself referring to the template for its' background color?
  • edited February 2018
    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?
  • edited February 2018
    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. 
  • edited February 2018
    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? 
    image

  • edited February 2018
    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 (


  • edited February 2018
    Hi David,

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

    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. 
  • edited June 2018
    Thanks Bill!  I like it!
Sign In or Register to comment.