zoukankan      html  css  js  c++  java
  • 活字格集成Wyn Enterprise

    本教程介绍如何在活字格页面中集成Wyn Enterprise报表或仪表板。
    附件为集成示例工程,可下载参考学习。


    基本原理
    在活字格页面中集成Wyn Enterprise的文档,不管是报表还是仪表板,核心都是一个URL网址。把这个URL网址作为活字格页面中某个链接的目标网址,或者作为页面中某个iframe的src属性值,即可实现用户在活字格页面中查看Wyn文档的需求。集成效果如下图:

    图中红框部分就是被集成的Wyn Enterprise文档。
    页面顶部的【查看报表】按钮,其命令为一个JavaScript命令

    JavaScript代码如下:
    var iframe = $('[fgcname = "ReportContainer"]');
    // 从本地存储中获取令牌
    var token = window.localStorage["token"];
    // 组织成可直接访问的URL
    var urlStr = “http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN”  + "&token=" + token;
    // 将URL设置为iframe的src属性
    iframe.empty();
    iframe.append("<iframe style='height: 100%; 100%; border: 0px;' src='" + urlStr + "'/>");

    代码中,可直接访问的URL,由文档URL加上令牌参数("&token=" + token)构成。
    文档URL可从Wyn门户点击【新窗口】获得,如下图:

    新窗口地址栏的URL就是文档URL:

    在登录Wyn门户之前,直接访问这个文档URL,将会跳转到Wyn登录页面。
    为了能够直接打开文档,需要在文档URL后面加上令牌(token)参数,即 "&token=" + token,如:
    &token= 5b87……………71adca

    令牌的获取,可以使用一个网页工具,也可以使用JavaScript代码调用Wyn的登录API。

    获取Token
    使用工具获取Token
    请使用下面的链接,下载getToken.html网页工具文件:
    http://help.grapecity.com.cn/download/attachments/30265316/getToken.html?version=1&modificationDate=1553237084000&api=v2
    双击该文件,浏览器将打开该网页工具

    将页面中的Wyn Login Server URL修改为您的Wyn Enterprise服务器的登录页面的URL,然后输入Wyn Enterprise用户名和密码,再单击按钮“Login to Get Token”。如果登录成功,按钮下面的文本框将会显示令牌字串,例如:806e58d428b276207bd36b07248143e2a975ad961bbc27bc32f61af404e916d7。

    使用JavaScript代码获取Token
    在活字格页面中,定义两个保存用户名和密码的单元格,如txtUserName和txtPassword。
    为登录按钮设置一个【JavaScript命令】


    代码的核心逻辑是:
    将页面上txtUserName文本框内的用户名和txtPassword文本框内的密码,以POST方式调用Wyn Enterprise的登录API。这个API的默认URL是 http://localhost:51980/connect/token 。
    调用成功后,API将返回一个JSON对象,其中的access_token属性值就是一个可以用于访问Wyn文档的Token。可将这个Token保存在本地存储中备用,例如:
                window.localStorage["token"] = obj.access_token;

    详细的JavaScript代码,请参考附件工程:活字格集成Wyn.fgcc

    无论采用何种方式,获取到Token之后,即可在Wyn的文档URL之后加上 &token=xxxxxx 这种形式的QueryString,构成一个可以不经登录、直接访问的URL。这种可直接访问的URL,可以用于网页链接,也可以用于iframe的src属性,实现页面跳转或嵌入显示Wyn的报表或仪表板。

    集成方式
    从用户界面的角度看,将Wyn文档集成到活字格页面,有两种方式:
    (1)页面跳转:即在活字格页面中,设置一个链接,用户点击该链接,浏览器跳转到Wyn文档显示页面。
    (2)页面嵌入:即在活字格页面中,设置一个iframe,用户点击【显示报表】按钮时,Wyn文档直接显示在iframe中。

    页面跳转
    在获取Token并拼接完成可直接访问的Wyn的文档URL之后,可以在活字格页面中设置一个链接,设置【页面跳转】命令,如下图:

     

    其中的URL,就是带有&token=xxx参数的可直接访问的Wyn文档URL,例如:
    http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN&token=806e58d428b276207bd36b07248143e2a975ad961bbc27bc32f61af404e916d7

    页面嵌入
    在活字格页面中使用iframe嵌入显示Wyn文档,步骤如下:
    (1)设置合并单元格并命名
    在准备用于显示报表内容的区域,设置单元格合并,然后在左上角的单元格名称框内输入一个名称,例如:ReportContainer,如下图:

    (2)设置按钮JavaScript命令
    页面顶部的【查看报表】按钮,其命令为一个JavaScript命令,如下图:

    JavaScript代码如下:
    var iframe = $('[fgcname = "ReportContainer"]'); // 此处的ReportContainer就是合并单元格的名称
    // 从本地存储中获取令牌
    var token = window.localStorage["token"];
    // 组织成可直接访问的URL
    var urlStr = http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN  + "&token=" + token;
    // 将URL设置为iframe的src属性
    iframe.empty();
    iframe.append("<iframe style='height: 100%; 100%; border: 0px;' src='" + urlStr + "'/>");

    代码中,可直接访问的URL,由文档URL加上令牌参数("&token=" + token)构成。

    集成示例说明
    在活字格中集成Wyn Enterprise,有三种方法:
    (1)使用固定令牌集成
    即使用预先准备好的令牌作为Token参数,组织成可直接跳转或嵌入iframe的URL网址。
    (2)调用登录接口后集成
    首先调用Wyn Enterprise的登录API,然后用返回的Token作为URL网址的一部分。
    (3)调用单点登录集成插件
    调用Wyn Enterprise的单点登录集成插件,一次性完成登录与集成显示。

    一、使用固定令牌集成
    先在Wyn Enterprise中打开一个报表或者仪表板,点击右上角【新窗口】:

     

    将地址栏的URL拷贝下来:

     

    比如:
    http://localhost:51980/reports/view/5b8796af2e6c1b000e71adcc?display=pageless&#182;mpanel=top&theme=default&lng=zh-CN

    再用浏览器打开getToken-wyn3.2.html文件,输入Wyn Enterprise门户网址、用户名、密码,点击Login按钮:

    得到一个Token,拷贝下来。
    将上面那个报表的URL,加上 &token= ,再串接这个Token,比如:
    http://localhost:51980/reports/view/5b8796af2e6c1b000e71adcc?display=pageless&#182;mpanel=top&theme=default&lng=zh-CN&token=55086...e0c3b

    在活字格中,为按钮设置一个【页面跳转】命令,指定外部URL就是上面这个网址:

    运行时,点击按钮,就将跳转到新页面,直接显示报表或者仪表板内容。

    二、调用登录接口后集成
    首先设置一个登录按钮的Javascript命令,调用Wyn的登录API:
    localhost:51980 /connect/token
    得到返回的token之后,保存到单元格或全局变量中:
    Forguncy.Page.getCell("txtToken").setValue(obj.access_token);
    window.localStorage["token"] = obj.access_token;

    在其他页面(如页面2)中,在按钮的Javascript命令中,取出全局变量中的token:
    var token = window.localStorage["token"];
    设置一个大的合并单元格,作为iframe的容器:
    var iframe = $('[fgcname = "ReportContainer"]');
    在容器中添加一个iframe元素,将其src设为带token的URL即可:
    var urlStr = "http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN&token=" + token;

    iframe.empty();
    iframe.append("<iframe style='height: 100%; 100%; border: 0px;' src='" + urlStr + "'/>");

    三、调用单点登录集成插件
    准备工作:部署Wyn的单点登录插件:
    (1)拷贝SSO插件
    SsoPlugin.zip文件解包至 C:Program FilesWyn EnterprisePlugins,使得Sso位于Plugins之下。
    sso.config.zip文件解包至C:Program FilesWyn Enterprise。
    (2)修改C:Program FilesWyn EnterpriseMonitorWyn.conf文件
    plugins:
                - 'Plugins/sso/sso-plugin.dll'

    注意:上面这行设置,需要12个前导空格。

    活字格页面按钮的Javascript命令:
    要点:将username和password以POST方式提交到Wyn的SSO插件:
    var serverUrl = "http://localhost:51980/api/integration/sso?type=dashboards&docid=5b809a606d502b0031deb3cd&action=view";
    var userName = Forguncy.Page.getCell("txtUserName").getValue();
    var userPassword = Forguncy.Page.getCell("txtPassword").getValue();
    token = loginWyn(serverUrl, userName, userPassword);  // 无需使用返回的token

    SSO插件接口URL的构成:
    固定部分:/api/integration/sso
    QueryString参数:
    type: 文档类型,dashboards或reports,注意末尾的s不能少。
    docid:文档ID
    action:view,edit,或者create,分别表示查看、设计、新建,如果是create,docid可省略。

    运行时,点击按钮,如果用户名和密码登录Wyn成功,直接打开报表或仪表板的查看、设计、或者新建页面。

    四、传递报表参数
    参考Wyn Url集成URL参数说明:
    https://help.grapecity.com.cn/pages/viewpage.action?pageId=42075479在Url后面跟 &dp={"参数名":["参数值"]}。

  • 相关阅读:
    CF1295D Same GCDs
    欧拉函数
    CF1509C The Sports Festival
    莫队学习笔记
    CF271D Good Substrings
    字符串
    P2704 [NOI2001] 炮兵阵地
    【洛谷 3399】丝绸之路
    【洛谷 3379】最近公共祖先
    【洛谷 2939】Revamping Trails G
  • 原文地址:https://www.cnblogs.com/edoo/p/13407792.html
Copyright © 2011-2022 走看看