Dynamic Color Change in Oracle Application Framework (OAF)

Introduction

This is the second and final part of the guide on Dynamic Color Change in Oracle Application Framework (OAF). In Part 1, we created the foundational objects including the workspace, project, View Object, and the OAF page structure.

In this part, we will complete the dynamic color implementation by:

Configuring the query region and results table
Adding styled text items to the table columns
Creating the Controller for the page
Writing the code to dynamically color the Status column based on its value
Rebuilding and testing the page

Part 1 Reference: https://rpforacle.blogspot.in/2013/03/dynamic-color-change-in-oaf.html

Prerequisites

Before proceeding, ensure the following are complete from Part 1:

Workspace RohitOafColor created
Project RohitOafColor created
View Object ChecksVO created
OAF Page RohitOafColorPG created
Application Module RohitOafColorAM created with ChecksVO attached
Region1 (PageLayoutRN) and Region2 (MainRN) created

Test Case: Dynamic Color Based on Status

Business Requirement: Display a list of checks (payments) in a table. The Status column should be displayed in different colors based on the status value:

Cleared → Green
Voided → Red
Reconciled → Blue
Other statuses → Default color

The color change must be dynamic — determined at runtime based on the data returned from the database.

Step 1: Configure the Query Region

Select Region2:
- In the Structure pane, click on Region2 (the MainRN region)
Set Query Region Properties:

Property	Value
Region Style	`query`
Construction Mode	`resultsBasedSearch`

Explanation: The query region style with resultsBasedSearch construction mode provides the standard Oracle search-and-results interface, including the search panel and the results area.

Step 2: Create the Results Table

Create a New Region:
- Right-click on Region2
- Select New → Region
- A new region (Region3) is created
Configure the Region:
- In the Property Inspector, set:
  - ID: ChecksVO
  - Region Style: table

Note: Naming the region after the View Object (ChecksVO) makes it clear which data source the table is bound to.

Step 3: Add Columns to the Results Table

Now we create the columns for the table. Each column is a messagestyledtext item bound to a View Object attribute.

3.1 Create the Bank Account Name Column

Create the Item:
- Right-click on ChecksVO
- Select New → Item
- An item (item1) is created
Configure the Item:

Property	Value
ID	`BankAccountName`
Item Style	`messagestyledtext`
View Instance	`ChecksVO`
View Attribute	`BankAccountName`

3.2 Create the Vendor Name Column

Property	Value
ID	`VendorName`
Item Style	`messagestyledtext`
Search Allowed	`True`
View Instance	`ChecksVO`
View Attribute	`VendorName`

3.3 Create the Amount Column

Property	Value
ID	`Amount`
Item Style	`messagestyledtext`
View Instance	`ChecksVO`
View Attribute	`Amount`

3.4 Create the Status Column

Property	Value
ID	`StatusLookupCode`
Item Style	`messagestyledtext`
View Instance	`ChecksVO`
View Attribute	`StatusLookupCode`

Important: The StatusLookupCode column is the one we will dynamically color based on its value.

Step 4: Create the Controller

Create the Controller:
- Right-click on Region1 (PageLayoutRN)
- Select Set New Controller
Configure the Controller:
- Controller Name: RohitOafColorCO
- Package: rohit.oracle.apps.fnd.RohitOafColor.webui

Note: Controllers are always created under the webui directory of the project, following OAF standards.

Step 5: Write the Dynamic Color Code

Open the controller file (RohitOafColorCO.java) and add the following code.

5.1 Required Import Statements

import oracle.apps.fnd.common.VersionInfo;
import oracle.apps.fnd.framework.webui.OAControllerImpl;
import oracle.apps.fnd.framework.webui.OADataBoundValueViewObject;
import oracle.apps.fnd.framework.webui.OAPageContext;
import oracle.apps.fnd.framework.webui.beans.OAWebBean;
import oracle.apps.fnd.framework.webui.beans.message.OAMessageStyledTextBean;
import oracle.apps.fnd.framework.webui.beans.table.OAAdvancedTableBean;
import oracle.apps.fnd.framework.webui.beans.table.OAColumnBean;
import oracle.apps.fnd.framework.webui.beans.table.OATableBean;

5.2 Process Request Code

Add the following code in the Process Request block of the controller:

super.processRequest(pageContext, webBean);

// Find the table region
OATableBean table = (OATableBean)webBean.findIndexedChildRecursive("ChecksVO");

// Find the Status column within the table
OAMessageStyledTextBean job = 
    (OAMessageStyledTextBean)table.findIndexedChildRecursive("StatusLookupCode");

// Create a data-bound style value
OADataBoundValueViewObject cssjob = new OADataBoundValueViewObject(job, "Status");

// Apply the style class to the item
job.setAttributeValue(oracle.cabo.ui.UIConstants.STYLE_CLASS_ATTR, cssjob);

Code Explanation

Line	Purpose
`OATableBean table = ...findIndexedChildRecursive("ChecksVO");`	Finds the ChecksVO table region
`OAMessageStyledTextBean job = ...findIndexedChildRecursive("StatusLookupCode");`	Finds the Status column item
`OADataBoundValueViewObject cssjob = new OADataBoundValueViewObject(job, "Status");`	Creates a data-bound style value that references the "Status" attribute
`job.setAttributeValue(oracle.cabo.ui.UIConstants.STYLE_CLASS_ATTR, cssjob);`	Applies the style class to the item dynamically

Important: The OADataBoundValueViewObject class is the key to dynamic styling. It binds the CSS style class to a View Object attribute, allowing the style to change based on the data value. The second parameter ("Status") is the name of the View Object attribute that contains the style class name.

Step 6: Create the Style Attribute in the View Object

For the dynamic color to work, the View Object must have an attribute that returns the CSS style class name based on the status value.

Open the View Object:
- In the Application Navigator, right-click on ChecksVO
- Select Edit ChecksVO
Add a New Attribute:
- Go to the Attributes section
- Click New to create a new attribute
- Attribute Name: Status
- Type: String
- Updatable: Always

Add the SQL Expression:

In the query, add a CASE expression that returns the appropriate CSS class:

SELECT 
    bank_account_name,
    vendor_name,
    amount,
    status_lookup_code,
    CASE 
        WHEN status_lookup_code = 'CLEARED' THEN 'OraTableDataCellGreen'
        WHEN status_lookup_code = 'VOIDED' THEN 'OraTableDataCellRed'
        WHEN status_lookup_code = 'RECONCILED' THEN 'OraTableDataCellBlue'
        ELSE 'OraTableDataCell'
    END AS status
FROM ap_checks_all
WHERE status_lookup_code IS NOT NULL

Note: The CSS class names (OraTableDataCellGreen, OraTableDataCellRed, etc.) are standard Oracle E-Business Suite style classes. You can also define your own custom CSS classes in a custom stylesheet.

Save the View Object:
- Click OK to save the changes

Important: The Status attribute must return a valid CSS class name. The OADataBoundValueViewObject uses this value to set the styleClass attribute of the item at runtime.

Step 7: Understanding the Dynamic Color Mechanism

The following illustrates how dynamic coloring works:

┌─────────────────────────────────────────────────────────────────┐
│                     VIEW OBJECT QUERY                           │
│  SELECT ...,                                                    │
│  CASE                                                           │
│    WHEN status = 'CLEARED' THEN 'OraTableDataCellGreen'         │
│    WHEN status = 'VOIDED' THEN 'OraTableDataCellRed'            │
│    WHEN status = 'RECONCILED' THEN 'OraTableDataCellBlue'       │
│    ELSE 'OraTableDataCell'                                      │
│  END AS status                                                  │
│  FROM ap_checks_all                                             │
└──────────────────────────┬──────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────────┐
│                    RESULT SET                                   │
│  ┌────────────┬────────────┬────────┬──────────────┐           │
│  │ Bank Acct  │ Vendor     │ Amount │ Status       │           │
│  ├────────────┼────────────┼────────┼──────────────┤           │
│  │ Account1   │ Vendor A   │ 1000   │ CLEARED      │           │
│  │ Account2   │ Vendor B   │ 2000   │ VOIDED       │           │
│  │ Account3   │ Vendor C   │ 3000   │ RECONCILED   │           │
│  └────────────┴────────────┴────────┴──────────────┘           │
└──────────────────────────┬──────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────────┐
│                 DYNAMIC STYLE APPLICATION                       │
│  1. OADataBoundValueViewObject binds to "Status" attribute      │
│  2. For each row, the Status value determines the CSS class     │
│  3. CLEARED → Green, VOIDED → Red, RECONCILED → Blue            │
│  4. The style class is applied to the StatusLookupCode item     │
└─────────────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────────┐
│                    COLORED TABLE                                │
│  ┌────────────┬────────────┬────────┬──────────────┐           │
│  │ Bank Acct  │ Vendor     │ Amount │ Status       │           │
│  ├────────────┼────────────┼────────┼──────────────┤           │
│  │ Account1   │ Vendor A   │ 1000   │ CLEARED (G)  │           │
│  │ Account2   │ Vendor B   │ 2000   │ VOIDED (R)   │           │
│  │ Account3   │ Vendor C   │ 3000   │ RECONCILED(B)│           │
│  └────────────┴────────────┴────────┴──────────────┘           │
└─────────────────────────────────────────────────────────────────┘

Understanding the Key Classes

Class	Purpose	Key Method/Property
OATableBean	Represents the table region	`findIndexedChildRecursive()`
OAMessageStyledTextBean	Represents the styled text item	`setAttributeValue()`
OADataBoundValueViewObject	Binds a style to a VO attribute	Constructor: `(item, attributeName)`
UIConstants.STYLE_CLASS_ATTR	The style class attribute constant	Used to set the CSS class

How OADataBoundValueViewObject Works

The OADataBoundValueViewObject class creates a data-bound value that:

References a specific View Object attribute (e.g., "Status")
Evaluates the attribute value for each row at runtime
Returns the value as the CSS style class for the item

This is what enables the color to change dynamically based on the data.

Step 8: Rebuild and Run the Project

Rebuild the Project:
- Right-click on the project RohitOafColor
- Select Rebuild

Note: Rebuilding compiles all Java classes and ensures there are no errors before deployment.

Run the Page:
- After successful compilation, right-click on RohitOafColorPG
- Select Run
Verify the Output:
- The page opens with the checks table
- The Status column displays different colors based on the status value:
  - Cleared → Green
  - Voided → Red
  - Reconciled → Blue
- The colors change dynamically as the data changes

Standard Oracle Style Classes

The following are commonly used Oracle E-Business Suite style classes for table cells:

CSS Class	Color	Typical Use
`OraTableDataCell`	Default (black)	Normal data
`OraTableDataCellGreen`	Green	Success, cleared, approved
`OraTableDataCellRed`	Red	Error, voided, rejected
`OraTableDataCellBlue`	Blue	Information, reconciled
`OraTableDataCellYellow`	Yellow	Warning, pending
`OraTableDataCellOrange`	Orange	Caution, in progress
`OraTableDataCellGray`	Gray	Inactive, disabled

Tip: You can also create your own custom CSS classes in a custom stylesheet and reference them in the View Object query.

Best Practices

Practice	Description
Use Standard Classes	Use Oracle's standard style classes where possible
Define Business Rules in SQL	Put the CASE logic in the View Object query, not in Java
Keep Colors Consistent	Use the same color for the same status across all pages
Test with Different Data	Test with various status values to verify all colors
Consider Accessibility	Ensure colors are distinguishable for color-blind users
Document Color Meanings	Maintain a reference of which color means what
Use Meaningful Attribute Names	Name the style attribute descriptively (e.g., `StatusStyle`)

Troubleshooting Common Issues

Issue	Possible Cause	Solution
Colors not applied	Wrong attribute name	Verify the `OADataBoundValueViewObject` attribute name
All rows same color	CASE expression not returning different values	Verify the SQL CASE logic
Item not found	Wrong item ID	Verify the `findIndexedChildRecursive` ID
Table not found	Wrong table ID	Verify the `findIndexedChildRecursive` ID for the table
Compilation errors	Missing imports	Add imports for OADataBoundValueViewObject, OATableBean, etc.
Colors not updating	VO not re-executed	Ensure the VO query is executed when the page loads
Wrong color for status	Incorrect CSS class name	Verify the CSS class name matches the Oracle style

Required Import Statements

import oracle.apps.fnd.common.VersionInfo;
import oracle.apps.fnd.framework.webui.OAControllerImpl;
import oracle.apps.fnd.framework.webui.OADataBoundValueViewObject;
import oracle.apps.fnd.framework.webui.OAPageContext;
import oracle.apps.fnd.framework.webui.beans.OAWebBean;
import oracle.apps.fnd.framework.webui.beans.message.OAMessageStyledTextBean;
import oracle.apps.fnd.framework.webui.beans.table.OAAdvancedTableBean;
import oracle.apps.fnd.framework.webui.beans.table.OAColumnBean;
import oracle.apps.fnd.framework.webui.beans.table.OATableBean;

Summary

Completing the Dynamic Color Change implementation involves the following key steps:

Configure the Query Region: Set Region Style = query and Construction Mode = resultsBasedSearch
Create the Results Table: Add a table region named after the View Object
Add Columns: Create messagestyledtext items for each column
Create the Controller: Add a controller to the page
Write the Dynamic Color Code: Use OADataBoundValueViewObject to bind the style to a VO attribute
Add the Style Attribute: Add a CASE expression to the VO query that returns the CSS class name
Rebuild and Test: Compile and verify the dynamic colors

Key Points to Remember

The OADataBoundValueViewObject class is the key to dynamic styling
The style attribute in the View Object must return a valid CSS class name
The CASE expression in the SQL query determines which color is applied
The STYLE_CLASS_ATTR constant is used to set the style class on the item
Standard Oracle style classes (e.g., OraTableDataCellGreen) are available for use
The color changes dynamically based on the data returned from the database

Why Dynamic Color Matters

Dynamic color change is a powerful feature that enhances the user experience by:

Highlighting Important Information: Drawing attention to critical statuses
Improving Readability: Making it easier to scan large datasets
Conveying Meaning: Using color to represent status or priority
Reducing Errors: Helping users quickly identify problem records
Enhancing Visual Appeal: Making the page more engaging and professional

By mastering dynamic color change, you can create OAF pages that are not only functional but also visually informative, helping users quickly understand the state of their data.

References

Part 1: Dynamic Color Change in OAF — https://rpforacle.blogspot.in/2013/03/dynamic-color-change-in-oaf.html
Part 2: Dynamic Color Change in OAF (Continued) — https://rpforacle.blogspot.in/2013/03/part2-dynamic-color-change-in-oa-framework.html
Oracle E-Business Suite Documentation: OA Framework Developer's Guide
Oracle JDeveloper Documentation: Available in the jdevdoc folder
Related Guides: Creating a Search Page in OAF, Creating an LOV in OAF, Partial Page Rendering in OAF

Oracle Apps/DBA

Pages

41. Dynamic Color Change in OA Framework