跳到主要内容
版本:6.0.0

前端页面元素隐藏

观远数据精美的仪表板页面经常需要跟客户已有的系统做内嵌集成,但是基于不同的内嵌场景,需要隐藏页面上的特定元素,如Logo、导航条、卡片按钮等。 观远数据提供默认的几类隐藏模式(详见此处说明),同时也提供进一步更精细化的隐藏机制,可以按需选择对应的元素,组装特定的隐藏模式(Private Setting)。

开放能力概述  

观远数据支持以下9大类约 50+可配置项。 大类包括:

  • 导航区

  • 仪表板

  • 仪表板卡片

  • 卡片详情页

  • 卡片编辑页

  • ETL编辑页

  • 数据大屏页面

  • 仪表板页面(移动端)  

支持隐藏的模块与元素列表:

 

功能位置功能选项描述功能选项唯一名称隐藏方式
全局应用头部app_headerjs
应用头部-右侧操作区app_toolbarcss
页面左侧列表page_navjs
页面头部page_headercss
仪表板页面页面头部-标题栏page_header_titleBarjs
页面头部-筛选栏(含按钮)page_header_filterBarjs
页面头部-页面标题page_titlecss
页面头部-桌面端/移动端布局page_operation_layout_switchjs
页面头部-发布page_operation_publishjs
页面头部-快捷查询page_header_bookcss
页面头部-筛选栏展开收起按钮page_header_filterjs
页面头部-右侧操作栏-权限管理page_operation_authjs
页面头部-右侧操作栏-数据集page_operation_datasetsjs
页面头部-右侧操作栏-查看资源血缘page_operation_lineagejs
页面头部-右侧操作栏-实时数据page_operation_auto_updatejs
页面头部-右侧操作栏-页面订阅page_operation_subscriptionjs
页面头部-右侧操作栏-批量导出PDF/导出为PDF/导出图片/导出视图page_operation_exportjs
页面头部-右侧操作栏-投屏/投屏设置page_operation_castjs
仪表板卡片页面-卡片头部-联动钻取转跳card_header_link_drill_gotojs
页面-卡片头部-被联动条件card_header_filterjs
页面-卡片头部-卡片信息card_header_infojs
页面-卡片头部-编辑(iframe卡片)card_header_editIframejs
页面-卡片头部-编辑(image卡片)card_header_editImagejs
页面-卡片头部-编辑(text卡片)card_header_editTextjs
页面-卡片头部-放大card_header_magnifyjs
页面-卡片头部-调整列宽card_header_resizejs
页面-卡片头部-显示数据card_header_toGridjs
页面-卡片头部-显示图表card_header_toGraphjs
页面-卡片头部-格式刷card_header_formatPainterjs
页面-卡片头部操作栏-前往详情card_operation_detailjs
页面-卡片头部操作栏-跳转card_operation_jumpjs
页面-卡片头部操作栏-导出card_operation_exportFilejs
页面-卡片头部操作栏-预警card_operation_alertjs
页面-卡片头部操作栏-创建订阅card_operation_subscriptionjs
页面-卡片头部操作栏-管理订阅card_operation_manageSubscriptionjs
页面-卡片头部操作栏-查看查询语句card_operation_scriptjs
页面-卡片头部操作栏-另存为card_operation_save_asjs
页面-卡片头部操作栏-移动card_operation_movejs
页面-卡片头部操作栏-联动card_operation_cardLinkjs
卡片详情页卡片详情-头部card_view_headercss
卡片详情-底部card_view_footercss
卡片详情-操作栏-管理订阅card_view_manageSubscriptionjs
卡片详情-操作栏-创建订阅card_view_subscriptionjs
卡片详情-操作栏-另存为card_view_save_asjs
卡片详情-操作栏-预警card_view_alertjs
卡片编辑卡片编辑-数据集预览跳转card_edit_datasetsjs
卡片编辑-权限管理card_edit_authcss
卡片编辑-面包屑card_edit_breadcrumbcss
卡片编辑-表格卡片的反馈填报card_edit_feedbackjs
ETL编辑ETL编辑-头部-所在目录及点击事件隐藏etl_edit_hidden_catalogsjs
ETL编辑-头部-更新设置etl_edit_update_settingscss
ETL编辑-头部-保存并退出etl_edit_save_and_exitjs
ETL编辑-头部-保存运行并退出etl_edit_save_and_run_then_exitjs
ETL编辑-头部-另存为etl_edit_save_asjs
ETL编辑-头部-取消etl_edit_canceljs
数据大屏页面头部-标题screen_titlejs
页面头部-操作栏(三个点的图标)screen_operationjs
页面头部-操作栏-权限管理screen_operation_authjs
页面头部-操作栏-实时数据screen_operation_auto_updatejs
页面头部-操作栏-数据集screen_operation_datasetsjs
页面头部-操作栏-查看资源血缘screen_operation_lineagejs
编辑页-未显示的卡片-从仪表板复制卡片screen_edit_cardPool_copyFromDashboardjs
编辑页-卡片-操作栏-编辑screen_edit_operation_editjs
编辑页-卡片-操作栏-联动screen_edit_operation_cardLinkjs
编辑页-卡片-操作栏-钻取screen_edit_operation_drilljs
编辑页-卡片-操作栏-转跳screen_edit_operation_jumpjs
编辑页-卡片-操作栏-移动screen_edit_operation_movejs
编辑页-卡片-操作栏-另存为(包括未显示卡片的另存为)screen_edit_operation_saveAsjs
编辑页-卡片-操作栏-移除screen_edit_operation_removejs
移动端页面移动端页面-卡片头部(全部隐藏)mobile_card_headerjs
移动端页面-卡片头部-锁定mobile_card_header_lockjs
移动端页面-卡片头部-卡片提示mobile_card_header_hintjs
移动端页面-卡片头部-被联动条件mobile_card_header_filterjs
移动端页面-卡片头部-放大mobile_card_header_magnifyjs
移动端页面-卡片头部-联动钻取转跳mobile_card_header_link_drill_gotojs
  • 全局:app_header、page_nav、page_header如下图所示

app_header.png

  • 仪表板页面:page_header_titleBar、page_header_filterBar、page_header、page_operation如下图所示

page_header.png

page_operation.png

  • 仪表板卡片:card_operation如下图所示

card_operation.png

使用方式  

步骤一:确认需求

确认需要隐藏的元素,梳理这些元素对应的英文标识字符串,多个元素标识之间以英文逗号分割,如app_header,page_operation_auth  

步骤二:修改配置,新增隐藏模式

guandata-web-configmap.yaml文件

guandata-web-controller.yaml文件

这两个文件的默认路径是/home/guandata/Development/guandata-web/

cd /home/guandata/Development/guandata-web/
ls
# 就能看到要改的文件了
vim 对应的文件(可编辑上面提到的.yaml文件)
#修改文件内容

编辑 guandata-web-configmap.yaml文件,新增如下内容  

ps_xxx.js: |
    /* eslint-disable no-var */
    var privateSetting = {
        customHiddenKeys: "app_header,page_operation_auth"
    };
    /* eslint-enable no-var */
    module.exports = privateSetting;

其中 ps_xxx 支持自定义,标识特定的一种隐藏策略;customHiddenKeys 对应的值即为步骤一梳理的字符串。

步骤三:修改文件,挂载隐藏模式对应的js

编辑 guandata-web-controller.yaml文件,新增如下内容

- key: ps_xxx.js
  path: private-settings/ps_xxx.js

注意此处的ps_xxx 需要与步骤二中定义的完全一样。

全部配置完成后,重新启动Web Server。  

#生效配置
cd /home/guandata/Development/guandata-web/
kubectl apply -f guandata-nginx-configmap.yaml  
kubectl apply -f guandata-web-configmap.yaml  
kubectl apply -f guandata-web-controller.yaml

## 重启服务(上面2个文件是前端web文件,需要重启前端web服务,重启会影响几分钟前端页面的访问)
kubectl delete pod -l app=guandata-web

步骤四:测试验证

在Galaxy(BI)访问地址中添加 ?ps=ps_xxx 参数,如果已经包含了 ? 字符,则添加 &ps=ps_xxx  字符串。  

如需帮助,请联系观远数据支持团队。