UI extensions on CloudBolt Documentation

UI elements that support extensions

Mon, 01 Jan 0001 00:00:00 +0000

Every decorator takes a title and a description. The title is displayed on the element and defaults to the view function’s name. The description appears on the Extensions Management page, and defaults to the view’s docstring. Import the decorators from extensions.views, and give each view a template path that starts with the package folder name.

Dashboard cards

The Dashboard is built from cards. Use dashboard_extension to add your own.

from django.shortcuts import render

from extensions.views import dashboard_extension


@dashboard_extension(
    title="Network Topology",
    description="Current status of the network topology",
)
def network_topology_card(request):
    return render(
        request,
        "network_topology/templates/dashboard_card.html",
        {"data": get_network_topology_data()},
    )

Reports

report_extension adds a custom report. Reports can include tables and charts using the built-in Highcharts library.

Package structure

Mon, 01 Jan 0001 00:00:00 +0000

The package layout tells Cloud Management Platform (CMP) where to find your views, templates, and static files.

Packages live in /var/opt/cloudbolt/proserv/xui/, one folder per extension, named after the extension’s Name. A single package can register several extensions at different points in the UI: a dashboard card, a report, and a detail view tab can all come from the same folder.

Files in a package

Path	What it holds
`__init__.py`	Required by Python, and where you set `ALLOWED_XUI_EXTENSIONS` to change which file types the package exports.
`views.py`	Django views. Each is registered as an extension by the decorator above it.
`urls.py`	Optional URLs for buttons, links, and dialogs that call back into your views.
`templates/`	Django templates your views render. Template paths start with the package folder name.
`static/`	CSS, JavaScript, and images that ship with the extension.

Creating a package from Admin > Manage UI Extensions writes __init__.py, views.py, and a stub function for each selected extension type. Add the rest as needed.

Front-end assets and tools

Mon, 01 Jan 0001 00:00:00 +0000

Libraries you can use

These are loaded by default, so any template can call them:

Bootstrap, a CSS framework with Bootstrap Icons.
jQuery, for general-purpose scripting.
Highcharts, for charts.
D3, for data visualization beyond charting.
DataTables, for sortable, searchable, paginated tables.
Selectize.js, for type-ahead and multi-select fields.
Lodash, for collection and object helpers.

Extensions written for Bootstrap 3 need migrating. See Upgrading to Release 2026.3.

Ship your own CSS, JavaScript, and images

Keep an extension’s own files inside its package, so they travel with it when exported and imported. Place them in a static folder in the package directory, for example:

Access control

Mon, 01 Jan 0001 00:00:00 +0000

Pass a delegate class to the extension’s decorator using the delegate argument. Its should_display method runs each time the page is built, returning True to show the extension and False to hide it. An extension with no delegate is displayed.

Extension types that accept a delegate

Subclass the delegate class that matches the extension type, and import it from extensions.views.

Extension type	Decorator	Delegate class to subclass
Report	`report_extension`	`ReportExtensionDelegate`
Detail view tab	`tab_extension`	`TabExtensionDelegate`
Custom order form	`custom_form_extension`	`CustomFormExtensionDelegate`

dashboard_extension also accepts a delegate argument, but Cloud Management Platform does not check it, so a dashboard card is shown to every user. Admin pages and the microfrontend types do not accept a delegate. An admin page needs none, since only CloudBolt admins and global viewers can view one.

Override or hide built-in tabs

Mon, 01 Jan 0001 00:00:00 +0000

By default, tab extensions are appended to the end of the tab list on a detail view. With the replaces parameter, you can instead target a specific built-in tab by its slug, and either replace it with your extension tab or hide it entirely.

This feature applies to the following detail views:

User profiles
Groups
Environments
Servers
Resource handlers
Resources
Blueprints

The examples on this page are using the Scheduled Snapshots UI extension.