# UI elements that support extensions

> Each kind of extension is a Django view with a decorator that specifies where it appears

---

Site [llms.txt](/llms.txt)

---

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.

```python
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.

```python
from django.shortcuts import render

from extensions.views import report_extension
from infrastructure.models import ResourceNetwork


@report_extension(
    title="Network Topology Map",
    description="Every network, by site",
    icon="icon-treesquares",
    thumbnail="img/topology.png",
)
def network_topology_report(request):
    return render(
        request,
        "network_topology/templates/chart.html",
        {"networks": ResourceNetwork.objects.all()},
    )
```

Report-specific arguments:

- `thumbnail` is the image shown in the menu and on the Reports page. Give the path inside your package's `static` folder, without the package name. A report with no thumbnail gets a generic one.
- `icon` is the icon beside the report's name. It defaults to `icon-table`. Other choices are `icon-bar`, `icon-dashboard`, `icon-duration`, `icon-explore`, `icon-pie`, `icon-ranking`, and `icon-treesquares`.

## Detail view tabs

`tab_extension` adds a tab to a detail view. Pass the model whose detail view it belongs on, using the `model` argument. These models support tabs:

- User profiles
- Groups
- Environments
- Servers
- Resource handlers
- Resources
- Blueprints

A tab view takes a second argument, `obj_id`, which is the ID of the target object.

```python
from django.shortcuts import render

from extensions.views import tab_extension
from infrastructure.models import Server


@tab_extension(
    model=Server,
    title="Network Topology",
    description="Where this server sits in the network",
)
def server_network_topology_tab(request, obj_id):
    server = Server.objects.get(id=obj_id)
    return render(
        request,
        "network_topology/templates/server_tab.html",
        {"server": server},
    )
```

By default, a tab is appended after the built-in tabs. To put one in place of a built-in tab, see [Override or hide built-in tabs](/docs/cmp/developer-resources/ui-extensions/override-tabs/).

## Admin pages

`admin_extension` adds a page to **Admin**, listed under **Admin Extensions** with the description as its tooltip. Only CloudBolt admins and global viewers can view an admin page.

```python
from django.shortcuts import render

from extensions.views import admin_extension


@admin_extension(
    title="Network Topology Settings",
    description="Choose which sites are polled",
)
def network_topology_settings(request):
    return render(request, "network_topology/templates/settings.html")
```

## Related

- [Access control](/docs/cmp/developer-resources/ui-extensions/access-control/): Use a delegate to decide whether an extension is visible to the viewer.
- [Package structure](/docs/cmp/developer-resources/ui-extensions/package-structure/): Package files, declaring URLs, and how packages are zipped and installed.
- [Front-end assets and tools](/docs/cmp/developer-resources/ui-extensions/front-end-assets-and-tools/): Available JavaScript and CSS libraries for your templates.