# XML v1.0 (deprecated)

{% hint style="warning" %}
This XML version has been deprecated in favor of [XML v2.0](https://dev.ubidots.com/apps/custom-sidebar/xml-v2.0)
{% endhint %}

The XML v1.0 syntax allows to customize the sidebar elements described below.

## XML syntax

The custom sidebar uses XML to map UI elements to code, which is the engine that allows the creation of a sidebar tailored to a specific application.

The available UI elements, and their hierarchy, are:

```
├── tree
│   ├── menu
│   │   ├── toggle
│   │   │   ├── icon
│   │   │   ├── label
│   │   │   ├── chevron
│   │   ├── collapsable
│   │   │   ├── menulink
│   ├── link
│   │   ├── icon
│   │   ├── label
│   ├── paragraph
│   ├── divider
```

Using these XML elements comes with rules that are enforced by the editor and warns you of errors in the syntax:

1. The XML needs to start with:\
   `<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">`
2. The `<tree>` element is mandatory. It must have at least 1 or more `<menu>` or `<link>` elements.
3. The `<menu>` element must have at least 1 `<toggle>` and 1 `<collapsable>` elements.
4. The `<collapsable>` element must have at least 1 `<menulink>` element.
5. The `<link>` element must have at least 1 `<icon>` and `<label>` elements.

Here's a quick summary of the available elements, but you can click the links and read more details:

<table><thead><tr><th width="178" align="center">Sidebar element</th><th align="center">Description</th><th align="center">Properties</th></tr></thead><tbody><tr><td align="center"><a href="#tree">tree</a></td><td align="center">Root element. All other elements must be inside.</td><td align="center">–</td></tr><tr><td align="center"><a href="#menu-toggle-icon-label-chevron-collapsable-and-menulink">menu</a></td><td align="center">Allows creating dropdown menus.</td><td align="center"><ul><li><strong>defaultShow:</strong> determines whether the dropdown is open or closed when loading the app.</li></ul></td></tr><tr><td align="center"><a href="#menu-toggle-icon-label-chevron-collapsable-and-menulink">toggle</a></td><td align="center">Comprises the dropdown itself.</td><td align="center"><strong>–</strong></td></tr><tr><td align="center"><a href="#menu-toggle-icon-label-chevron-collapsable-and-menulink">icon</a></td><td align="center">Represents the icon the dropdown.</td><td align="center"><ul><li><strong>name:</strong> name of icon from <a href="https://fontawesome.com/icons">Fontawesone</a>.</li></ul></td></tr><tr><td align="center"><a href="#menu-toggle-icon-label-chevron-collapsable-and-menulink">label</a></td><td align="center">Text in the dropdown menu.</td><td align="center">–</td></tr><tr><td align="center"><a href="#menu-toggle-icon-label-chevron-collapsable-and-menulink">chevron</a></td><td align="center">Arrow icon in the dropdown menu.</td><td align="center">–</td></tr><tr><td align="center"><a href="#menu-toggle-icon-label-chevron-collapsable-and-menulink">collapsable</a></td><td align="center">Comprises a parent element for all the options in the dropdown.</td><td align="center">–</td></tr><tr><td align="center"><a href="#menu-toggle-icon-label-chevron-collapsable-and-menulink">menulink</a></td><td align="center">Actual options displayed under a dropdown menu.</td><td align="center"><ul><li><strong>path:</strong> where the menulink redirects to upon clicking.</li><li><strong>permissions:</strong> list of end-user permissions under which the menulink will be visible.</li><li><strong>tags:</strong> list of end-user tags under which the menulink will be visible.</li><li><strong>open:</strong> open link in same tab or redirect.</li><li><strong>exact:</strong> highlights the menulink when in the exact path defined by <strong>path</strong>.</li></ul></td></tr><tr><td align="center"><a href="#link">link</a></td><td align="center">Creates direct access to links.</td><td align="center"><ul><li><strong>path:</strong> where the menulink redirects to upon clicking.</li><li><strong>permissions:</strong> list of end-user permissions under which the menulink will be visible.</li><li><strong>tags:</strong> list of end-user tags under which the menulink will be visible.</li><li><strong>open:</strong> open links in same tab or redirect.</li><li><strong>exact:</strong> highlights the menulink when in the exact path defined by <strong>path</strong>.</li></ul></td></tr><tr><td align="center"><a href="#paragraph-and-divider">paragraph</a></td><td align="center">Creates titles of different sizes. It helps in creating defined sections in the sidebar.</td><td align="center"><ul><li><strong>type:</strong> determines the size. It can be "h1", "h2", "h3", "h4", "normal" or "bold".</li></ul></td></tr><tr><td align="center"><a href="#paragraph-and-divider">divider</a></td><td align="center">Creates horizontal lines that serve as section separation.</td><td align="center">–</td></tr></tbody></table>

### <mark style="background-color:blue;">tree</mark>

Parent element where all `<menulink>` and `<link>` reside:

```xml
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
    <!--Your menulink and link components go here-->
</tree>
```

### <mark style="background-color:blue;">menu</mark>, <mark style="background-color:blue;">toggle</mark>, <mark style="background-color:blue;">icon</mark>, <mark style="background-color:blue;">label</mark>, <mark style="background-color:blue;">chevron</mark>, <mark style="background-color:blue;">collapsable</mark> and <mark style="background-color:blue;">menulink</mark>

Elements used to create dropdown menus:

```xml
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
    <menu defaultShow="true">
      <toggle>
        <icon name="gear"/>
        <label>Settings</label>
        <chevron/>
      </toggle>
    <collapsable>
      <menulink 
          open="tab"
          exact="false"
          path="/app/devices"
          tags="tag1"
          permissions="ubi_datasource.view_device"
        >Datasources
      </menulink>
      <menulink path="/app/dashboards/" tags="tag1" permissions="ubi_dashboards.view_dashboardpg">Custom dashboards</menulink>
    </collapsable>
  </menu>
</tree>
```

This will create a dropdown menu, with its options, as follows:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FFQ1ryvzHrpjM36GVrGB4%2FDropdown%20menu.png?alt=media&#x26;token=5e8c3dd5-048c-44d8-94ed-65ba3eedafb4" alt=""><figcaption></figcaption></figure>

These are the properties of the `<menulink>` element:

<table><thead><tr><th width="140" align="center">Property</th><th align="center">Description</th></tr></thead><tbody><tr><td align="center">path</td><td align="center">This is a path in Ubidots to either a direct resource, for example "/app/dashboards/663d484aaa8d92005751b2e2", or a module "/app/dashboards/", or a full URL in Ubidots or an external website.</td></tr><tr><td align="center">permissions</td><td align="center">Comma separated list of <a href="#permissions">permissions</a> associated with the path. An end user will only see this menulink option if its permissions match.</td></tr><tr><td align="center">tags</td><td align="center">Comma separated list of <a href="#filter-elements-by-tags">tags</a>. This adds a visibility layer to the sidebar. An end user will only see this menulink option if its tags match. See also <a href="https://help.ubidots.com/en/articles/8063141-ubidots-basics-tags">here</a>.</td></tr><tr><td align="center">open</td><td align="center">Available options are:<br>- "tab": link opens in a new tab.<br>- "redirect": link opens in the same tab.</td></tr><tr><td align="center">exact</td><td align="center">"true" or "false". Highlights the menulink when in the exact path defined by <strong>path</strong>.<br><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2Fr3gXpZRHRKDq8yQSxrZb%2Fexact%20true.png?alt=media&#x26;token=b7325b3e-038d-468c-8383-9c1ca237d4d0" alt=""></td></tr></tbody></table>

### <mark style="background-color:blue;">link</mark>

Element to create shortcuts, in other words, direct access to modules or resources:

```xml
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
  <link
    open="tab"
    exact="true" 
    path="/app/dashboards/663d484aaa8d92005751b2e2" 
    tags="tag1" 
    permissions="ubi_dashboards.view_dashboardpg">
      <icon name="home"/>
      <label>Home</label>
  </link>
</tree>
```

This will create a direct link, as follows:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FTy5hG3l8dpthYTdht1HN%2Flink.png?alt=media&#x26;token=93259c92-3d46-4431-bf01-12cff32337a7" alt=""><figcaption></figcaption></figure>

The properties of the `<link>` element are the same as the `<menulink>`

### <mark style="background-color:blue;">paragraph</mark> and <mark style="background-color:blue;">divider</mark>

Title/label element and horizontal separation line.

```
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
    <paragraph type="bold">SECTION 1</paragraph>
    <divider/>
    <paragraph type="bold">SECTION 2</paragraph>
</tree>
```

This will create the following:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FLyftyYxm1GbBO5X1GveQ%2FParagraph%20and%20diveder.png?alt=media&#x26;token=44803ea2-3bf4-4d25-970f-5cdf5f48e86d" alt=""><figcaption></figcaption></figure>

## Permissions

With permissions, the `<menulink>` and `<link>` elements will only appear to those end users whose assigned permissions match that of the element configuration.

The available permissions for each possible path that's exposed to the end users in the application are:

<table><thead><tr><th width="173">Module</th><th width="241">Path</th><th>Permissions</th></tr></thead><tbody><tr><td>Devices</td><td>"/app/devices/"</td><td>"ubi_datasource.view_device"</td></tr><tr><td>Device groups</td><td>"/app/device-groups/"</td><td>"ubi_datasource.view_devicegroup"</td></tr><tr><td>Dashboards</td><td>"/app/dashboards/"</td><td>"ubi_dashboards.view_dashboardpg"</td></tr><tr><td>Events</td><td>"/app/events/"</td><td>"ubi_events.view_eventpg"</td></tr><tr><td>Reports</td><td>"/app/data-analysis/"</td><td>"ubi_data_analysis.view_report"</td></tr><tr><td>Organizations</td><td>"/app/organizations/"</td><td>"customuser.view_organization"</td></tr><tr><td>Users</td><td>"/app/organizations/users"</td><td>"customuser.view_user"</td></tr></tbody></table>

## Filter elements by tags

The `<menulink>` and `<link>` elements receive a "tag" property that adds a visibility layer on top of the permissions assigned to an end user. The way it works is by matching the tags of an end user with those specified in the `<menulink>` or `<link>` (learn [more about tag filtering](https://help.ubidots.com/en/articles/8063141-ubidots-basics-tags)). Simply put, if there's at least one match between the user tags and the element's, it means the element will be visible to the user.

This filtering by tags allows customizing the sidebar based on the user accessing the platform. For example, say you want to create a direct link that takes users to their own home dashboard, you would create an XML as follows:

```xml
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
  <!--This link creates Home for User 1-->
  <link
    open="tab"
    exact="true" 
    path="/app/dashboards/663d484aaa8d92005751b2e2" 
    tags="tag1" 
    permissions="ubi_dashboards.view_dashboardpg">
      <icon name="home"/>
      <label>Home</label>
  </link>

  <!--This link create Home for User 2-->
  <link
    open="tab"
    exact="true" 
    path="/app/dashboards/663d484aaa8d92007364jnhd" 
    tags="tag2" 
    permissions="ubi_dashboards.view_dashboardpg">
      <icon name="home"/>
      <label>Home</label>
  </link>
</tree>
```

Let's assume 2 end users, with tags "tag1" and "tag2", respectively. Note that there are 2 home links in the XML, however, since they have different tags ("tag1" and "tag2"), each home link will appear to the respective user.

Likewise, this will preview the following sidebar. We have marked what each user would see:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FZgKUhZuK2HDJ7a6CTYDR%2FFilter%20by%20tag.png?alt=media&#x26;token=8c3ac87b-b80b-4d70-b018-c42d6cb129ff" alt=""><figcaption></figcaption></figure>


---

# 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.ubidots.com/apps/custom-sidebar/xml-v1.0-deprecated.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.
