Please disable your adblock and script blockers to view this page

Search this blog

Thursday 10 November 2016

Styling Input components inside af:query using ADF Skin


This another post is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn't do the job



Here I am sharing a simple example of styling af:query input components, A typical af:query components looks like this


and to change DepartmentId selectOneChoice and ManagerId inputText's content style we can use this CSS

af|query::criterion af|selectOneChoice::content {
    width: 207px;
    font-weight: bold;
    color:navy;
    padding:5px;
}
af|query::criterion af|inputText::content {
    width: 200px;
    font-weight: bold;
    color:red;
    padding:5px;
}

and after using this CSS af:query looks like this


Now changing labelStyle is a bit tricky, for that we have to inspect generated HTML code of component on the browser and find correct tag so that we can alter CSS of that tag



Now we have Id of the component and we know the tag that should be altered, Use this CSS to change label style of components

af|query label[for*='qryId1:oper0:']{
    color:#003194;
    font-weight:bold;
    font-family: cursive;
}
af|query label[for*='qryId1:oper1:']{
    color:#003194;
    font-weight:bold;
    font-family: cursive;
}

and output is


Cheers :) Happy Learning

8 comments :

  1. Hi, I have one question about af:query. How can I show DepartmentId as SelectOeChoice by default? Thanks and regards

    ReplyDelete
    Replies
    1. You need to define list of values for DepartmentId in your View Object.

      Delete
    2. Hi, thanks for your response. I`ve defined a lis of values for DepartmentId. When i use the default view criteria (all attributes) show as LOV, but I need create new view criteria with only departmentId as LOV and in af:query not show like LOV.

      Delete
    3. luis

      If you have defined LOV in Department Id then it'll appear as SOC in af:query too and to show only one attribute in af:query you can create a new criteria and drop as af:query on page

      Ashish

      Delete
  2. Where is the css file located?

    ReplyDelete
    Replies
    1. It is in view controller project under WebContent (default location where ADF Skin is created)

      Delete
  3. dear ashish
    how to change row color as per specific condition ?

    ReplyDelete
    Replies
    1. You can wirte condtional expression in inline style of all columns of table like this
      background-color:#{row.bindings.flag.inputValue=='Y' ? 'yellow' : 'red' };

      Ashish

      Delete