Version: latest

Add Custom Links to Sidebar

Palette allows you to add custom links to the sidebar of Local UI. These links allow you to integrate your own web applications with Local UI. When you click on a custom link, it can either open the page within the Local UI interface or open a new tab in your browser depending on how to configure the links.

tech preview

This is a Tech Preview feature and is subject to change. Do not use this feature in production workloads.

Prerequisites

The process to add custom links prior to deployment is based on the EdgeForge process. We recommend that you familiarize yourself with EdgeForge and the process to build Edge artifacts.
A physical or virtual Linux machine with AMD64 (also known as x86_64) processor architecture to build the Edge artifacts. You can issue the following command in the terminal to check your processor architecture.
```
uname -m
```
Minimum hardware configuration of the Linux machine:
- 4 CPU
- 8 GB memory
- 150 GB storage
Git. You can ensure git installation by issuing the git --version command.
Docker Engine version 18.09.x or later. You can use the docker --version command to view the existing Docker version. You should have root-level or sudo privileges on your Linux machine to create privileged containers.
A Spectro Cloud account. If you have not signed up, you can sign up for an account here.

Customize theme during EdgeForge

Clone the CanvOS repository.

git clone https://github.com/spectrocloud/CanvOS.git

Change into the CanvOS directory.
```
cd CanvOS
```
View the available tags and use the latest available tag. This guide uses v4.4.0 as an example.
```
git tag
git checkout v4.4.0
```
Create a directory called local-ui at the path CanvOS/local-ui. Then, under the local-ui directory, create a directory named ui. You can issue the following command to create both directories.
```
mkdir -p local-ui/ui
```
In the CanvOS/local-ui/ui directory, create a file named customizations.json. This is the same file where you customize the Local UI theme. If the file is already present, there is no need to create a new one. For more information about customizing the Local UI theme, refer to Customize Local UI Theme.
If you want Local UI to host static web pages that you want your users to be able to access from the sidebar, create another folder for your website under the local-ui folder and put all assets for your web pages in that folder.

Choose a name that describes the web pages. For example, if your website has content related to an application, you can name the folder app and create the folder at local-ui/app.

The HTML files may link to JavaScript and CSS files. Ensure that your HTML file can reference its assets. The hosted static sites are exposed through HTTPS with a self-signed certificate.

For example, you can put the following content inside the local-ui folder.
```
|-local-ui
  |--ui
      |--customizations.json
  |--app
       |--index.html
       |--index.js
       |--index.css
```
When using a URL to locate the local webpage, you can treat the local-ui folder as the root folder and you must use absolute paths to locate your assets. For example, from customizations.json, you can locate the HTML file in the example with /app/index.html.
Populate the file with the following schema. Each link requires one object with the label and url properties.
```
{
  "links": [
    {
      "label": "Google",
      "url": "https:/www.google.com",
      "type": "iframe"
    },
    {
      "label": "Google 2",
      "url": "https:/www.google.com"
    },
    {
      "label": "Docs",
      "url": "https:/docs.googlee.com",
      "group": "Example"
    },
    {
      "label": "Maps",
      "url": "/app/index.html",
      "group": "Example"
    }
  ]
}
```
Link objects with "type": "iframe" means the link will open within the Local UI interface in an iframe. Link objects without "type": "iframe" will open a new tab instead.

warning
Some websites and domains cannot be embedded as iframes due to security. Confirm whether the sites can be loaded through iframes first. If they cannot be loaded as iframes, do not use the type: iframe property.
You can add a group attribute to each link. Links sharing the same group are grouped together in the side bar.
Ensure you include all the links you want to add to the sidebar before proceeding. You cannot add new links to the sidebar without rebuilding the installer ISO.
Archive the local-ui directory to a TAR file. The file must be named local-ui.tar and must be placed at the root directory of CanvOS.
```
tar cvf local-ui.tar local-ui
```
Follow the Build Edge Artifacts guide from step onward to finish the EdgeForge process. As long as the local-ui.tar file is at the root directory of CanvOS and the installation mode is set to airgap as required by Local UI, the custom links will be added to the sidebar when you log in to Local UI.

Validate

Use the ISO you produced to install Palette Edge on an Edge device.
Power up the device and follow Access Local UI to access the Edge management console.
Verify that the custom links you added are reflected in the sidebar.

Prerequisites​

Customize theme during EdgeForge​

Validate​

Prerequisites

Customize theme during EdgeForge

Validate