How to color a column header and particular filed of that column seperatly

  • 1
  • Question
  • Updated 1 year ago
  • Answered
how to add css for a column header and also for column particular field seperatly
please reply soon .
advance thanks 
Photo of Matrix

Matrix

  • 590 Points 500 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Mike Dwyer

Mike Dwyer

  • 3,330 Points 3k badge 2x thumb
This is what we do, with specific fields, but I'd certainly appreciate other approaches - and see if the column heads can also be colored.

Add a CSS In-Line Resource:
table.nx-skootable-data tbody tr.highlight_row_red-odd:nth-child(odd) td {    
   color: #FF0000;
}
table.nx-skootable-data tbody tr.highlight_row_red-even:nth-child(even) td {    
   color: #F80000;
}

Add a Javascript In-line Snippet:
var field = arguments[0];
var value = arguments[1];

field.item.element.removeClass("highlight_row_red-odd");
field.item.element.removeClass("highlight_row_red-even");

if ( field.model.getFieldValue( field.row, 'Selection_Date__c') === null ) 
{
  field.item.element.addClass("highlight_row_red-odd");
  field.item.element.addClass("highlight_row_red-even");
}
if ( field.mode == "edit" ) {
    skuid.ui.fieldRenderers[field.metadata.displaytype].edit( field, value ); }
else {
    skuid.ui.fieldRenderers[field.metadata.displaytype].read( field, value );
}

On the appropriate column in the table, replace the standard Field Renderer with the Custom snippet defined above.

This is just the tip of the iceberg, so to speak. There is also:

.blueHighlight {    
   background-color: lightblue;
}
var cellElem = field.element;
var cellElem2 = field.item.fields[i].element;
cellElem.addClass("blueHighlight");
cellElem2.addClass("blueHighlight");

and:

field.element.css("font-Weight", "bold");
field.element.css("background-color", "#B1F2A4");

which may give you some ideas and hints.
Photo of Matrix

Matrix

  • 590 Points 500 badge 2x thumb
Hi mike thanks. i like to know .this my code in xml it is  in a field editor many column with some field present . so let suppose i like to color the section header and and a field ....director__c .
and also the second header with diffrent color and second field of that column with diffrent color .
please help me . waiting for your reply.

 
 <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-2aIn1c-812" mode="read" layout="">
                            <columns layoutmode="fixed">
                                <column width="100%">
                                    <sections>
                                        <section title="business " collapsible="no">
                                            <fields>
                                                <columns uniqueid="sk-2aJBun-867" layoutmode="fixed">
                                                    <column width="25%">
                                                        <sections>
                                                            <section title="Key Official" collapsible="no"                     showheader="true">
                                                                <fields>
                                                                    <field uniqueid="sk-2aJyS--951" id="soft__c"/>
                                                                    <field uniqueid="sk-2aK6pF-957" id="Director__c"/>
                                                                    <field uniqueid="sk-2aKBdO-961" id="hard__c"/>
                                                                </fields>
                                                            </section>
                                                        </sections>
                                                    </column>
                       
                       <column width="70%">
                                                                            <sections>
                                                                                <section title="New Section" collapsible="no" showheader="false">
                                                                                    <fields>
                                                                                        <columns uniqueid="sk-2aLyeT-1108" layoutmode="fixed">
                                                                                            <column width="50%">
                                                                                                <sections>
                                                                                                    <section title="New Section" collapsible="no" showheader="false">
                                                                                                        <fields>
                                                                                                            <field uniqueid="sk-2aMoHX-1211" id="office__c" decimalplaces="" valuehalign="" type="">
                                                                                                                <label> </label>
                                                                                                            </field>
                                                                                                            <field uniqueid="sk-2aN5-Q-1269" id="home__c" decimalplaces="" valuehalign="" type="">
                                                                                                                <label> </label>
                                                                                                            </field>
                                                                                                        </fields>
                                                                                                    </section>
                                                                                                </sections>
                                                                                            </column>
                                                 
(Edited)
Photo of Mike Dwyer

Mike Dwyer

  • 3,330 Points 3k badge 2x thumb
Matrix -

I haven't worked with the field editor headers, but here is xml for a working page using your code and my additions. I've used javascript and css, and also given the value 'redText' to the CSS Class for your "business" section header. It works differently than expected!
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="Account" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="soft__c" displaytype="TEXT" label="Soft" defaultvaluetype="fieldvalue" defaultValue="soft"/>
                <field id="Director__c" displaytype="TEXT" label="Director" defaultvaluetype="fieldvalue" defaultValue="boss"/>
                <field id="hard__c" displaytype="TEXT" label="hard"/>
                <field id="office__c" displaytype="TEXT" label="office" defaultvaluetype="fieldvalue" defaultValue="here"/>
                <field id="home__c" displaytype="TEXT" label="home" defaultvaluetype="fieldvalue" defaultValue="there"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Account" buttonposition="" uniqueid="sk-2aIn1c-812" mode="read" layout="">
            <columns layoutmode="fixed">
                <column width="100%">
                    <sections>
                        <section title="business " collapsible="no" cssclass="redText">
                            <fields>
                                <columns uniqueid="sk-2aJBun-867" layoutmode="fixed">
                                    <column width="25%">
                                        <sections>
                                            <section title="Key Official" collapsible="no" showheader="true">
                                                <fields>
                                                    <field uniqueid="sk-2aJyS--951" id="soft__c" valuehalign="" type=""/>
                                                    <field uniqueid="sk-2aK6pF-957" id="Director__c"/>
                                                    <field uniqueid="sk-2aKBdO-961" id="hard__c"/>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                    <column width="70%">
                                        <sections>
                                            <section title="New Section" collapsible="no" showheader="false">
                                                <fields>
                                                    <columns uniqueid="sk-2aLyeT-1108" layoutmode="fixed">
                                                        <column width="50%">
                                                            <sections>
                                                                <section title="New Section" collapsible="no" showheader="false">
                                                                    <fields>
                                                                        <field uniqueid="sk-2aMoHX-1211" id="office__c" decimalplaces="" valuehalign="" type="">
                                                                            <label>office</label>
                                                                        </field>
                                                                        <field uniqueid="sk-2aN5-Q-1269" id="home__c" decimalplaces="" valuehalign="" type="CUSTOM" snippet="green">
                                                                            <label>home</label>
                                                                        </field>
                                                                    </fields>
                                                                </section>
                                                            </sections>
                                                        </column>
                                                    </columns>
                                                </fields>
                                            </section>
                                        </sections>
                                    </column>
                                </columns>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="green" cachelocation="false">var $ = skuid.$;
var field = arguments[0];
var value = arguments[1];
var cellElem = field.element;
cellElem.addClass("greenHighlight");
var renderer = skuid.ui.fieldRenderers[field.metadata.displaytype].read( field, value );
// May use .read or .edit. The .read is read-only; there is no option for read-with-inline-edit 
// toggle, and the row-action edit-row does not change the mode on the field as rendered.
</jsitem>
        </javascript>
        <css>
            <cssitem location="inline" name="redText" cachelocation="false">.redText {    
                   color: red;
                   background-color: #EE00FF;
                }</cssitem>
                <cssitem location="inline" name="green" cachelocation="false">.greenHighlight {    
   background-color: #CCFFCC;
}
</cssitem>
            </css>
        </resources>
        <styles>
            <styleitem type="background" bgtype="none"/>
        </styles>
    </skuidpage>
Photo of Matrix

Matrix

  • 590 Points 500 badge 2x thumb
Hi mike it is only coloring the back ground not the section header.
Please help.
Thanks
(Edited)
Photo of Matrix

Matrix

  • 590 Points 500 badge 2x thumb
Hi mike,
For header it is not working but for field it is working properly.
if i want to color field label than what have to do?
thanks 
(Edited)
Photo of Matrix

Matrix

  • 590 Points 500 badge 2x thumb
Hi mike ,
Thank you so much every thing is working properly.Thank you so much.