ADF Tips: How to implement a kind of responsive af:panelDashboard?

Oracle JDeveloper & ADF Team have made a great job with the latest release of Oracle ADF including the new out of the box skin and patterns – Alta UI. The concept of having a responsive ADF Application has become something that we can now actually see instead of dream. Whether you agree or not, for some people the look and feel is as important as the functional requirements in a web application. I agree.

In this post, I will show how, getting a little creative, one can find workarounds to make some af components, kind of responsive. You can download the sample here. The logic behinds is simple; if the browser width is more than 1024 then we want the panelDashboard to have 3 columns;


Between 1024 and 600 then should have 2 columns;


Less than 600 then 1 column;


This is how the application would behave;


Did you realize that the responsiveness needs a request to the server and a PPR? Unfortunately, because the panelDashboard relies in a component attribute rather than a style class to position the boxes, then a request to the server needs to be done in order to update the component accordingly based on the new browser dimensions. This is the reason why is not 100% responsive but a kind of responsive implementation.

In order to get the browser dimensions we use JQuery based on


We used a dummy inputText with visible -> false in order to be able to attach a serverListener and queue it in our javascript;


Feel free to propose other alternatives or a cleaner implementation (e.g how to invoke a method from a managed bean without having to use the dummy inputText).

Leave a comment

Your email address will not be published.

Social Media

Stay up-to-date with our latest ADF and related technical posts via your favourite social network services.