[go: up one dir, main page]
Scribd
Upload
17 views4 pages

Oracle R12 OAF Color

Uploaded by

unnikallikattu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views4 pages

Oracle R12 OAF Color

Uploaded by

unnikallikattu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

OAF: Creating custom CSS in Oracle Application

Framework.
Recently I saw a question in OTN Forum on how to create custom CSS in OA Framework. Its long time I
have done some custom CSS for OA Framework. So thought of putting a blog on how to add custom
CSS for OAF Pages.

Refer the below link for Standard CSS available : Text (CSS) Standards
To get the HTML Color Codes : HTML Color Codes and Names

To add custom style sheet to your application, you need to modify the custom.xss file. The file is available
under $OA_HTML/cabo/styles.

#1. Using custom.css

 Take a backup of the custom.xss


 Add the code between the below lines in the custom.css

<!-- Please start your customizations here -->


// Add the custom code here
<!-- Please end your customizations here -->

 Sample code

<!-- Please start your customizations here -->


<style name="CustomStyle1">
<property name="color">#0000FF</property>
<property name="background-color">#FFFF00</property>
</style>
<style selector=".XXCustomStyle1">
<includeStyle name="CustomStyle1"/>
</style>
<style name="CustomStyle2">
<property name="color">#FF0000</property>
<property name="background-color">#00FF00</property>
<property name="font-weight">bold</property>
</style>
<style selector=".XXCustomStyle2">
<includeStyle name="CustomStyle2"/>
</style>
<!-- Please end your customizations here -->

 Now you can refer the new style in the page using "XXCustomStyle1" for the CSS Class
property of the beans in the page.
#2. Writing code in Controller
import oracle.cabo.style.CSSStyle;
CSSStyle customStyle = new CSSStyle();
customStyle.setProperty("color", "#FFA500");
customStyle.setProperty("font-size", "13pt");

OAMessageDateFieldBean dateBean =
(OAMessageDateFieldBean)webBean.findChildRecursive("DateBean");
dateBean.setInlineStyle(customStyle);

 Find the screen shot below to see the output of the above code. First column is based on the
controller code and the 2nd and 3rd columns are based on the custom.xss.
 Now, you can also make use of the OADataBoundValueViewObject class to dynamically
change the CSS. I have modified the View Object query to add an extra column
'CustomCssStyleAttr'. I am getting the Custom CSS Style Class as an attribute. In the below
query, we will get 3 different values, XXCustomStyle1, XXCustomStyle2, NULL. The query is as
below.

select creation_date start_date


,user_id Hours
,decode(mod(rownum,3),0,NULL,1,'XXCustomStyle1',2,'XXCustomStyle2')
CUSTOM_CSS_STYLE_ATTR
from fnd_user

 Also, modifed the controller code as below.

CSSStyle customStyle = new CSSStyle();


customStyle.setProperty("color", "#FFFFFF");
customStyle.setProperty("background-color", " ");
customStyle.setProperty("font-size", "11pt");

OAMessageDateFieldBean dateBean =
(OAMessageDateFieldBean)webBean.findChildRecursive("DateBean");
dateBean.setInlineStyle(customStyle);

OAColumnBean customStyleCol =
(OAColumnBean)webBean.findChildRecursive("CustomStyleCol");
OADataBoundValueViewObject customStyleCSS = new
OADataBoundValueViewObject(customStyleCol, "CustomCssStyleAttr");

customStyleCol.setAttributeValue(oracle.cabo.ui.UIConstants.STYLE_CLASS_ATTR,c
ustomStyleCSS);

 Now see the output.


If your changes are not reflecting in the page, remove the files from $OA_HTML/cabo/styles/cache
directory and bounce the server.

You might also like