Configure Page Tiles in the Page Editor

In the Page editor, you can design and arrange the layout and contents of your page.

Pages are composed of tiles that hold the content you wish to present. These tiles are organized into rows. By configuring the number of rows and tiles and setting their respective span widths, you can customize the layout of your page. Various types of tiles are available, including charts, KPIs, text, and time series.

Add a page row

Pages consist of any number of rows. Rows, in turn, can contain any number of tiles.

To start building and designing your layout for the page, click + Add row in your new page component.

Add a page tile

To add a tile:

• Select Add tile.
• Choose from the available options.
  • Chart – to visualize application data
  • KPI – to put metrics front and center
  • Text – to provide information
  • Time Series – to visualize application data over time

Delete a page tile

To delete a tile:

• Select the trash can icon in the top-right corner of the tile. This will remove the tile from the page.
• To confirm the change, click Save in the top-right of the Page Editor.

Page layout

Customize your page layout by configuring the number of rows and tiles and setting their respective span widths.

• A page has a conceptual width of 6. Tiles can span any width from 1 to 6. For example:
  • One tile (width = 6) spanning the whole row.
  • Two tiles (width = 3) each taking up half of the row.
  • Three tiles (width = 2) next to each other.
• Any additional tiles, or tiles that will not fit (e.g., on a mobile device), will flow over as needed.

Configure tiles

When creating a new tile or clicking the Pencil icon to edit your tile, the sidebar displays configuration options.

For all tiles, you can configure:

• Title: The name of your tile displayed in the tile header. (Optional)
• Description: The description of your tile displayed when you click the info icon in the tile header. (Optional)
• Width: Determines how much space on your screen your tile will take up (1 to 6). (Required)

Additional configuration options are available based on the tile type selected.

Configure Chart tile

Configure a chart tile to visualize application data in the form of a pie chart, bar chart, doughnut chart, or line chart.

If you wish to visualize application data over time, refer to the section on time series tiles.

To configure a chart tile:

1. Choose a Chart type from the dropdown. (Required)

2. Choose a Data source. You can use any data view or database from the same application.

   Using data views as a data source has the advantage that any access control settings and filters (e.g., only seeing “your own” data) are automatically applied to the chart as well.

3. Add at least one Data series to specify the data you want to display:

   • Data series label: Provide a label for this dataset, displayed when hovering over the chart.
   • Categorize by: Choose a field to group the data by (the “categories” for your chart).
   • Operation: Specify the type of data to present (e.g., Count records, Count distinct, Sum, Average, Largest, Smallest).
   • Field: Specify which column of your data source to visualize.

Configure KPI tile

Use KPI tiles to put important metrics front and center.

To configure a KPI tile:

1. Choose a Data source. You can use any data view or database from the same application.

   Using data views as a data source has the advantage that any access control settings and filters (e.g., only seeing “your own” data) are automatically applied to the KPI as well.

2. Specify the Operation (e.g., Count records, Count distinct, Sum, Average, Largest, Smallest).

3. Specify the Field (column in your data source) to visualize.

4. Optionally, add a Prefix and/or Suffix, shown before and after the number.

Configure Text tile

Create Text tiles to provide detailed and formatted information to your users. Formatting options include:

• Text size
• Bold
• Italics
• Underline
• Bulleted list
• Numbered list
• Emojis

Configure Time series tile

Configure a Time Series tile to visualize application data over time in the form of a bar chart or a line chart.

To configure a Time Series tile:

1. Choose a Chart type from the dropdown. (Required)

2. Choose a Data source. You can use any data view or database from the same application.

   Using data views as a data source has the advantage that any access control settings and filters (e.g., only seeing “your own” data) are automatically applied to the chart as well.

3. Add at least one Data series to specify the data you want to display:

   • Data series label: Provide a label for this dataset, displayed when hovering over the chart.
   • Operation: Specify the type of data to present (e.g., Count records, Count distinct, Sum, Average, Largest, Smallest).
   • Field: Specify which column of your data source to visualize.

4. Additionally, configure the time categories (e.g., Year, Quarter, Month, Week, Day), visualized as:

   • Year - 2024
   • Quarter - Q1/2024
   • Month - 01/2024
   • Week - CW1
   • Day - 01/01/2024
   Categories can be applied to any Date field from the data source.

5. Additionally categorize by: Choose a field to further group the data by.

Known Limitations

• Only databases and data views from the same application can serve as data sources for charts, time series, and KPIs. Shared databases from shared packages are supported.
• Data views that require parameters are currently not supported.