服务热线:
021-56056273

联系我们

优文途新科技(上海)有限公司 微软CRM技术合作伙伴
总部地址:上海祁连山路2888号耀光中环国际大厦A座803室
分部地址:郑州高新区电子商务产业园5号楼1单元905室
电话:021-56056273
手机:13671722891
邮件:licy@ewpower.com.cn

公司新闻
您现在的位置: 首页 > 公司新闻 > 内容
如何把Qlik Sense嵌入到Web应用中
编辑:优文途新科技(上海)有限公司   时间:2018-03-02

如何把Qlik Sense嵌入到Web应用中

Qlik Sense是Qlik公司推出的第二代BI产品,它的架构设计的很灵活,实现了前后端分离,所以理论上你可以只使用Sense的后端,而完全自定义前端展示。其实Qlik自带的Hub就可以看作是一个官方实现的前端。


除了架构的灵活性以外,Sense在前端部分也提供了很强的扩展和集成能力,比如可以通过Mashup来自定义页面,甚至可以把报表或者可视化对象嵌入到外部Web应用程序中。Mashup本质也是一种嵌入机制,区别只是在于Mashup的页面是由Sense服务器托管。

要在自己的Web应用(比如ASP.NET MVC应用)中嵌入Sense其实很简单,Qlik已经为我们提供了一个针对Visual Studio的插件——Qlik Analytics plugin for Visual Studio(以下简称Qlik插件)。当然,如果你不使用Visual Studio的话,也可以下载Qlik Explorer for Developers。因为嵌入方式主要在前端,所以嵌入的Web应用可以是任何开发技术开发的。Qlik插件的基本功能就是让我们可以浏览Sense中的所有元素,并把脚手架代码添加到我们的项目代码中。


具体的步骤如下:

1,安装Visual Studio 2015 Community,完成VS的安装后,下载并安装Qlik Analytics plugin for Visual Studio。

2,启动Visual Studio,通过菜单“View-Other Windows-Qlik Analytics for Visual Studio”来打开插件,如下图所示:

3,在Qlik插件中,点击左上角的服务器图标来连接到Sense服务器。服务器可以是桌面版的地址(http://localhost:4848/)也可以是本机或者远程Sense服务器地址(http[s]://server.domain.com[:port]/[VirtualProxy])。如下所示:

4,Qlik插件连接到服务器或者桌面版之后,根据不同的连接地址,显示的内容有所不同。连接桌面版会列出qvf,而连接服务器会先显示所有流,在流之下再显示App。在每个Sense App下面会列出其包含的书签、字段、主可视化对象(包括筛选器和列表)、主维度、主度量、变量、工作表(Sheet)。每个工作表下面还会列出包含的可视化对象。如下图所示:


5,在Qlik插件中的下半部分,有Preview和Code两个标签页。在选择一个可视化对象的时候,预览标签页可以显示这个可视化对象的静态图。而Code可以为选中对象显示如下信息的脚手架代码:

html:基于div的html脚手架代码,不是所有对象都适用

服务器节点:服务器连接信息的html脚手架代码

App节点:操作和导航按钮的html脚手架代码,包括:ClearAll、Back、Forward、DoReload书签对象节点:启用书签的html脚手架代码字段对象节点:字段操作的html脚手架代码,包括:Select All、Select Alternative、Select Excluded、Select Possible、Lock、Unlock、Select、Select Match、Select Values、Clear可视化对象节点:可视化对象的html脚手架代码

Sheet对象节点:Sheet对象的html脚手架代码id:所有对象节点(不包括服务器节点、流节点和文件夹节点)的实体IDiframe:和html类似,只是基于iframe的代码layout:具有id的对象节点的对象模型数据结构的json代码properties:具有id的对象节点的对象属性数据结构的json代码

6,通过VS的菜单“File-New-Project”来打开新建项目的对话框,选择Web模版中的“ASP.NET Web Application”,重命名项目名称,比如“EmbeddedSense”,如下图所示:


7,在上图中点击OK之后,会让你选择ASP.NET所使用的技术,选择MVC后,点击“Change Authentication”按钮,并选择“Windows Authentication”。这样做的原因是为了通过Windows验证来单点登录Sense服务器。当然使用其他验证方式也可以,只是就需要根据Sense的SSO规范来额外做验证集成的开发。其他不用修改,就点OK。注意,理论上选择Web Forms或者SPA也可以,因为嵌入的主要工作在前端,这里仅以MVC举例。如下图所示:


8,创建好MVC项目之后,_Layout.cshtml文件(在Views\Shared文件夹里面),在Qlik插件中选择服务器节点的html代码,拖动到“</head>”之上,保存更改。如下图所示:


9,打开“Views\Home\Index.cshtml”文件,把三个“<div class="col-md-4">”标签里面的内容删除。任意选择三个可视化对象的html代码,拖动到原来的三个位置中。如下图所示:


10,按F5运行Web应用,就可以在首页上看到Sense的可视化对象已经嵌入到你自己开发的Web应用中了。如下图所示:


注意:如果可视化对象不能显示,可以尝试使用IE浏览器来查看;如果报错,可能是Qlik插件和服务器版本有兼容性问题,可以把_Layout.cshtml中qlik.setOnError方法注释掉。



优文途新科技(上海)有限公司
服务热线:
021-56056273

地址:总部地址:上海祁连山南路2888号耀光中环国际大厦A座803室 。分部地址:郑州高新区电子商务产业园5号楼1单元905室  电话:021-56056273  手机:13671722891  电子邮箱:licy@ewpower.com.cn

新利彩票官网vicacopter.com版权所有:优文途新科技(上海)有限公司

上海/江苏/浙江/河南/安徽/山东/湖北/湖南/江西/北京 - 会员管理CRM - 微软ERP - QLIKBI系统 - 移动CRM系统 - 微软Azure - 销售管理CRM - CRM客户关系管理 - 微软云软件 - 微软CRM试用 - 会员系统 - 微软CRM报价 - 微软CRM解决方案 - 系统/服务商/测试版/哪家好/报价/费用/求推荐/试用

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!