ADF UI- Show DVT Chart inside af:table and other collection components

Hello All

This post is about showing a chart inside  ADF Faces Collection component like af:table or af:listView

This is a simple task to create normal chart but in case if we have to show table row record as a chart or graph then we have to change chart value and chart item value references so that it doesn't show all record but only values of that row

This post talks about these two requirements

1. Show same viewObject values as chart in af:table or af:listView
2. Show child viewObject values as chart in af:table or af:listView

Responsive UI with new af:matchMediaBehavior in ADF 12.2.1.0

Jdeveloper and ADF 12.2.1 comes with many new features ( see these posts-
New look of dvt:funnelChart for Data Visualization in Jdeveloper 12.2.1.0
New look of dvt:pieChart as donut chart for Data Visualization in Jdeveloper 12.2.1.0  )
and supports responsive UI design.
Masonry Layout and MatchMediaBehaivor tag is introduced to support responsive UI design

af:matchMediaBehavior allows developer to control properties of components according to screen size. It uses CSS media queries to detect screen size and changes value of specified property of component

Responsive UI with new Masonry Layout in ADF 12.2.1.0

What is Responsive UI and Why it is Important-

User interface or view of website or web application changes as the screen size of device changes
This type of UI is called Responsive and it is important to design responsive UI for your application because each device have different screen dimension and you can not restrict user to use any specific device to view your application . This is very basic requirement of web development that UI should look good on Mobile, PC, Tablet or any other device

Oracle JDeveloper and Oracle ADF 12c (12.2.1.0.0) out (bug fixed and lots of new features introduced)

Time to check new Jdeveloper 12.2.1 , Wait is over Check out new features :)

Download- Oracle JDeveloper 12g (12.2.1.0.0)

1. Alta UI is now default skin for all ADF Faces components , previously it was Skyros
Read more about Oracle Alta UI Design Patterns

4. In Data Visualization some change done in Pie Chart and Thematic Map. New component NBox and funnel chart is introduced

Better User Interface- Oracle Alta UI for Oracle ADF 12.1.3

Great news for all ADF developers ,
Oracle has launched a design system for better user experience - Oracle Alta UI (much more than skin)

see press release- Oracle Announces New User Interface Design System for a More Engaging Customer Experience
As per documentation -

Oracle Alta UI is a new user interface design system that enables developers to create modern, visually pleasing, consistent, and engaging interfaces that can be easily distributed across all delivery channels.
The Oracle Alta UI design system provides a set of guidelines and best practices. The system is based on years of user experience and usability implementations and analysis by leading UI and design specialists.
Oracle Alta UI-based applications feature a simplified component structure and more open space to keep the focus on data.

See details of Oracle Alta UI- Oracle Alta UI

I have created a simple master detail page using Departments and Employees table of HR Schema using Jdev 12.1.3



by default skyros skin is applied in fusion web application, you can see this in trinidad-config.xml file under WEB-INF node

to apply Oracle Alta UI just change skin-family to alta

Now compare both UI , you will see a big difference

Full page-
Default Skin-

Alta UI-

See difference in af:inputDate and it's calendar
Default Skin-

 Alta UI- (icon is inside date field)

inputListofValues box is very attractive now-
Default Skin-

 Oracle Alta UI-

and magnifier icon is inside field now-

try it yourself and see difference in other components also
refer- Designing & Developing Oracle ALTA UI Apps
Sample ADF Application- Download
Thanks