ngx-qlik-isolated npm 包使用教程

1. 介绍

ngx-qlik-isolated 是一个 Angular 插件，它使用 Qlik Sense 的 Isolated 插件 API 来显示可视化效果。它提供了一个快速的方法来构建大规模的和易于管理的 Qlik Sense 应用，并集成 Qlik Sense 应用中的可视化组件，而不用担心与其他非 Qlik Sense 应用有冲突。

本文将详细介绍如何使用 ngx-qlik-isolated 来构建一个简单的 Qlik Sense 应用程序，并集成可视化组件。我们将涵盖以下内容：

  1. 安装和引入 ngx-qlik-isolated
  2. 配置 Qlik Sense 的服务 URL 和访问令牌
  3. 创建一个基于 ngx-qlik-isolated 的组件
  4. 在组件中添加 Qlik Sense 中的可视化效果
  5. 使用 Qlik Sense APIs 来操作 Qlik Sense 中的数据和过滤器

2. 安装和引入 ngx-qlik-isolated

首先，我们需要安装 ngx-qlik-isolated 插件。使用以下命令进行安装：

--- ------- ----------------- ------

接下来，在 app.module.ts 中引入 NgxQlikIsolatedModule ：

------ - --------------------- - ---- --------------------

-----------
  -------- -
    ---------------------
  --
  ---
--
------ ----- --------- - -

接下来我们需要在应用程序启动时配置 Qlik Sense 服务的 URL 和访问令牌。

3. 配置 Qlik Sense 的服务 URL 和访问令牌

我们可以在应用程序启动时配置 Qlik Sense 服务的 URL 和访问令牌，该配置将用于所有 Qlik Sense API 调用。

我们可以将这些设置存储在一个配置服务的单例中，以便在应用的任何地方轻松地访问这些设置。

首先，我们创建一个 ConfigService ：

------ - ---------- - ---- ----------------

-------------
------ ----- ------------- -
  -------------- - ---
  --------------- - ---
-

然后我们在 app.module.ts 中创建 ConfigService 的实例，并使用 Qlik Sense 服务的 URL 和访问令牌进行配置：

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------------- ----------- - ---- --------------------
------ - ------------- - ---- -------------------

-----------
  -------- -
    --------------
    ---------------------
  --
  ---------- -
    --------------
    - -------- ------------ ----------- -- -- --
        ----- ------------------------------
        ------- -----
        ----- -----          
        ------- ---
        ------ ---
        ---- ----------------------------------
    ---
  --
  ---
--
------ ----- --------- - -

在上面的代码中，我们通过将 QLIK_CONFIG 提供的工厂函数用作 Token，配置了 Qlik 的服务 URL 和访问令牌。

4. 创建一个基于 ngx-qlik-isolated 的组件

我们将在组件中使用 ngx-qlik-isolated 来显示 Qlik Sense 中的视图。创建一个名为 QlikViewComponent 的新组件：

------ - ---------- ------ - ---- ----------------

------------
  --------- ----------------
  ------------ -----------------------------
  ---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -

  ------------- - -

  ---------- -
  -

-

现在我们将在 HTML 文件中添加一个 div，该代码将显示我们的 Qlik Sense 报表，以及一些按钮，这些按钮将用于交互式应用程序中的过滤器。

---- -----------------------
  ---- --------------------
  ------- ------------- ---------- ----------------------------
  ------- ------------- ---------- -------------------------
------

5. 在组件中添加 Qlik Sense 中的可视化效果

我们使用 Qlik Sense 的 Isolated 插件功能来显示 Qlik Sense 中的可视化效果。在组件中，我们使用 Qlik 对象来访问 Qlik Sense API。

我们将使用以下代码来初始化视图：

------ - ---------- ----------- ---------- ------- --------- - ---- ----------------
------ - ------------- - ---- --------------------

------- ----- ----- ----

------------
  --------- ----------------
  ------------ -----------------------------
  ---------- -----------------------------
--
------ ----- ----------------- ---------- ------- --------- -
  ---------------------- ------------ -----------

  ------- -----
  ------- ------ -------
  ------- ---

  ------------------- ------- -------------- -
    --------- - --- ----------------------------
    ---------- - -------------
  -

  ---------- -
    ------------------------------------- -- -
      ------- - ---
      ---------------------------------------------------
      ----------------------
      ---------------------- -- -- -
        ----------------------
      ---
    ---
  -

  ------------- -
    ------------------
  -

-

在上面的代码中，我们使用 Qlik 对象实例化了 Qlik Sense 插件，将其传递给我们的 qlik 变量。我们还从 ConfigService 获取了应用程序 ID，并使用 qlik.getQv() 方法初始化视图。

一旦视图初始化后，我们将分别设置元素的名称和类型，并在 render 事件处理函数中隐藏加载状态指示符。

6. 在组件中添加过滤器

添加过滤器需要创建过滤器窗口。我们按以下方式在组件中创建了一个名为 FilterDialogComponent 的新组件：

------ - ---------- ------ ---------- ------- ------------- - ---- ----------------
------ - ------------------------ - ---- --------------------------------
------ - ------------- - ---- --------------------
------ - ---------------- - ---- ------------------------

------------
  --------- --------------------
  ------------ ---------------------------------
  ---------- ---------------------------------
--
------ ----- --------------------- ---------- ------- --------- -
  -------- ----------- --------------

  ------- ----------- ------------- ------- ------ ------- ------- ------------- ------- ------ ---------- - ---

  ------------------- ---------- ----------------- ------- ------- -------------- ------- ----- ------------------------- - -

  ---------- -
  -

  -------------------- -------------- -
    -- -------- ------------ -- --- ---- --- -- ---- -----
    -- ------------- -- -------- -
      ----- -------- - --------------------------------------- --
        --------------------------------------------------------------------
      --

      ---------------------------------- -- -
        --- ---- ------ -- -------- -
          ----- ---- - ----------------------------------------------------- ---------------
          ----- ----------- - ------------------------- ------------------
          --------------------- -- -
            ----- -------- - --------------------------------------------- -- --------------
            ---------------------------- ---------------- ------ ----- ------- ---------------- -- ------- ------- ---- ------ ----------
          ---
        -
      ---
    -
  -

  ---
   - ----- -- ---------- ----- --------- --- -- -----
   - --- ------- - ------- ---- ---- ------- -- --- ------ -- --- ---------- ----------
   --
  ------- -------------------- ------- ------ ------- -
    ------ --------------------------------- -- -
      ------ ------------------------------ -- -
        ------ -------------------------
          ------ -
            ------ ------------
          --
          -------------------- -
            ----- -----
            ----------- -------
            ------------- --
            --------------- --
              ------------ ------------------ - ---- - ------
              ----------- -------
              ----------------- --
              ----------------- -
            --
          -
        -------------- -- -
          ------ ------------------------------ -- -
            ------ -------------------------------------------------- -- --------
          ---
        ---
      ---
    ---
  -

-

在上面的代码中，我们创建了一个 FilterDialogComponent，它获取所有列的值并为它们创建下拉列表，并返回当前选定的值。

我们在组件的 HTML 文件中实现了 UI：

---- --------------------------------
  ------- ------------- ---------- ------------ ------------------- ------------------------------------------

  ---- ----- ---
  ---- ------------ ----- ----------------- ------------- ------------- ----------------------------------- -------------------
    ---- ------------------- --------- ----------------
      ---- ----------------------
        ---- ---------------------
          --- ------------------- -------------------------------
          ------- ------------- ------------- -------------------- -------------------
            ----- ---------------------------------
          ---------
        ------
        ---- -------------------
          ---- ----------- --- -- ------------
            ---- -------------------
              ------ -----------------------------------------
              ------- -------------------- ------------------ ----------------------------------------
                ------- ----------- --- -- ----------- ------------------------------------------
              ---------
            ------
          ------
        ------
        ---- ---------------------
          ------- ------------- ---------- -------------- --------------------------------
          ------- ------------- ---------- ------------ -------------------- -------------------------------------
        ------
      ------
    ------
  ------
------

这段 HTML 代码包含一个模态对话框，用于设置所选的过滤器值。 该代码还在 Angular 中使用了 ngModel 变量，该变量存储用户选择的值，并将其传递给 updateFilters() 函数。

接下来，我们将在主组件中实现 updateFilters() 函数，该函数将更新 Qlik Sense 中的数据，以显示用户选择的过滤器值。

------ - ---------- ----------- ---------- ------- --------- - ---- ----------------
------ - ------------------------ - ---- --------------------------------
------ - ------------- - ---- --------------------
------ - ---------------- - ---- ------------------------
------ - --------------------- - ---- -------------------------------------------

------- ----- ----- ----

------------
  --------- ----------------
  ------------ -----------------------------
  ---------- -----------------------------
--
------ ----- ----------------- ---------- ------- --------- -
  ---------------------- ------------ -----------
  --------------------------------- ------------- ----------------------

  ------- -----
  ------- ------ -------
  ------- ---
  ------- -------------- - ---

  ------------------- ------- -------------- ------- ---------- ----------------- ------- ----- ------------------------- -
    --------- - --- ----------------------------
    ---------- - -------------
  -

  ---------- -
    ------------------------------------- -- -
      ------- - ---
      ---------------------------------------------------
      ----------------------
      ---------------------- -- -- -
        ----------------------
      ---
    ---
  -

  ------------- -
    ------------------
  -

  --------------- -
    ----- ---------- - ---
    --- ---- --- -- -------------------- -
      -- ----------------------------------------- -
        -----------------
          ------ -----------------------------------------------
          ------ -------------------------------------------------------------------
        ---
      -
    -

    ----- ------------ - -------------------
    ---------------------------------------- -- -
      ----- ----- - -----------

      ----- ---------- - ------------------------------------------ -- ------------------------------------------ - - - - - ---------------
      ----- ------ - ------------------ -- --------- - - - - - ----------------------------------------

      ----- --------- - ----------------- ------------------- - ------ ---
      ------------------------------ --- --- - ----------------------------------------
      ---------------------------
    ---
  -
-

在上面的代码中，我们用选定的值更新了我们的 selectedValues 对象，然后我们将这些值传递给 Qlik 的 QlikSense API。我们也可以进行其他一些操作，如收集当前数据集的状态并在 URL 中添加筛选器。

7. 总结

在本文中，我们介绍了如何在 Angular 应用程序中使用 ngx-qlik-isolated 插件来显示 Qlik Sense 中的数据，并添加过滤器。我们启动应用程序时通过 ConfigService 表示插件向 Qlik Sense 的 URL 和访问令牌进行身份验证，并使用 QLIK_CONFIG 来指定 Qlik Sense 服务的 URL 和访问令牌。我们创建了一个 QlikViewComponent 组件，该组件中展示应用程序的 Qlik Sense 视图。我们创建了 FilterDialogComponent 组件，用户可以在其中为应用程序提供过滤器。最后，我们在主组件中实现了 updateFilters() 函数，该函数将更新 Qlik Sense 中的数据。

通过实现本文所述的步骤，您将能够获得一个完全功能的 Angular 应用程序，该应用程序显示 Qlik Sense 中的数据并使用过滤器进行交互。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005673181e8991b448e3b3b

阅读全文

猜你喜欢

  • npm 包 rn-gesture-password 使用教程

    前言 rn-gesture-password 是一款基于 React Native 的手势密码组件库，支持 Android 和 iOS 平台，提供了多种样式和手势密码图案的定义方式。

    3 年前
  • npm 包 generator-giant-visual-sandbox 使用教程

    前言 随着web技术的快速发展，前端开发工程师在项目开发过程中需要的库、框架、依赖包越来越多，这些依赖包的管理工作已经成为了一个复杂的问题。Node Package Manager（NPM）是一个用于...

    3 年前
  • npm 包 postcss-ms-unit 使用教程

    在前端开发中，我们经常会遇到在不同设备上显示不同的样式问题。例如，使用 px 作为单位时，在高分辨率的设备上显示会变得非常小，而在低分辨率的设备上显示则会非常大。因此，使用一些其他单位是必要的。

    3 年前
  • npm 包 odotlist 使用教程

    odotlist 是一个优秀的前端开发工具，它可以帮助我们实现项目中的任务清单功能。本文将为大家介绍如何使用 npm 包 odotlist。 安装 首先，你需要在你的项目中安装 odotlist，在命...

    3 年前
  • npm 包 quintype-toddy-libs 使用教程

    近年来，Web 前端技术的快速发展使得前端开发变得越来越灵活和高效。npm 社区则是前端技术的大集市，为开发者提供了非常丰富的前端工具和库。本文将介绍 quintype-toddy-libs：一款前端...

    3 年前
  • npm 包 @kyuuseiryuu/react-websocket 使用教程

    WebSocket 天生支持双向通信，比 HTTP 高效得多。在前端开发中使用 WebSocket 可以更好地实现实时数据交互，提高网站的用户体验和响应速度。在这里，我们将介绍如何使用 npm 包 @...

    3 年前
  • npm 包 babel-preset-universal 使用教程

    简介 babel-preset-universal 是一个可以在前端和 Node.js 同时使用的 babel preset。它可以将最新的 ECMAScript 语法转换成常规的 ES5 语法，并且...

    3 年前
  • npm 包 locale-man 使用教程

    Locale-man 是一个优秀的 npm 包，它可以很方便的在前端项目中实现多语言支持。在项目开发中，我们经常遇到要实现多语言的需求。Locale-man 就是为了解决这个问题而开发的一个工具。

    3 年前
  • npm 包 `hook-history` 使用教程

    简介 hook-history 是一个 React Hooks 的 npm 包，旨在帮助前端开发者更加简单地管理应用程序的路由历史记录。 该库提供了类似 React Router 的 useLocat...

    3 年前
  • npm 包 mockgoose-fix 使用教程

    在前端开发过程中，我们经常需要模拟数据进行测试，而使用 mock 数据是比较常见的方法。在 Node.js 的开发中，有一个非常成熟的工具——mockgoose-fix，它可以帮助我们快速构建 moc...

    3 年前
  • npm 包 raspi-rcswitch-api 使用教程

    简介 raspi-rcswitch-api 是一个基于 Node.js 的树莓派无线电通讯控制库，使用 rcswitch-pi 库控制树莓派的无线电模块。本教程将详细介绍如何使用 raspi-rcsw...

    3 年前
  • npm 包 WordPress2Jekyll 使用教程

    如果你是一名博客或网站的管理者，并且使用 WordPress 作为你的内容管理系统，那么你一定会遇到一些烦恼。比如说，你想要离线备份你的文章，或者你想要将你的文章，以及相应的分类、标签、评论等数据迁移...

    3 年前
  • npm 包 min-execution-time 使用教程

    在前端开发中，我们常常需要对代码执行时间进行监控与优化，特别是当我们的前端工程逐渐变得庞大时，对代码执行时间的监控就变得更加必要。为了实现这一目标，我们可以使用同步代码块的方法来监控代码执行的时间，但...

    3 年前
  • npm 包 pre-cmake-js 使用教程

    在前端领域，我们经常需要使用一些依赖包来提高开发效率。而 npm 包 pre-cmake-js 就是其中之一，它是一个编译 C++ 库的工具，可以帮助我们快速生成和使用动态链接库。

    3 年前
  • npm 包 rabbitmq-schema-lvc 使用教程

    在前端开发中，有时需要使用消息队列来处理并发请求或者实现异步消息传输。RabbitMQ 是一种常用的开源消息队列系统，而 rabbitmq-schema-lvc 是一款基于 RabbitMQ 的 np...

    3 年前
  • npm 包 strangenames 使用教程

    在前端开发中，我们经常需要用到一些随机生成字符串的工具。npm 包 strangenames 是一个非常实用的工具，它可以方便地生成各种奇怪和有趣的字符串。 安装 首先，我们需要在命令行中执行以下命令...

    3 年前
  • npm 包 @josulliv101/connect-async-work 使用教程

    简介 @josulliv101/connect-async-work 是一个 Node.js 中间件，它允许您在 Express 和 Connect 应用程序中处理异步请求处理。

    3 年前
  • npm 包 epic-logger 使用教程

    前言 在前端开发中，日志管理是十分重要的一项工作。当出现 bug 时，正确的日志输出可以帮助我们快速地定位问题所在，从而更快地修复问题。常常使用 console.log 配合控制台查看日志信息，但是控...

    3 年前
  • npm 包 typescript-ui5 使用教程

    前言 在前端开发中，UI 框架往往能够让我们开发效率大大提高。而 SAP 公司推出的 UI 开发框架 UI5 是一款国际领先的企业级前端开发框架，其有着丰富的 UI 控件和组件，并且支持多种开发语言。

    3 年前
  • npm 包 Ember-dressy-table 使用教程

    Ember-dressy-table 是一个用于构建数据表格的 npm 包。本文将向您介绍如何使用它构建漂亮的表格。 安装 要使用 Ember-dressy-table，您需要在项目中安装它。

    3 年前

相关推荐

    暂无文章