logo

【Sugar BI 数据门户】集中查看多个关联页面的秘密武器

作者:xxinjiang2022.09.06 16:11浏览量:77

简介:Sugar BI 的数据门户,可⽅便用户对多个可视化关联⻚⾯进⾏集中查看。

数据门户可以通过配置导航菜单,自由组合报表、⼤屏、数据填报、外部链接等资源,形成⼀个可通过⾃定义地址统一访问的资源。数据门户可⽅便用户对多个关联⻚⾯进⾏集中查看。

其主要应⽤用场景为:

  • 制作主题性数据⽹网站或主题性报表;
  • 制作包含复杂菜单的数据⼤大屏;

本篇将以Sugar BI为工具,演绎数据门户如何搭建。
数据门户的浏览、增加、删除和修改
在空间首页左侧导航里点击「数据门户」菜单,可以进入到数据门户列表页面,您在这个页面中可以快速浏览空间内各数据门户。
14a91d7b35e4bb4b.png

点击「数据门户」菜单中的新建按钮,您可以快捷创建数据门户。
74d0f3eec708ab5d.png

左侧导航中还有一个「数据门户管理」菜单,点击该菜单,可以进入数据门户管理页面,您同样也可以通过点击页面的右上角的添加新的数据门户按钮进行添加。

a29b8e83975d4ae0.png

7db4c4db8b688129.png

在添加弹框中可以对门户的名称、简介、类型、logo 和访问地址进行配置。

数据门户的类型
其中门户分为空间内浏览和公开两种类型,空间内浏览的门户只能嵌入编辑该门户的用户有权限的页面和外部链接,如果浏览的用户没有嵌入页面的权限,那么该用户无权浏览该页面。公开的门户可以嵌入公开分享的页面或者外部链接,没有页面权限的限制。 对于公开分享页面,如果要在公开分享的门户中嵌入,那么一定注意是通过【外部链接】方式,嵌入公开分享地址;如果是在空间内浏览门户中,可根据权限需求,直接嵌入(需查看页面权限)或通过【外部链接】嵌入公开分享地址。

访问地址只能包含字母、数字、横杠和下划线,会检测是否已被占用。

如果门户选择的是空间内浏览,您还可以配置只显示有权限的菜单,如果打开了这个开关,那么空间内的用户在浏览该门户时,只能看到自己有对应页面权限的导航菜单。

添加成功后,可以点击门户列表中最右列按钮组中的更改配置,来对上述配置进行快捷修改;点击编辑门户,可以进入数据门户编辑页面。

您可以点击门户链接、或是直接在浏览器地址栏中输入您设置的访问地址来浏览您的数据门户。

e853237b5771c920.png

数据门户的编辑

数据门户的编辑页面分为导航管理、门户页面、控制面板三个部分。
86f740ea92e3e69d.png

  • 页面左侧是导航管理用于配置门户页面中的导航菜单,您可以对导航菜单进行新增、删除以及顺序和层级调整等操作。
  • 页面中间部分是门户页面,您可以在门户页面中看到您所编辑的数据门户最终的效果,可以通过导航管理和控制面板对其进行配置。
  • 页面右侧是控制面板,您可以对门户的标题、布局、以及各个菜单的名称、嵌入页面等进行配置。

门户配置

点击门户的标题区域,右侧的控制面板会显示门户的配置信息,可以对门户的标题、布局、访问地址、类型、样式等等进行自定义设置。

数据门户可以兼容 PC 端和移动端,在编辑页面可以点击顶部导航的切换按钮进行切换:
86e27d130a18ba82.png

PC 端的布局方式支持左导航布局、顶部导航布局、双导航布局、左侧悬浮导航、顶部悬浮导航五种,依次如下图所示:

846153966207a8ab.png

9dda280c587d76d7.png

75f4a9e6ae3020e4.png

77f54e147ddf7a22.png

3e2178970fffa249.png

其中,左侧悬浮导航和顶部悬浮导航主要适用于带有复杂菜单的大屏场景,可以灵活配置大屏的菜单在页面中的相对位置。支持设置宽度、高度、距离窗口左侧和顶部的距离、字体大小、一级菜单之间的间距,以及设置以及菜单背景图片。

上传背景图片、并设置一级菜单间距为 10px,效果如下图所示:
de38147c74f553fa.png

移动端支持底部导航布局和悬浮导航布局两种,依次如下图所示:
04bc552efe506475.png

512e6dac2925c00a.png

如果您不想每次切换导航时都重新加载页面,那么您可以设置菜单缓存。

5a91c3646056c937.png

您可以「开启自定义配色」,自定义各种布局下导航菜单的配色:

d78cd41e1e62060b.png

导航管理

在导航管理中可以对导航进行增加、删除,以及拖拽排序。点击添加根节点可以添加一级菜单,点击菜单列表中某个菜单后面的+可以为这个菜单添加一个子菜单,最多支持四级。点击菜单后面的删除按钮可以删除该菜单及其子节点。

316717ef10bdaf29.png

选中某个菜单后,拖拽该菜单可以进行拖拽排序,会在要放置的菜单上用蓝色线条标识出来,如下图所示,我们对二级菜单 3 进行拖拽,如果拖拽的菜单离三级菜单 3 更近时,蓝线会标记在三级菜单 3 的下方,那么松开鼠标后,就会将二级菜单 3 放置到三级菜单 3 的下方。

112123e4587b8668.png

b26093aaf85a2a14.png

如果拖拽的菜单离下方的二级菜单 2 更近时,蓝线会标记在二级菜单 2 的上方,那么松开鼠标后,就会将二级菜单 3 放置在二级菜单 2 的上方。

b2b81b14632a077d.png

03d6018d027cefb6.png

菜单配置

您可以对菜单的名称、图标、嵌入的页面进行配置,点击左侧导航管理中的任一菜单,或者是门户中的任一菜单,控制面板上都会显示该菜单对应的配置项。

您可以对没有子级菜单的菜单设置嵌入页面,对于空间内浏览类型的门户,可以嵌入空间内编辑者有浏览权限的报表、大屏、数据填报页面、公开分享后的页面和外部链接。对于设置了公开类型的门户,只可以嵌入设置了公开分享报表、大屏、数据填报和外部链接。

如果打开了设置为主页的开关,那么打开门户页面时,会默认选中这个菜单,并展示这个菜单配置的页面。
405901cca7e70365.png

最近 Sugar BI 有免费试用的活动,不仅可以做自助取数,还可以制作许多精美的报表和大屏,大家快去薅羊毛免费尝试尝试吧!

数据可视化Sugar BI官网直通车

您也可以深入了解Sugar BI,让我们联系您:

发表评论