Pages

Tuesday, November 8, 2016

ADF Skinning - Styling table column And Hiding checkbox in SelectManyChoice



Few ADF Skinning Tips

Recently I came across a OTN question and some requirements on ADF Skinning. 

OTN question : How to allow user to select multiple values in selectManyChoice but not showing   checkbox ?

Well first I checked whether it is possible to select multiple values using CTRL+CLICK without selecting checkbox ...and yes it is. So only thing left is to hide the checkbox. Well then all we need is correct adf skin selectors and some basic css. Here is the sample code :

Apply the smcCheckboxHide class on SelectManyChoice component 
          <af:selectManyChoice label="TestCheckbox" styleClass="smcCheckboxHide">
          <f:selectItem itemValue="MALE" itemLabel="MALE" id="si11"/>
            <f:selectItem itemValue="FEMALE" itemLabel="FEMALE" id="s1i2"/>
          </af:selectManyChoice>

and hide the checkbox in css using below code : 

af|selectManyChoice::content-input.smcCheckboxHide {
display:none
}

Refer to http://jdevadf.oracle.com/adf-richclient-demo/docs/skin-selectors.html
af|selectManyChoice::content-input - >Style on the native checkbox of the af:selectManyChoice component.

Another requirement that came up is to have right border on few columns in adf table. Again we need to lookup for the right adf skin selectors. Sample code : 

Apply the style class on column { rightColHeaderBorder for header and for datacell }

<af:column sortable="false" headerText="Name" align="start" id="c2" headerClass="rightColHeaderBorder" styleClass="rightColBorder">
            <af:outputText value="#{row.name}" id="ot2"/>
 </af:column>

Skinning code :

af|table af|column::column-header-cell.rightColHeaderBorder, 
af|table af|column::banded-data-cell.rightColBorder, 
af|table af|column::data-cell.rightColBorder{
    border-right-color: Blue;
    border-right-width: thin;
}


Enjoy!!!! 
Feel free to provide your inputs in comments..