DashBoard Example with PanelSpringBoard and PanelDrawer

In this example I am going to build Dashboard application with ADF 12c components such as panelSpringBoard, panelDrawer, panelGridLayout and Listviews.

This example is based on the oracle database HR Schema.

Create the model project and build the view objects based on the employees, departments and employee details tables. DashboardModel project should look like below.

Build the DashboardUi project and create the EmployeeDetails taskflow. In employee details we are going to implement the search in panelDrawer component and displaying the employee details in employee details page.

To implement panelDrawer, drag and drop the panelDrawer component from component palette and add showdetailItems inside panelDrawer Component. Add the content inside the showDetailItem component.

Note: The paneldrawer component position values, “end” is language specific. So if you are from a country with right to left reading then the end actually means what start means in western countries. Use left / right for language independent orientation.

For displaying search results we are using listview and inside listview we are arranging the content nicely using the panelGridLayout component. PanelGridLayout distributes the space perfectly between the columns with percentage values.

Create the DashbaordApp test page to build the panelSpringBoard. Drag and drop the panelSpringBoard component from the component palette to the DashboardAppTestPage.jspx page and add the showDetailItems inside the panelSpringBoard component to display the springboard contents inside springboard.

Add the content regions inside showDetailItems. For demo purpose I have added five showDetailItems and added the EmployeeDetails regions and other Departments regions inside the showDetailItems.

Use the panelSpringBoard property displayMode=”Grid” to display the panelSpringBoard home screen with all show details Icons like below.