Layout Configuration (Dashboard)

Since version 9.0

Portlet Dimensions

The positioning and sizing of portlets on a dashboard is usually done manually in the user interface and saved as Preferences. However, you can set up an initial dimensions - width and height - of the portlet in the dashboard logic.

Principle

The common things displayed in the portlets are:

Result Matrix for displaying data in a table
ResultHighchart for many types of charts
DashboardController for various action buttons or html output

You are returning those objects from the dashboard logic elements, and then the system will display those objects as portlets on the dashboard.

All the objects have common interface - Portlet. This interface has methods, allowing you to set initial values for dimensions of the object, and thus the dimensions of the portlet.

The initial values will be overridden by user’s manual changes of the sizes, and also by saved Preferences.

Priority of portlet dimension settings

Preferences
Setting from dashboard logic
Default size:
- Height: 320px
- Width:
  - 100% for the screen is less than 1024px
  - 50% for the screen is from 1024px to <1920px
  - 33% for the screen is from 1920px
  - 100% for the chart portlet

Code Examples

the following 2 examples can be found in the working sample logic Dashboard_Portlet_Dimensions

Example of a Dashboard logic element, with ResultMatrix

final Integer INITIAL_WIDTH = 600  // 600 pixels
final Integer INITIAL_HEIGHT = 200  // 200 pixels

ResultMatrix resultMatrix = createSampleResultMatrix()

// Sets initial width and height for the returned result matrix.
// Result matrix represents the portlet, so this becomes initial portlet dimensions
resultMatrix.withLayout(INITIAL_WIDTH, INITIAL_HEIGHT)  //❶

return resultMatrix


/**
 * Sample result matrix, representing a portlet with data formatted in table
 * @return
 */
ResultMatrix createSampleResultMatrix() {
    ResultMatrix resultMatrix = api.newMatrix("Customer Id", "Net Margin %")

    resultMatrix.addRow(["Customer Id": "C1", "Net Margin %": 0.104])
    resultMatrix.addRow(["Customer Id": "C2", "Net Margin %": 0.044])
    resultMatrix.addRow(["Customer Id": "C3", "Net Margin %": 0.014])

    return resultMatrix
}

❶ see withLayout() in Groovy API

Example of Dashboard logic element, with DashboardController

final Integer INITIAL_WIDTH = 300  // 300 pixels
final Integer INITIAL_HEIGHT = 500  // 500 pixels

def controller = createSampleDashboardController()

// Sets initial width and height for the returned controller.
// Dashboard Controller represents the portlet, so this becomes initial portlet dimensions.
controller.withLayout(INITIAL_WIDTH, INITIAL_HEIGHT)    //❶

return controller


/**
 * Sample dashboard controller, representing a portlet with html content
 * @return
 */
def createSampleDashboardController() {
    def controller = api.newController()
    controller.addButton("Show Products", AppPages.MD_PRODUCTS_PAGE)
    def lorem = "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Aliquam id dolor. Cras elementum.</p>"
    (1..3).each { controller.addHTML(lorem) }
    return controller
}

❶ see withLayout() in Groovy API