Change Style of ADF TreeTable, Column, Data Cell, Selected Row using ADF Skin

Sharing is Caring

Hello Everyone

In this tutorial, We’ll learn to change look n feel of ADF tree table component using Oracle ADF Skin
Here I am using Departments and Employees table HR Schema to prepare the model and created tree Table using view link between Departments and Employees View Object


You can check this link to know more about treeTable component – How to create treeTable in Oracle ADF

Added basic styling for master data in inlineStyle property of af:treeTable and it looks like this

<af:treeTable value="#{bindings.Departments1.treeModel}" var="node"
                              selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single"
                              id="tt1" width="350px" columnStretching="last" verticalGridVisible="false"
                              horizontalGridVisible="false" autoHeightRows="-1">
                    <f:facet name="nodeStamp">
                        <af:column id="c1"
                                   inlineStyle="#{node.DepartmentId!=null ?'font-weight:bold;color:white;background-color:#0086fe;' : ''}"
                                   width="200">
                            <af:outputText value="#{node.DepartmentName}" id="ot1"/>
                        </af:column>
                    </f:facet>
                    <f:facet name="pathStamp">
                        <af:outputText value="#{node}" id="ot2"/>
                    </f:facet>
                    <af:column id="c2"
                               inlineStyle="#{node.DepartmentId!=null ?'font-weight:bold;color:white;background-color:#0086fe;' : ''}">
                        <af:panelGroupLayout id="pgl1" layout="horizontal">
                            <af:outputText value="#{node.FirstName}" id="ot3"/>
                            <af:spacer width="3" height="0" id="s1"/>
                            <af:outputText value="#{node.LastName}" id="ot4"/>
                        </af:panelGroupLayout>
                    </af:column>
                </af:treeTable>

 

Now for styling of child records created an ADF skin file – How to create and apply ADF Skin

Change style of data-cell and banded data-cell

Use these selectors to modify child records property

/**Change properties of a data cell**/
 af|column::data-cell{
    background-color: #b5ddff;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #00496e;
}
/**Change properties of a banded data cell**/
 af|column::banded-data-cell {
    background-color: #b5ddff;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #00496e;
}

 

 

Change style of the column for the hover event

 

/**Change properties of a column on hover**/
af|table::data-row:highlighted af|column::data-cell, 
af|table::data-row:highlighted af|column::banded-data-cell {
    color: brown;
    background-color: #ffde73;
    font-weight:bold;
}

 

 

Change af:treeTable selected row style

 

/**Change properties of a selected column**/
af|table::data-row:selected:inactive af|column::data-cell,
af|table::data-row:selected:inactive af|column::banded-data-cell,
af|table::data-row:selected:focused af|column::banded-data-cell,
af|table::data-row:selected:focused af|column::data-cell,
af|table::data-row:selected af|column::data-cell, 
af|table::data-row:selected af|column::banded-data-cell {
    color: white;
    background-color: #008484;
    font-weight: bold;
}

 

 

Change Expand and Collapse icon of af:treeTable

Use these selectors to change icons of treeTable

af|treeTable::collapsed-icon-style {
    background-image: url("../../bullet_toggle_plus.png");
}

af|treeTable::expanded-icon-style {
background-image: url(“../../bullet_toggle_minus.png”);
}

 

Cheers 🙂 Happy Learning

Related Posts

I’m an Oracle ACE, Blogger, Reviewer,
Technical Lead working on Oracle ADF

4 thoughts on “Change Style of ADF TreeTable, Column, Data Cell, Selected Row using ADF Skin”

  1. Hi Ashish your blogs are so much helpful to adf developers thanks for your support over ADF.

    I have one issue with ADF application in IE browser i hope its the issue for all may be you have any solution for this

    My issue is in when i have enter a text in Input field it was showing X mark right corner how can we restrict this in adf. In normal HTML we can use input::-ms-clear{display:none;} but in faces it will not helping us. is there any solution to achieve this.

  2. Blogs are not just for socializing with others but it can also give us useful information. like this just like me I'am a new blogger and this article gave me lots of ideas on how to start blogging to a site or posts.

Leave a Reply

Your email address will not be published. Required fields are marked *