Managing Section Layouts

For displaying the configured chart in the dashboard, refer to the section on how to configure the dashboard.

Overview

To define the layout of dashboard sections in KtorAdmin, you need to create a custom class that extends KtorAdminDashboard. This class allows you to structure the arrangement of different sections using an internal grid system. The grid ensures that all dashboard elements are placed properly and can adapt responsively based on screen size.

Defining a Custom Dashboard

To define a custom dashboard layout, create a new class that extends KtorAdminDashboard and implement the configure method. Inside this method, use configureLayout to set up the grid and specify how sections should be positioned.

Key Methods for Layout Configuration

1. addSection

This method is used to add sections to the dashboard. Each section represents a widget that displays specific data. It accepts the following parameters:

  • section: The dashboard section instance (e.g., TaskTextSection()).

  • height: (Optional) The height of the section (default: "350px").

  • span: (Optional) Defines how many columns the section should span in the grid (default: 1).

Example Usage:

addSection(section = TaskLastSection(), height = "200px")
addSection(section = TaskSummaryTextSection(), height = "200px")
addSection(section = TaskSumTextSection(), height = "200px")
addSection(section = TaskAverageTextSection(), height = "200px")
addSection(span = 2, section = TaskChartSection())
addSection(span = 2, section = TaskListChartSection())

2. media for Responsive Layout

You can define different layouts for smaller screens using the media function. It allows you to specify a maximum width and a template that dictates how sections should be arranged.

Example Usage:

media(maxWidth = "600px", template = listOf(1))

This ensures that on screens smaller than 600px, all sections are displayed in a single-column layout.

3. setLayoutTemplate

By default, the grid layout follows listOf(1, 1, 1, 1), meaning each section takes one column. You can customize this default layout using setLayoutTemplate.

Example Usage:

setLayoutTemplate(template = listOf(1, 2, 3))

Implementing a Custom Dashboard Class

Below is a complete example of how to create and configure a custom dashboard layout:

class CustomDashboard : KtorAdminDashboard() {
    override fun KtorAdminDashboard.configure() {
        configureLayout {
            addSection(section = TaskLastSection(), height = "200px")
            addSection(section = TaskSummaryTextSection(), height = "200px")
            addSection(section = TaskSumTextSection(), height = "200px")
            addSection(section = TaskAverageTextSection(), height = "200px")
            addSection(span = 2, section = TaskChartSection())
            addSection(span = 2, section = TaskListChartSection())
            media(maxWidth = "600px", template = listOf(1))
        }
    }
}

Registering the Dashboard in Ktor

Once the dashboard layout is defined, it must be registered in the KtorAdmin plugin to take effect. This is done using the install function:

install(KtorAdmin) {
    adminDashboard = CustomDashboard()
}

This ensures that the CustomDashboard is loaded when the application starts, displaying the sections in the configured layout.

Last updated