Please disable your adblock and script blockers to view this page

Search this blog

Tuesday 8 May 2018

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

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

4 comments :

  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.

    ReplyDelete
    Replies
    1. Hi Praveen

      In IE8 I am not able to see that X mark so I can't check it , Once you check this and try to use in ADF Skin file
      Remove IE10's “clear field” X button on certain inputs?


      Ashish

      Delete
  2. Very nice... i really like your blog

    ReplyDelete
  3. 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.

    ReplyDelete