In this article we will walk you through the steps of how to Dynamically change the color of a column in an Advanced Table. Depending on the value of Job of each row the color needs to be changed for a particular column. For all other columns a different color needs to be changed. Eg: If the value for Job is " Manager" then the background color will be Red. For all other columns it will be Orange.

1. Right click on Applications and select New OA Workspace.

Set the below properties for the workspace: 

1. Set the following for the project:

   Name – ColorRows Default Package – cholaclr.oracle.apps.fnd.color

2. Select Chola as the database connection and click Next.

3. Set the below properties for the run time connection

   DBC File Name - \dbc_files\secure\VIS.dbc UserName – sysadmin Password – sysadmin Application Short Name – FND Responsibility Key - APPLICATION_DEVELOPER

    

4. Right click on the project and select new → ADF Business Components → Application Module.

   Set the below properties

   Name – ColorAM Package – cholaclr.oracle.apps.fnd.color.server

    

   

5. Click Next and Finish.

6. Right click on the project and select new → ADF Business Components → View Object.

   Name – ColorVO Package – cholaclr.oracle.apps.fnd.color





7. Click Next. Go to the SQL statement window and paste the below query:





VO Query
1 2 3 4 5 6 7 8 9 10	SELECT EmployeeEO.EMPNO, EmployeeEO.ENAME, EmployeeEO.JOB, EmployeeEO.SAL, EmployeeEO.DEPTNO, EmployeeEO1.EMPNO AS DNUM, EmployeeEO1.ENAME AS DNAME, decode(EmployeeEO.job,'MANAGER','1','2') color FROM EMP EmployeeEO, EMP EmployeeEO1 WHERE EmployeeEO.DEPTNO = EmployeeEO1.EMPNO(+)

 




8. Click Next.

9. Check the mappings for the attributes.

   

10. Uncheck the java file for ColorVOImpl.java and check the ColorVORowImpl.java.

    

11. Right click on ColorAM and shuttle the CholaVO to the right side.

    

12. Right click on the project select New. In the Web Tier → OA Components → Page.

    Name – SearchColorPG Package – cholaclr.oracle.apps.fnd.color.webui

    

13. Click on page and in the structure click on region1 and set the following properties for the region:

 

 

Id – PageLayoutRN AM Definition – cholaclr.oracle.apps.fnd.color.server.ColorAM Window Title - Chola's Search Page Page Title – Search Page

 

14. Right click on PageLayoutRN and select new → Region.

15. Set the following properties for the region.

    ID – QueryRN Region Style – query Construction Mode - resultsBasedSearch

     

16. Right click on QueryRN and select new → Region Using Wizard.

17. Select the ColorAM from the drop down and select ColorVO and click Next.

    

     

18. Set the Region ID to ResultsTable and set the Region Style to table.

14. Shuttle Ename, Empno, Job, Sal, Deptno to the right side and click Next.

14. Change the item style to messageStyledText for all the attributes.

14. Click Next and Finish.

15. Right click on PageLayoutRN and click New region.

    Name – ResultsTable Region Style – advancedTable Width – 75% View Instance - ColorVO1

     

16. Right click on ResultsTable and click new Column.

17. Drag and drop the Empno from the table region inside the column1.

18. Right click on columnHeader and select new → soratableHeader. Set the text to Emp No.

19. Click on Empno and Set the searchAllowed property to True.

20. Right click on ResultsTable and click new Column.

21. Drag and drop the Ename from the table region inside the column2.

22. Right click on columnHeader and select new → soratableHeader. Set the text to Emp Name.

23. Click on Ename and Set the searchAllowed property to True.

24. Right click on ResultsTable and click new Column.

25. Drag and drop the Job from the table region inside the column3.

26. Right click on columnHeader and select new → soratableHeader. Set the text to Job.

27. Click on Job and Set the searchAllowed property to True.

28. Right click on ResultsTable and click new Column.

29. Drag and drop the Sal from the table region inside the column4.

30. Right click on columnHeader and select new → soratableHeader. Set the text to Salary.

31. Click on Sal and Set the searchAllowed property to True.

32. Right click on PageLayoutRN and click set New Controller.

33. In the processRequest method write the below Code

    processRequest Code

    1 2 3 4 5

    OAAdvancedTableBean table = (OAAdvancedTableBean)webBean. findIndexedChildRecursive("ResultsTable"); OAColumnBean ejobcol = (OAColumnBean)webBean. findIndexedChildRecursive("Column3"); OAMessageStyledTextBean job = (OAMessageStyledTextBean)ejobcol. findIndexedChildRecursive("Job"); OADataBoundValueViewObject cssjob = new OADataBoundValueViewObject(job,"Color"); job.setAttributeValue(oracle.cabo.ui.UIConstants.STYLE_CLASS_ATTR, cssjob);

     

34. Save your work.

35. Our aim is to change the background color of Job column depending on the value of job. So we need to specify which color to change on which value. So we need to change the custom.xss file and set the background color property.

36. Go to C:\CholaJdev\jdevhome\jdev\myhtml\OA_HTML\cabo\styles.

37. Edit custom.xss and paste the below Code:

    Custom.xss
    1 2 3 4 5 6 7 8	<style selector=".1"> <includeStyle name="DefaultFontFamily"/> <property name="background-color">#FF0000</property> </style> <style selector=".2"> <includeStyle name="DefaultFontFamily"/> <property name="background-color">#FFCC00</property> </style>

     

    
    

     



Save your work and run the page.

 

Enter % on the Emp Name field and click Go.

You can notice that the Job column having Manager as the value is having a different color and other columns are having a different color.

 

• < Prev
• Next >