# Panels

## When to use panels

* If you are creating a **simple plugin** you may not need panels but should just create a webpage with no "chrome", making use of the whole width.
* If you are creating a **new view** for Xena, like a dashboard, you should create your own panels.

## Basic

A panel is a section with header and div elements.

![Standard panel.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoVMQ-VEPRItx3SeQH%2F-LZoVNSMXjrKb6N39ZXw%2Fpanel_standard.PNG?generation=1551364098937679\&alt=media)

```markup
<section class="panel panel-default">
    <header class="panel-heading">
        <h2 class="panel-title">[Panel title]</h2>
    </header>
    <div class="panel-body">
        [Content]
    </div>
</section>
```

## Context menu

A panel can have a context menu in the header along with shortcut buttons.

![Panel with context menu open.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoVMQ-VEPRItx3SeQH%2F-LZoVNSO05jU7SeN8WrX%2Fpanel_menu.PNG?generation=1551364098826334\&alt=media)

```markup
<section class="panel panel-default">
    <header class="panel-heading">
        <h2 class="panel-title">[Panel title]</h2>
        <ul class="panel-menu">
            <li><a href="#" title="Rediger" class="toggle-editform"><span class="fas fa-edit"></span></a></li>
            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Funktioner"><i class="fas fa-ellipsis-h"></i></a>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li class="disabled"><a href="#"><i class="fas fa-save"></i> Gem</a></li>
                    <li><a href="#" class="toggle-editform"><i class="fas fa-edit"></i> Rediger</a></li>
                </ul>
            </li>
        </ul>
    </header>
    <div class="panel-body">
        [Content]
    </div>
</section>
```

## Tabs

The content of a panel can be divided in tabs.

![Panel with three tabs.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoVMQ-VEPRItx3SeQH%2F-LZoVNSQkyIOYbGRJF9e%2Fpanel_tabs.PNG?generation=1551364099089877\&alt=media)

```markup
<section class="panel panel-default">
    <header class="panel-heading">
        <h2 class="panel-title">[Panel title]</h2>
    </header>
    <div class="panel-tabs">
        <ul>
            <li class="active"><a href="#tab1" data-toggle="tab">Den første lange 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Ekstra lang fane 2</a></li>
            <li><a href="#tab3" data-toggle="tab">En tredje og meget lang fane 3</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab-pane fade active in" id="tab1">
            <div class="panel-body">
                <p>Tab 1</p>
            </div>
        </div>
        <div class="tab-pane fade" id="tab2">
            <div class="panel-body">
                <p>Tab 2</p>
            </div>
        </div>
        <div class="tab-pane fade" id="tab3">
            <div class="panel-body">
                <p>Tab 3</p>
            </div>
        </div>
    </div>
</section>
```

## Alerts

A panel can have alerts spanning the whole width of the panel. View it as a kind of “global alert” for that panel.

![Panel with a alert in the top.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoVMQ-VEPRItx3SeQH%2F-LZoVNSSKGKmlOrc-hey%2Fpanel_alert.PNG?generation=1551364099265264\&alt=media)

```markup
<section class="panel panel-default">
    <header class="panel-heading">
        <h2 class="panel-title">[Panel title]</h2>
    </header>
    <div class="alert alert-warning">
        <p>[Alert]</p>
    </div>
    <div class="panel-body">
        [Content]
    </div>
</section>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.xena.biz/xena-developer/user-interface/styleguide/panels.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.