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

（此文章同时发表在本人微信公众号“dotNET开发经验谈”，欢迎右边二维码来关注。)

题记：这是一个给初学者（尤为对VS不熟悉的BI工程师）的入门操做向导。

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：全部对象节点（不包括服务器节点、流节点和文件夹节点）的实体ID
• iframe：和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方法注释掉。

预告：接下来我会分享如何把微软的Power BI嵌入到你的Web应用中。