观远 BI

iframe网页内嵌集成

创建于 2022-11-01 / 最近更新于 2024-03-28 / 10346
字体: [默认] [大] [更大]

背景

观远BI平台支持仪表板以iframe内嵌集成的方式嵌入到第三方系统内。iframe内嵌集成需要关注的点包括:

image.png

一. PC 端页面多余内容隐藏

  • BI系统内原生的页面带有Logo栏、仪表板导航栏等信息,这些内容在将页面集成到第三方系统后往往是需要隐藏掉的。观远提供了一些特定的URL查询参数,可以把这些多余的信息隐藏掉。

image.png

技术手段:iframe 内嵌;URL 中增加 Query String (查询字符串)

PC 端页面常用参数:

  • ?ps=iframe    仪表板页面隐藏logo栏、仪表板目录

  • ?ps=iframe2  仪表板页面隐藏logo栏、仪表板目录和页面标题栏

  • ?ps=iframe3 仪表板页面隐藏logo栏

  • ?viewMode=readonly  隐藏页面和卡片编辑操作,使用户权限暂时变为只读

  • ?ps=embed    卡片详情页隐藏除可视化图表之外的其他所有内容

URL格式示例:https://app.guandata.com/page/b81ee1f66f3934de1ba5e447?ps=iframe  

当ps参数不为embed时,嵌入卡片是最小宽度为500像素。 


二. 移动端页面集成:

1. PC端访问页面显示移动端效果

场景:观远页面集成至企业微信、钉钉微应用或者自研小程序后,用户有可能会在PC端访问。只想让用户浏览移动端视图(不允许进入PC端进行编辑)的话,此时提供移动端集成页面时需要注意提供移动端的URL。

移动端的URL格式为:$homeURL/m/page/{pageid}

URL格式示例:https://demo.guandata.com/m/page/p5c0e900bbe3746449bca688

2. 隐藏页面上方页头及底部收藏标志(仪表板入口)

场景:将移动端页面集成至企业微信、钉钉微应用或者自研小程序,只展示页面内容,需要隐藏页头(仪表板入口)把用户限定在页面内不要访问观远其他页面。

参数:?pref.HostNavOnly=true

image.png

注意事项:

1.问:已有URL里已经包含了 query string 怎么处理?(示例

答:通过 & 符号来连接所有的参数。举个例子:  http://newbi.com?provider=abc&ssotoken=xxxx&key1=ssss  

2.问:能否隐藏页面标题栏(使用参数?ps=iframe2 ),但是保留筛选栏呢?

答:默认不支持单独处理,建议把筛选栏上的筛选器都移到页面上5.4.0及之后的版本可以引入新的配置项,需要同时配置 app_header、page_header_titleBar、page_title 这三个参数,如有疑问可联系观远技术支持。


255 人点赞过