本教程介绍如何在活字格页面中集成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¶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¶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={"参数名":["参数值"]}。