Dashboard Implementation with ADF 12c Alta UI

Alta UI in ADF 12c provides great options for dashboard implementation. You can use so called 'info tiles' as blocks displaying summary information. These blocks are clickable and based on active tile, content can be rendered. It looks not only modern, but also user friendly.

I have implemented sample application - ADFAltaApp_v11.zip with Alta UI dashboard, based on code examples from Oracle WorkBetter application. You could download and run my sample, it renders two vertically aligned info tiles with summarised information:

Click on second info tile, main content will be changed:

Info tile block is implemented as ADF declarative component with a set of properties to make it generic and reusable:

Each info tile is defined as declarative component in the dashboard:

Declarative component requires to set several properties. Property 'selected' returns true/false if current tile should be rendered as selected. Each tile should be assigned with unique index, client listener method based on this index identifies selected tile:

Tile content is surrounded with panel group layout component. By default this component doesn't provide click support. However, click support can be implemented with client listener method (I will not go here into client listener implementation details, because this code is well documented in Oracle WorkBetter sample application referenced above):

Client listener invokes server listener method to pass user click request to the server:

Server listener method updates selected tile index and generates partial target refresh. This is how tile selection works:

Content area is rendered with ADF Faces deck component. This component allows to invoke transition between different UI blocks, based on currently selected tile:

DisplayedChild property identifies UI block to display. This property value is calculated from selected tile index:

First UI block contains ID = infd0. This corresponds to index of first tile: