Try OpenEdge Now
skip to main content
Customization Guide
Customizing dashboard : Configuring a column-based layout renderer

Configuring a column-based layout renderer

When you add widgets to the dashboard, the dashboard framework groups the widgets with respect to their columns, and sends them to the renderer jsp as a map. The layout renderer jsp can access this map from the request using attribute name customColumns. The structure of the customColumns map is Map<Integer>, List<DashboardWidget>. In the layout renderer jsp, the custom column’s map can be iterated to get the widgets arranged in columns. If the type of layout is other, that is, if the layout type is not column, then the map contains a single entry with a list of all the dashboard widgets.
A sample implementation of layout renderer is bundled with Business Process Portal installation. A sample four-column layout file FourColumnsLayout.jsp is available in the OEBPS_HOME/webapps/deploy/sbm/bpmportal/layout/ext folder.
To customize the sample layout renderer for ‘N’ number of columns, perform the following steps.
1. Make a copy of OEBPS_HOME/webapps/deploy/sbm/bpmportal/layout/ext/FourColumnsLayout.jsp file in the same folder and give it a different name.
2. Open the copied file in a text editor, and search for following line in the file.
var config = {
  panelItems : customPanelItems,
  colData : [{col:1, width:.25}, {col:2, width:.25}, {col:3, width:.25}, {col:4, width:.25}]
3. Change the colData value to specify the width in percentage for each column. In this example, all the columns are defined for 25% of the total width.
4. Open the dashboard-config.xml file in a text editor, and edit it to include the new layout defined as in Step 1.
In Business Process Portal, click ‘Create Dashboard’ or ‘Edit Dashboard’. You can see the newly added layout in the Layouts drop-down list.