(此文章同时发表在本人微信公众号“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应用中。

如何把Qlik Sense嵌入到Web应用中的更多相关文章

  1. 如何把Power BI嵌入到Web应用中

    (此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI ...

  2. 免费生成二维码接口,可直接嵌入到web项目中,附带嵌入方法,任意颜色二维码,任意大小二维码!

    在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...

  3. 海康威视 嵌入到web页面相关问题

    因项目上面需求,接触到了海康威视的设备,要把他嵌入到web页面中,所以就开始了爬坑之路 刚开始不知道如何把设备的页面嵌入到项目的web页面中,直到我遇见了他——“WEB3.0控件开发包V1.0.9_C ...

  4. Qlik Sense学习笔记之Mashup开发(一)

    date: 2018-12-21 12:33:29 updated: 2018-12-21 12:33:29 Qlik Sense学习笔记之Mashup开发(一) 1.基于Qlik Sense API ...

  5. 如何将Gate One嵌入我们的Web应用中

    参考文档http://liftoff.github.io/GateOne/Developer/embedding.html 从https://github.com/liftoff/GateOne下载的 ...

  6. [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法

    在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中 ...

  7. Qlik Sense Desktop

    2014年新一代的报表利器 Qlik Sense Desktop 初步体验 2014-09-22 12:45 by BIWORK, 974 阅读, 7 评论, 收藏, 编辑 Qlik Sense De ...

  8. 2014年新一代的报表利器 Qlik Sense Desktop 初步体验

    点击进入 QlikView/QlikSense 社区  交流群:432998033 Qlik Sense Desktop 的案例展示 先上几个刚刚边看边学完成的几个报表案例效果 (如果图片显示不正常, ...

  9. Java嵌入式数据库H2学习总结(三)——在Web应用中嵌入H2数据库

    H2作为一个嵌入型的数据库,它最大的好处就是可以嵌入到我们的Web应用中,和我们的Web应用绑定在一起,成为我们Web应用的一部分.下面来演示一下如何将H2数据库嵌入到我们的Web应用中. 一.搭建测 ...

随机推荐

  1. webapi5

  2. 命令查询网站是否开启CDN加速

    1.使用ping命令 不一定准确  运行-CMD 直接输入ping  域名 C:\Users\6503>ping www.netnic.com.cn 正在 Ping u999.v.qingcdn ...

  3. eclipse配置tomcat

    1eclipse默认是用workspace的comcat,要把它配置成我们自己的外部tomcat,并且发布路径修改为webapps 2设置tomcat的启动和关闭时间 3如果要发布到tomcat根目录 ...

  4. Redis-3.2.6 配置文件中文翻译

    ############## # 指定配置文件: ################################## INCLUDES ############################### ...

  5. document封装一些常用的方法

    /** * 批量修改元素样式 */ function css(domObj,styleArry){ for(var i=0;i<styleArry.length;i++){ domObj.sty ...

  6. Buddy内存分配算法

    Buddy(伙伴的定义): 这里给出伙伴的概念,满足以下三个条件的称为伙伴:1)两个块大小相同:2)两个块地址连续:3)两个块必须是同一个大块中分离出来的: Buddy算法的优缺点: 1)尽管伙伴内存 ...

  7. PHP获取某月天数

    方式一: <?php function days($year,$month){ if($month<10){ $month = '0'.$month; } if($month == 12) ...

  8. 异步select

    server coding: #!/usr/bin/python # -*- coding: utf-8 -*- import select import socket import sys impo ...

  9. mac pods 安装

    CocoaPods的安装步骤: 1.先配置Ruby环境: 若已安装Ruby,请升级Ruby环境 sudo gem update --system 若没有安装,则请看下面, 以下代码区域,带有 $ 打头 ...

  10. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...