Qlik Sense学习笔记之Mashup开发（一）

date: 2018-12-21 12:33:29

updated: 2018-12-21 12:33:29

Qlik Sense学习笔记之Mashup开发（一）

1.基于Qlik Sense API的Mashup开发

1. Capability API

   一定程度上对应了鼠标所能做到的所有操作或功能

2. 开发工具

   • Qlik Sense dev-hub Mashup Editor
   • Text Editor
     • Notepad++
     • Sublime
   • IDE
     • Visual Studio Code
     • Web Storm
     • Eclipse

2.Mashup基础代码分析

1. Project

   • XXX.html

   • XXX.js

   • XXX.css

   • XXX.qext

   qlik文件，用来概括mashup的一些基本信息，比如名称，版本，有什么依赖等。

   • wbfolder.wbl

   当前mashup有什么文件，有哪些文件是可以在Mashup Editor中罗列出来再次被编辑的。通过Sense go插件可以自动生成。

2. Require JS

   1. 新建一个mashup，在head中自动引入了require.js文件
   2. <script src="../../resources/assets/external/requirejs/require.js"></script>
   3. 针对qlik sense的异步调用，优化后的一个require版本
   4. 可以通过依赖的形式将需要的js文件注入进来，是lazy load的一种方式，只有用到的时候以后才会引入

3. Qlik-style.css

   1. 新建一个mashup，在head中自动引入了Qlik-style.css文件
   2. <link href="../../resources/autogenerated/qlik-styles.css" rel="stylesheet">
   3. 保证object拖动之后渲染效果与图表原先效果保持一致
   4. 可以覆写这个文件来尝试修改图表样式

3.Mashup开发技巧

1. Qlik Sense Desktop

   在Document--Qlik--Sense--Extensions下可以找到Qlik Sense Desktop中的工程目录，以及相关的文件，可以自由增删文件，并可以立即调用

2. Qlik 文档

   • https://help.qlik.com

   点击下面的Developer，在最左面有一个 API reference

3. Sense-go

   • https://github.com/stefanwalther/sense-go

   辅助开发插件，只需要设置一下项目名称、版本号、目标输出目录，其他的会自动监听文件变化，并自动编译到目标输出目录中

4. Qlik Sense Developer Mode

   1. 开发中调用图表，是通过 id 去获取调用。
   2. 第一种方式：可以从dev-hub中的Single Configuration中查看
   3. 第二种方式：针对这个页面，可以从页面中查看
   4. http://域名/sense/app/515fc2f7-7779-4d78-b355-250814d16b17/sheet/6d79d8f2-9314-4718-8d48-ff63b72acc21/state/analysis
   5. 把/state/analysis修改成/options/developer,然后右键点击图表可以看到 Developer 选项，可以查看object的id还有其中的数据、结构如何。

5. 引入第三方类库

   1. 如果是css文件的话可以直接在head中引入
   2. 但是如果是js文件的话，因为一次性加入的js文件可能过多导致第一次进入太卡，所以放在 app.js 文件 require 函数中统一载入。
   3. 即 第一次进入时先出现loading页面，这个时候载入相关文件和数据

6. ID 变与不变

   1. 如果复制了一个chart，那两个chart的id
   2. 但是如果是删除一个chart，然后再重新写一个一样的chart，id会自动改变
   3. 比如现在有一个piechart，现在想用barchart，但是以后可能还会用piechart，最好是复制一个，然后将其中一个piechart点击右键通过convert转换成barchart
   4. 可以在js文件夹下创建一个map.js文件，专门存放 objname -- objid，或者写一个json文件，这样可以保证修改时不会重新编译整个项目

4.Mashup安装与管理

1. QMC – Qlik Management Console

2. Export / Import

3. 多版本处理

   修改qext文件中的name，重新导入时候就会区分开

4. Qlik Branch

5.Mashup 最常用的 Qlik API – Capability API

因为qlik传递的信息是单节点信息，没有办法绑定js的event事件，所以无法判断传递的数据类型以及根据数据传递事件做出相应的事情。所以需要通过API来获取数据。

• Root API

  1. 返回高于APP层级的信息，通过getAppList可以返回当前用户有多少app，app有什么信息。
  2. openApp：打开一个app，之后才能继续使用APP API
  3. resize：Qlik Sense虽然可以自适应，但是如果想把一个chart放到一个div中 ，同时用户可以对div进行拖动放大放小，这时没有触发浏览器的resize，所以就需要resize这个api来辅助实现自适应。
  4. sessionApp：如果说想做一个app，让用户可以点进来看，但是用户所有的操作做出的改动不想保留下来，可以使用sessionApp
  5. setDeviceType：可以强行设置'auto'、'touch'、'desktop'，若未设置则自动检测
  6. table：能够直接将app中的数据变换成table输出

• App API

  1. clearAll：清空选项
  2. getObjectProperties：通过传参（appid）获取到chart数据，并进行二次开发
  3. getObject：直接将app渲染到div中

• Bookmark API

  可以存储当前的选择信息，类似于宏操作，可以保留历史

• Field API

  1. QField -> select：因为Qlik Sense中做筛选是在字段上做的，所以所用到的select是在QField下的select方法中，添加字段名称，以及想要选择的下标索引，以及是否需要重新覆写上一次的选择。
  2. QField -> selectAlternative：互斥选择。选择当前选择的所有其他选项。
  3. 选择的时候有四种颜色：绿色表示当前选择的，白色表示与当前选择相关的选项，深灰色表示不可选，灰色表示可选。白色的可以通过selectPossible方法来选择。
  4. QField -> selectValues：不知道选项下标，直接传入value，帮助选择

• Global API

  用于返回Qlik Sense基本信息，如版本号，server信息，运行状态等

• Table API

• Navigation API

• Selection API

  1. 专注于当前app中选择的选项，选择的状态等，是基于QField中的select方法的。
  2. 通过对app.selectionState().onData.bind(listener)进行绑定监听，获取当前选中 的选项信息，可以进行下一步的跳转或者其他事件。

• Variable API

• Visualization API

  1. 在app的dataModel基础上，通过create方法可以生成新的图表，或者通过get方法拿到一个图表，在其渲染之前进行一些数据判断或再次筛选。类似于预读功能，先读入配置，等需要渲染的时候再渲染。
  2. Options：可以获取某一些图表的properties，并可进行适当的替换，所作出的操作不会影响原始数据和图表。

6.Mashup 客户端 API

1. Capability API

2. Extension API / Backend API

3. URL Integration (Single Object /App)

   每一个object在single configuration中可以直接复制url地址粘贴在浏览器直接打开，单独占一个websocket，同时可以设置opt=nointeraction（无法选择进行交互）或者删除这一句话来使用户可以选择其中的某一项。

7.Qlik 服务端 API

1. Engine API

   • Enigma.js
   • .NET SDK

2. QRS API (Qlik Repository Service API)

   1. 删除app 修改app 上传文件 etc
   2. 需要保证header中的X-Qlik-Xrfkey 16位字符串与参数是一样
   3. 可以查看QRS API endpoints (subset)

3. QPS API (Qlik Proxy API)

   1. 可以拿到ticket，通过ticket获取一个session，再与Qlik进行交互

4. UDC API (User Directory Connector API)

8.Qlik 扩展 API

1. Customer Connector (QVX)

2. ODAG API (on demand app generation)

3. SSE (Server side extension)

4. Leonardo UI

5. Picasso Chart Lib