跳到主要内容

自定义应用导航栏

左侧导航栏时炎凰数据平台中一个相当重要的组件。它会时刻陪伴着用户，为用户提供页面导航。默认情况看下，用户看到的是炎凰数据平台的默认导航栏。然而这并不一定适合所有应用，尤其当用户需要将自己的仪表板和页面有机的组织起来，使其更符合业务逻辑的上下文。而这一需求可以通过配置左侧导航栏来使得自己的业务逻辑更清晰

配置导航栏​

首先，用户必须是炎凰数据平台的管理员，这样，用户可以进入应用管理页面。在用户管理页面中，找到你想要定制化的那个应用，点击“编辑导航按钮“，进入导航栏编辑页面。

导航的配置是一个JSON格式的数组, 默认情况下是这样：

[
    {
        "name": "overview",
        "type": "system"
    },
    {
        "name": "gdi",
        "type": "system"
    },
    {
        "name": "search",
        "type": "system"
    },
    {
        "name": "dashboards",
        "type": "system"
    },
    {
        "name": "alerts",
        "type": "system"
    },
    {
        "name": "data-management",
        "type": "system"
    },
    {
        "name": "data-catalog",
        "type": "system"
    }
]

导航的类型：​

如上文所看到的那样，导航的配置是一个数组，其中的每一个元素都是一个对象，代表着菜单中的一项：

{
    "name": "overview",
    "type": "system"
}

上面这个例子表示的是系统自带的概览页面， 使用type属性system表示这是一个系统内置的页面。

type属性用于标识导航项目的类型，目前支持以下几种类型：

  • system: 系统内置页面，例如概览页面，搜索页面，仪表板列表页面等
  • page: 自定义页面，用户可以在自己的应用中创建自定义页面，然后将其添加到导航栏中
  • dashboard: 仪表板，用户可以在自己的应用中创建仪表板，然后将其添加到导航栏中
  • collection: 集合，用户可以将多个页面/仪表板/链接组合成一个集合，然后将其添加到导航栏中，相当于一个归类。

注意用户所能自定义的只有整个侧边栏的中间部分。 侧边栏的顶部和底部是系统内置的，分别显示的是应用列表和设置菜单，用户无法修改。

page 自定义页面​

用户可以在配置项中使用type属性为page，创建一个自定义页面项目，例如：

{
    "type": "page",
    "pageName": "Custom Page Name",
    "id": "<page name>",
}

注意配置中的id属性是必须的，它是自定义页面的名称，我们知道，自定义页面的url是这样的：

http://<your deployment>/zh-CN/app/<app_id>/pages/<YourPageName>

这个url中的< YourPageName > 部分就是自定义页面的名称，所以配置中的id属性必须和这个名称一致。

而pageName属性则不然，它是自定义页面在侧边栏中显示的名称，用户可以自由的定义。

dashboard 仪表板​

用户可以在配置项中使用type属性为dashboard，创建一个仪表板项，例如：

{
    "type": "dashboard",
    "id": "9e3cd2aa-5e14-417f-9f2e-bb4bac9157a6"
}

其中id属性是仪表板的id。如果用户这样配置，那么仪表板的标题将会显示在菜单项中

collection 集合​

用户可以在配置项中使用type属性为collection，创建一个集合项，例如：

{
    "title": "Collection A",
    "type": "collection",
    "children": [
        {
            "type": "dashboard",
            "id": "9e3cd2aa-5e14-417f-9f2e-bb4bac9157a6"
        },
        {
            "type": "page",
            "pageName": "Custom Page Name",
            "id": "<page name>",
        }
    ]
}