В этом уроке мы создадим расширение HelloWorld, используя nebula.js и Qlik Sense Desktop

Видео

Hello World Extension – What is Nebula.js?

Making Sense of Qlik APIs – Nebula CLI

Создайем расширение HelloWorld, используя nebula.js

В этом руководстве вы узнаете, как создать простое расширение, отображающее таблицу с использованием nebula.js.

В статье будут пройдены следующие шаги:

1. Создание проекта
2. Настройка структуры данных
3. Данные рендеринга
4. Выбор данных
5. Создание и загрузка расширения

Примечание. Чтобы загрузить расширение в Qlik Sense SaaS, вам необходим доступ к тенанту Qlik Sense SaaS и либо права администратора тенанта, либо средства для получения ключа API, сгенерированного для вас. Вы можете подписаться на бесплатную пробную версию , если у вас нет существующего клиента.

Требования

Этот учебник требует, чтобы у вас было следующее:

• Node.js (версия 10 или новее)
• Терминал (например , Git Bash для Windows или Terminal.app для Mac)
• Современный веб-браузер, например Google Chrome
• Текстовый редактор или IDE по вашему выбору, например Visual Studio Code.
• Существующая веб-интеграция или возможность ее создания. Или клиент Qlik Sense Desktop.

Создание проекта

Самый быстрый способ начать работу — использовать nebula.js интерфейс командной строки:

npx @nebula.js/cli create hello --picasso none

Параметр --picasso none указывает команде не создавать шаблон визуализации Пикассо, другие параметры – minimalи barchart.

Команда формирует проект в папке /hello со следующей структурой:

• /src
  • index.js – Основная точка входа этой визуализации
  • object-properties.js – Свойства объекта, хранящиеся в приложении
  • data.js – Конфигурация данных
• /test – Интеграционные тесты
• package.json

Папка содержит несколько дополнительных точечных файлов, обеспечивающих проверку и форматирование кода.

Запуск сервера разработки

Запустите сервер разработки с помощью команды:

cd hello
npm run start

Команда запускает локальный сервер разработки и открывает http://localhost:8080 в вашем браузере.

Сервер разработки должен подключаться к ассоциативному движку Qlik, работающему в любом развертывании Qlik. Введите URL-адрес WebSocket, соответствующий используемому вами продукту Qlik.

Чтобы открыть WebSocket для движка, используйте один из следующих URI:

• Qlik Sense Enterprise: wss://server.domain.com:4747/ или wss://server.domain.com[/virtual proxy]/
• Qlik Sense Desktop: ws://localhost:4848/

Затем выберите приложение для подключения.

Затем вы будете перенаправлены в основной пользовательский интерфейс разработчика, где сможете увидеть отрендеренную визуализацию:

Любые обновления /src/index.js, влияющие на вывод, автоматически вызывают обновление визуализации, и вы сразу же видите изменения.

Настроить структуру данных

Простое Helloсообщение на самом деле не так уж полезно, пора добавить некоторые данные.

Добавьте qHyperCubeDef определение в object-properties.js:

const properties = {
  qHyperCubeDef: {
    qInitialDataFetch: [{ qWidth: 2, qHeight: 10 }],
  },
  // ...
};

Затем добавьте /qHyperCubeDef в качестве цели данных в data.js:

export default {
  targets: [
    {
      path: '/qHyperCubeDef',
    },
  ],
};

После этих изменений у вас должна появиться возможность добавлять данные на панели свойств справа:

Добавьте измерение, нажав Add dimension и выбрав значение в появившемся меню. Затем проделайте то же самое с мерой – Add measures.

Данные рендеринга

Чтобы отобразить данные, вам сначала нужно получить к ним доступ через useLayout хук:

import { useLayout, useElement, useEffect } from '@nebula.js/stardust';

// ...
component() {
  console.log(useLayout());
}

Затем вы можете useLayout в сочетании с useEffect отображать заголовки и строки данных в qHyperCube:

component() {
  const element = useElement();
  const layout = useLayout();

  useEffect(() => {
    if (layout.qSelectionInfo.qInSelections) {
      // skip rendering when in selection mode
      return;
    }
    const hc = layout.qHyperCube;

    // headers
    const columns = [...hc.qDimensionInfo, ...hc.qMeasureInfo].map((f) => f.qFallbackTitle);
    const header = `<thead><tr>${columns.map((c) => `<th>${c}</th>`).join('')}</tr></thead>`;

    // rows
    const rows = hc.qDataPages[0].qMatrix
      .map((row) => `<tr>${row.map((cell) => `<td>${cell.qText}</td>`).join('')}</tr>`)
      .join('');

    // table
    const table = `<table>${header}<tbody>${rows}</tbody></table>`;

    // output
    element.innerHTML = table;

  }, [element, layout])
}

Выберите данные

Перед выбором данных необходимо добавить метаданные в каждую строку, чтобы значения можно было идентифицировать для выбора:

// rows
const rows = hc.qDataPages[0].qMatrix
  .map(
    (row, rowIdx) =>
      `<tr data-row="${rowIdx}">
        ${row.map((cell) => `<td>${cell.qText}</td>`).join('')}
      </tr>`
  )
  .join('');

Затем добавьте 'click'обработчик событий, elementкоторый выполняет следующие действия:

• Проверяет, что выбранный элемент является td
• Начинает выбор /qHyperCubeDef, если он еще не активирован
• Извлекает data-row индекс из tr
• Обновления selectedRows по клику data-row

const element = useElement();
const selections = useSelections();
const [selectedRows, setSelectedRows] = useState([]);

useEffect(() => {
  const listener = (e) => {
    if (e.target.tagName === 'TD') {
      if (!selections.isActive()) {
        selections.begin('/qHyperCubeDef');
      }
      const row = +e.target.parentElement.getAttribute('data-row');
      setSelectedRows((prev) => {
        if (prev.includes(row)) {
          return prev.filter((v) => v !== row);
        }
        return [...prev, row];
      });
    }
  };

  element.addEventListener('click', listener);

  return () => {
    element.removeEventListener('click', listener);
  };
}, [element]);

Затем обновите стиль выбранных строк в таблице всякий раз, когда они изменяются:

useEffect(() => {
  if (!layout.qSelectionInfo.qInSelections) {
    // no need to update when not in selection mode
    return;
  }
  element.querySelectorAll('tbody tr').forEach((tr) => {
    const idx = +tr.getAttribute('data-row');
    tr.style.backgroundColor = selectedRows.includes(idx) ? '#eee' : '';
  });
}, [element, selectedRows, layout]);

Наконец, примените выбранные значения через selections API:

useEffect(() => {
  if (selections.isActive()) {
    if (selectedRows.length) {
      selections.select({
        method: 'selectHyperCubeCells',
        params: ['/qHyperCubeDef', selectedRows, []],
      });
    } else {
      selections.select({
        method: 'resetMadeSelections',
        params: [],
      });
    }
  } else if (selectedRows.length) {
    setSelectedRows([]);
  }
}, [selections.isActive(), selectedRows]);

Создайте и загрузите расширение

До сих пор вы работали в локальной изолированной среде над диаграммой, которая не зависела от какого-либо конкретного продукта Qlik.

Команда:

npm run build

генерирует пакет в /dist папку, и это все, что вам нужно для распространения диаграммы в виде пакета npm.

Однако Qlik Sense требует некоторых дополнительных файлов и немного другого формата для интерпретации диаграммы как расширения. Чтобы сгенерировать эти файлы, вы можете запустить команду:

npm run sense

Команда создает все файлы в папку /hello-ext, которую затем можно использовать в качестве расширения в Qlik Sense по вашему выбору.

Чтобы загрузить расширение в клиент Qlik Sense SaaS, следуйте инструкциям по управлению расширениями.

Важная и неочевидный шаг для использования собранного расширения из директории hello-ext: Обязательно нужно удалить “-ext” из директории, иначе экстеншен не будет работать и появится приписка, что экстеншен не найден на сервере. Хотя в списке визуализаций в Qlik Sense он появится.

Сообщение Создание Extensions с помощью nebula.js – пример Hello World появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

qExt — это инструмент, помогающий автоматизировать создание и развертывание расширений визуализации Qlik Sense. Он может настроить вас на стандартные среды разработки расширений и более простой метод импорта скомпилированного кода на ваш сервер Qlik, чтобы вам не приходилось каждый раз вручную удалять и импортировать расширение.

Посмотреть проект на GitHub

Qlik Sense Extensions – Расширения Qlik Sense

Анатомия Qlik Extension

Расширения Qlik Sense позволяют создавать собственные объекты визуализации и функциональные объекты в приложении Qlik Sense. Расширения обычно используются для расширения возможностей визуализации Qlik для пользователей, использующих приложения Qlik в режиме самообслуживания. Дополнительные сведения об объектах расширения qlik sense можно найти на сайте Qlik здесь .

все файлы расширения должны храниться в одной папке проекта и, как минимум, должны включать файл qext и основной файл сценария.

файл qext

файл qext в проекте расширения содержит объект json, который определяет метаданные объекта расширения. Имя файла — это уникальное имя, которое Qlik будет использовать для идентификации расширения, и оно должно совпадать с именем файла сценария.

как минимум, файл qext должен включать свойства имени и типа. (полные свойства qext можно найти здесь )

пример файла qext:

// hello-world.qext
{
    "name": "Hello World",
    "description": "Hello world example",
    "type": "visualization",
    "version": "1.0.0",
    "author": "john bellizzi"
}

Script File

файл сценария в проекте расширения — это файл javascript, содержащий всю логику работы вашего расширения. он определяет, как данные поступают в объект, что отображается в объекте, свойства, которые можно установить для объекта, и многое другое. имя файла должно соответствовать вашему файлу qext

существует множество параметров конфигурации файла скрипта, и большинство из них можно найти в руководстве здесь . базовый сценарий использует функцию определения для загрузки любых необходимых ресурсов и возвращает объект javascript, содержащий функции, которые контролируют данные, проходящие через расширение.

наиболее распространенным методом, используемым в расширении, является paintметод, который запускается каждый раз, когда происходит изменение состояния приложения или изменение размера, чтобы мы могли отображать обновления в контейнере объекта расширения. 

Вот пример файла скрипта

define(["jquery"], function($) {
    return {
        paint: function($element, layout) {
            var $helloWorld = $(document.createElement("div"))
            $helloWorld.html('Hello World from the extension "SimpleHelloWorld"<br/>')
            $element.append($helloWorld)

            // layout contains the properties and calculated data of our object
            console.log(layout)
        },
    }
})

Deployment (Развертывание)

при развертывании расширения на сервере qlik правильным методом является сжатие всего каталога расширения в zip-файл, а затем переход к разделу расширений qmc и импорт заархивированного файла расширения. если расширение с таким именем уже развернуто, его необходимо предварительно удалить с сервера с помощью кнопки удаления в разделе расширений qmc

в qlik sense desktop проект расширения просто необходимо поместить в папку C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\. любые изменения в файлах расширения будут отражены в расширении при перезагрузке страницы приложения.

ознакомьтесь со следующим разделом , чтобы узнать, как qExt помогает в настройке этих проектов и автоматизации развертывания.

Для чего нужно qExt?

Библиотека qExt была создана по трем основным причинам.

1. обеспечить лучшую поддержку для компиляции javascript следующего поколения
2. упростить процесс развертывания расширений в средах qlik sense
3. сделать инициализацию новых проектов расширений более воспроизводимой с помощью стандартных шаблонов кода

JavaScript следующего поколения

скрипт, который вы видели на предыдущей странице (и javascript, который вы увидите во многих расширениях qlik), написан на ванильном javascript, который обычно можно использовать в большинстве современных веб-браузеров. это отличное начало для многих, кто начинает знакомиться с javascript, но многие разработчики хотят использовать более новые версии и возможности javascript, включая импорт модулей, функции стрелок и многое другое.

существует множество инструментов, помогающих преобразовывать новый код javascript в обратно совместимые форматы. qExt использует babel в координации с webpack для компиляции всего кода в формат, который может использоваться современными браузерами.

Оптимизация развертывания

в последнем разделе упоминался процесс развертывания расширений в наших средах qlik. если вы выполняете серьезную работу по разработке проекта, ручное решение по удалению и повторному импорту кода проекта каждый раз, когда вносятся изменения, вероятно, не подходит. именно поэтому мы встроили интеграцию развертывания в qExt. инструмент может установить прямое соединение с вашим сервером qlik и автоматически удалить старое расширение и развернуть обновленное за считанные секунды с помощью API qrs

Шаблоны

в примере кода с предыдущей страницы использовался только один из многих методов, доступных в расширениях qlik. обычно при разработке расширений мы используем другие объекты и методы, такие как initialProperties, шаблон, контроллер и другие, чтобы полностью использовать настройки наших расширений. мы обнаружили, что многие из них довольно часто используются в проектах, и вместо того, чтобы переопределять их каждый раз, когда мы создаем новое расширение, мы определили их в шаблонных проектах, которые можно использовать для создания новых проектов расширений из

Введение в qExt Packages (Пакеты qExt)

библиотека qExt на самом деле состоит из двух разных пакетов, которые помогают нам в разработке расширений.

1. qext-scripts — инструмент, который запускается в нашей среде разработки расширений для компиляции кода и развертывания его в средах qlik sense.
2. qext — инструмент cli, который позволяет нам создать новый проект расширения с определенным шаблоном.

qext-скрипты

если мы оглянемся назад на 3 проблемы, которые qExt решает в разделе почему qExt , qext-скрипты в основном помогают нам решить первые 2 проблемы. он поддерживает разработку javascript следующего поколения, компилируя наш код в обратно совместимый формат, и упрощает процесс развертывания, автоматически архивируя скомпилированный код и отправляя его в среды, которые нам нужно обновить.

если у вас уже настроена среда разработки расширений, вы можете легко включить в нее qext-скрипты, установив ее из npm в свой проект расширения.

$ npm install --save-dev qext-scripts

qext

библиотека qext помогает нам решить третью проблему, которую мы задали в вопросе, почему именно qExt, реализуя шаблоны шаблонного кода. это в первую очередь интерфейс командной строки, который мы можем запускать глобально для создания проекта с указанным шаблоном каталога. он также автоматически установит зависимость qext-scripts

qext лучше всего устанавливать глобально, чтобы проекты можно было настраивать, откуда бы вы его ни вызывали.

$ npm install -g qext

Использование

Быстрый старт

прочитайте это, чтобы быстро установить инструменты qext и настроить новый проект

Установить QExt

установить основной инструмент qext глобально

npm install -g qext

Создать новое расширение

откройте окно терминала, в котором вы хотите разместить свой проект, и используйте инструмент qext cli для создания и установки нового проекта расширения.

qext --create-extension my-extension --install
cd my-extension

по умолчанию qext установит starterшаблон проекта. другие шаблоны могут быть переданы через флаг шаблона. доступные шаблоны можно найти здесь

Build extension (сборка экстеншена)

обновите исходные файлы расширения по мере необходимости, затем запустите

npm run build

проект расширения будет скомпилирован и заархивирован в выходной каталог

Просмотр экстеншена

запустите команду qext watch

npm run watch

любые изменения, которые вы делаете и сохраняете в своих исходных файлах, будут автоматически перестроены в ваш выходной каталог.

Deploy extension

добавьте следующую конфигурацию развертывания в файл qext.config.json

{
    ...,
    "serverDeploy": {
        "host": "hostname",
        "isSecure": true,
        "windowsAuth": true
    }
}

затем запустите

npm run deploy

окно терминала запросит ваши учетные данные. предоставить учетные данные для пользователя с доступом на запись к расширениям qlik sense, и новое расширение будет развернуто на сервере

конфигурация serverDeploy может потребовать другие параметры в зависимости от конфигурации сервера. проверьте qExt config для полных настроек конфигурации

в качестве альтернативы вы можете аутентифицироваться с использованием аутентификации заголовка. проверить использование раздела аутентификации заголовка для получения дополнительной информации

Templates (Шаблоны)

Шаблоны позволяют вам устанавливать предварительно определенные каталоги проектов и настройки при использовании инструмента qext cli. имя используемого шаблона может быть передано через -t, --template [type]флаг. ниже приведены шаблоны, которые вы можете выбрать

• vanilla-base — самый простой проект, настроенный для проектов, которые будут написаны с использованием vanilla javascript.
• base — базовый каталог проекта, который устанавливает минимальные исходные файлы, которые будут скомпилированы с использованием webpack и babel.
• starter — начальный шаблон, включая общие методы расширения и файлы конфигурации

Vanilla base

базовый шаблон vanilla — это самый простой шаблон, с которого вы можете начать, используя qExt.

Каталог проекта

├── src
│ ├── qext-template.qext
│ ├── qext-template.js
├── static
├── package.json
├── qext.config.json

каталог src

исходный каталог имеет 2 исходных файла qext-template.qextи qext-template.js. эти файлы следует переименовать в имя расширения, поскольку оно должно храниться в Qlik Sense (имя, которое вы видите при просмотре расширений в QMC).

qext.config.json

{
    "extension": "qext-template",
    "output": "./dist",
    "vanilla": {
        "entry": "./src",
        "static": "./static"
    }
}

файл конфигурации qext настроен с именем расширения, установленным на qext-template, и для сборки в ванильном режиме. когда проект построен, файлы будут скопированы из исходного кода в выходной каталог как есть

Base

базовый шаблон — это базовый шаблон, используемый для компиляции исходного кода расширения с помощью babel и webpack.

Каталог проекта

├── src
│ ├── index.qext
│ ├── index.js
├── static
├── package.json
├── qext.config.json

каталог src

исходный каталог имеет 2 исходных файла, index.qextиindex.js

qext.config.json

{
    "extension": "qext-template",
    "output": "./dist",
    "compile": {
        "entry": "./src/index.js",
        "qext": "./src/index.qext",
        "static": "./static"
    }
}

файл конфигурации qext настроен с именем расширения, установленным на qext-template, и для сборки в режиме компиляции. когда проект будет построен, webpack скомпилирует файлы через файл compile.entry и поместит скомпилированные файлы в выходной каталог. он также скопирует файл qext в выходной каталог

Starter

начальный шаблон устанавливает каталог вашего проекта с часто используемыми методами расширения

Каталог проекта

├── src
│ ├── index.qext
│ ├── index.js
│ ├── style.css
│ ├── methods
│ │ ├── controller.js
│ │ ├── definition.js
│ │ ├── index.js
│ │ ├── initial-properties.js
│ │ ├── paint.js
│ │ ├── resize.js
│ │ ├── template.html
├── static
├── package.json
├── qext.config.json

qext.config.json

{
    "extension": "qext-template",
    "output": "./dist",
    "compile": {
        "entry": "./src/index.js",
        "qext": "./src/index.qext",
        "static": "./static"
    }
}

файл конфигурации qext настроен с именем расширения, установленным на qext-template, и для сборки в режиме компиляции. когда проект будет построен, webpack скомпилирует файлы через файл compile.entry и поместит скомпилированные файлы в выходной каталог. он также скопирует файл qext в выходной каталог

src/index.qext

{
    "type": "visualization",
    "name": "qExt Template"
}

это метаданные расширения. свойство name должно быть обновлено до имени, которое видит конечный пользователь на панели объектов расширения приложения qlik. файл будет переименован в extensionзначение свойства вqext.config.json

src/index.js

import { initialProperties, template, definition, controller, paint, resize } from "./methods"
import "./style.css"

window.define([], function() {
    return {
        initialProperties,
        template,
        definition,
        controller,
        paint,
        resize,
    }
})

src/style.css

это файл css, используемый для определения любых стилей для нашего объекта расширения. обратите внимание, что все классы должны быть предварительно выбраны с именем класса объекта расширения, которое будет в формате-qv-объект. например, если вы хотите установить цвет фона элемента с классом containerв вашем объекте расширения, а имя вашего расширения — my-extension, ваш css должен выглядеть так:

.my-extension-qv-object .container {
    background-color: lightblue;
}

src/methods/initial-properties.js

export default {
    qHyperCubeDef: {
        qDimensions: [],
        qMeasures: [],
        qInitialDataFetch: [],
    },
}

Initial-properties определяет определение свойств объекта при его первом создании пользователем qlik sense. шаблон устанавливает свойства с помощью HyperCubeDef, но это можно изменить на другие определения qlik, такие как ListObjectDef, или пользовательские свойства

src/methods/definition.js

export default {
    type: "items",
    component: "accordion",
    items: {
        settings: {
            uses: "settings",
        },
    },
}

объект определения определяет конфигурацию панели свойств расширения. это основной способ, с помощью которого пользователь, добавляющий расширение на лист qlik, может настраивать и изменять параметры расширения, включая измерения, показатели, цвета и т. д.

больше о том, как настроить объект определения, можно найти здесь

src/methods/paint.js

export default function($element, layout) {
    // ..paint code here
}

функция рисования запускается каждый раз, когда происходит обновление макета нашего объекта расширения. это может быть вызвано изменением состояния выбора приложения qlik sense, а также изменением размера окна. это позволяет «перекрашивать» наше расширение при изменении, чтобы отображаемый вывод отображал самую последнюю версию данных, передаваемых в расширение. $elementсодержит ссылку элемента dom на объект расширения, который можно использовать для управления тем, что отображается в dom расширения, а layout содержит рассчитанный макет объекта расширения, включая любые выходные данные гиперкуба и настройки свойств.

src/methods/resize.js

export default function($element, layout) {
    // ..resize code here
}

методы изменения размера дают нам более точный контроль над тем, как наше расширение перерисовывается во время различных типов обновлений. в случаях, когда обновления, необходимые для изменения выбора и изменения размера, отличаются, мы можем разделить изменение размера на функцию метода изменения размера. важно отметить, что если возвращается метод изменения размера, в нашем src/index.jsфайле краска не будет запускаться при изменении размера окна.

src/methods/template.html

<div class="chart-container">qExt Template</div>

файл шаблона определяет исходный html, который отображается в нашем расширении. этот html можно увидеть в $elementdom, который передается функциям рисования и изменения размера.

src/methods/controller.js

export default [
    "$scope",
    "$element",
    function($scope, $element) {
        // ..controller code here
    },
]

функция контроллера запускается при инициализации расширения. это может быть полезно для настройки начальной конфигурации и потоков для расширения, когда оно инициализируется на экране.

src/methods/index.js

export { default as initialProperties } from "./initial-properties"
export { default as template } from "./template.html"
export { default as definition } from "./definition"
export { default as controller } from "./controller"
export { default as paint } from "./paint"
export { default as resize } from "./resize"

этот файл экспортирует все модули из methodsкаталога

Configuration

CLI Flags (Флаги командной строки)

qext Config

vanilla

compile

serverDeploy

desktopDeploy

Использованные источники

1. https://opensrc.axisgroup.com/qext/
2. https://medium.com/@jbellizzi/new-qext-277121a59b93
3. https://github.com/axisgroup/qExt

Сообщение qExt v2.0 – Extension Development Environment (Qlik Sense) появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Введение в свойства расширения. Что такое панель свойств?

Перед тем, как перейти к разработке Qlik Sense Visualization Extensions, необходимо понять основные принципы определения и использования свойств в Qlik Sense расширениях.

Основная идея свойств состоит в том, чтобы предложить пользователям способ настройки поведения расширений визуализации таким же образом, как они будут управлять собственными объектами Qlik Sense. Поэтому разработчик расширения может использовать программный интерфейс для определения свойств, которые затем отображаются на правой панели свойств.

Определение панели свойств

Свойства структурированы иерархически (есть еще такой термин, как аккордеон панели свойств):

A – Sections
B – Header
C – Items

Есть еще одна иллюстрация (с сайта http://qliksite.io/tutorials/qliksense-visualization-extensions/part-01/06-Introduction-to-Using-Properties/):

Accordion

• Accordion sections
  • Section headers
    • Property items

Свойства добавляются путем их определения в свойстве definition в файле JavaScript. 

Есть два способа определения свойств:

• Повторное использование существующих встроенных свойств (Reusing existing, built-in, properties)
• Создать настраиваемые свойства (custom properties)

Reusable Properties:

• Dimensions
• Measures
• Sorting
• Appearance
• Add-Ons

Повторное использование существующих свойств

Вот некоторые типичные свойства, используемые для наиболее распространенных встроенных визуализаций Qlik Sense:

• Все собственные визуализации имеют раздел Внешний вид с заголовком раздела Общие .
• Большинство встроенных визуализаций позволяют определять измерения и меры .

Определение свойств

Если вы создаете расширение визуализации без defining a properties panel, Qlik Sense по умолчанию будет включать раздел “Внешний вид“ или “Appearance section”.

Тот же результат будет достигнут при повторном использовании раздела настроек, который является внутренним именем раздела Внешний вид.

define( [
        'jquery'
    ],
    function ( $ ) {
        'use strict';

        return {

            // Define what the properties panel looks like
            definition: {
                type: "items",
                component: "accordion",
                items: {
                    appearance: {
                        uses: "settings",
                    }
                }
            },
            // Paint/Rendering logic
            paint: function ( $element /*, layout*/ ) {

                $element.empty();
                var $msg = $( document.createElement( 'div' ) );
                $msg.html( 'Just demonstrating default behavior of the property panel"' );
                $element.append( $msg );

            }
        };

    } );

На основе приведенного выше кода вы теперь можете расширить definition для повторного использования других встроенных разделов. В этом примере мы также повторно будем использовать разделы измерений, мер и сортировки.

// Define what the properties panel looks like
definition: {
    type: "items",
    component: "accordion",
    items: {
        dimensions: {
            uses: "dimensions"
        },
        measures: {
            uses: "measures"
        },
        sorting: {
            uses: "sorting"
        },
        appearance: {
            uses: "settings",
        }
    }
},

В результате мы получим следующую панель свойств:

Ссылка на свойства

Параметр макета (layout) передается в метод paint, и он включает текущую область расширения визуализации вместе с определенными свойствами.

// Paint/Rendering logic
paint: function ( $element, layout ) {

    console.info('paint >> layout >> ', layout);

}

Если вы посмотрите на вывод консоли, например, в Chrome DevTools, вы найдете то, что ищете.

С этой информацией теперь вы можете начать выводить некоторые значения в метод paint.

// Paint/Rendering logic
paint: function ( $element, layout ) {

    //output values from the property panel
    $element.empty();
    
    //output container
    var $msg = $( document.createElement( 'div' ) );
    
    //variable holding the output
    var html = '<b>Property values:</b><br/>';
    html += 'Title: ' + layout.title + '<br/>';
    html += 'Subtitle: ' + layout.subtitle + '<br/>';
    
    //assign the variable to the output container
    $msg.html( html );
    
    //add the output container to the current element
    $element.append( $msg );

}

Получим следующий результат:

Собственные свойства, которые можно использовать повторно

В этом разделе перечислены собственные свойства Qlik Sense, которые можно повторно использовать в определении панели свойств.

Dimensions

Когда вы повторно используете раздел Dimensions section, он включает в себя следующее:

• Add dimension

После добавления измерения у вас есть следующие свойства по умолчанию:

• Field
• Label
• Show null values
• Limitation
• Show others
• Others label

Пример: Add Dimensions section

В приведенном ниже примере показано, как добавить раздел “Dimensions” на панель свойств вашего расширения визуализации. Обратите внимание, что определено, что расширение визуализации должно иметь ровно одно измерение.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            }
        }
    };
 
});

Measures

Когда вы повторно используете раздел “Меры”, он включает в себя следующее:

• Add measure

Когда вы добавили меру, у вас появятся следующие свойства по умолчанию:

• Label
• Expression
• Number formatting

Пример: Add Measures section

В этом примере показано, как мы теперь добавили определение раздела «Меры» на панель свойств нашего расширения визуализации. Обратите внимание, что здесь мы также определяем, что расширение визуализации должно иметь ровно одну меру.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            }
        }
    };
 
});

Sorting

Когда вы повторно используете раздел сортировки, он включает в себя следующее:

• Labels of the dimension and measure, используемые в расширении визуализации
• Sorting option (Auto or Custom)Опция Custom включает в себя следующее:
  • Sort by expression (only available for dimensions)
  • Sort numerically
  • Sort alphabetically
  • Sort by frequency (only available for filter panes)

Пример: Add Sorting section

В этом примере показано, как мы теперь добавили определение раздела «Сортировка» на панель свойств вашего расширения визуализации. Мы не вносили никаких изменений в раздел «Сортировка», предварительно определенный Qlik Sense.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            },
            sorting: {
                uses: "sorting"
            }
        }
    };
 
});

Add-ons (Надстройки)

Когда вы повторно используете раздел надстроек (Add-ons), он включает в себя следующее:

• Data handling
• Reference lines

Пример: Add Add-ons section

В этом примере показано, как мы добавляем определение раздела «Надстройки» на панель свойств вашего расширения визуализации. Мы не вносили никаких изменений в раздел «Надстройки», предварительно определенный Qlik Sense.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            },
            sorting: {
                uses: "sorting"
            },
            addons: {
                uses: "addons"
            }
        }
    };
 
});

Appearance (settings) – Внешний вид

Appearance section называется settings в коде.

Когда вы повторно используете раздел «Внешний вид», он включает в себя следующее:

• General – ОбщийВключает настройки для заголовка, подзаголовка и сноски
• Presentation – Презентация (доступна только для визуализаций с более чем одним измерением)
• Colors and legend – Цвета и легенда (доступно только в некоторых типах визуализаций)
• X-axis – Ось X (доступна только в некоторых типах визуализаций)
• Y-axis – Ось Y (доступна только в некоторых типах визуализаций)

Пример: Add Appearance section

В этом примере показано, как мы добавляем определение раздела «Внешний вид» на панель свойств вашего расширения визуализации. Мы не вносили никаких изменений в раздел «Надстройки», предварительно определенный Qlik Sense.

define( [], function ( ) {
    
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: {
                uses: "dimensions",
                min: 1,
                max: 1
            },
            measures: {
                uses: "measures",
                min: 1,
                max: 1
            },
            sorting: {
                uses: "sorting"
            },
            addons: {
                uses: "addons"
            },
            settings: {
                uses: "settings"
            }
        }
    };
 
});

Добавление дополнительных свойств (custom properties)

Вы можете задать custom properties для visualization extension. Qlik Sense автоматически добавляет их на панель свойств и заботится о сохранении. Затем вы найдете выбранные значения в параметре layout.

Для каждого свойства вы задаете объект JavaScript с разными полями в зависимости от того, какой тип настраиваемого свойства вы определяете.

Следующие компоненты пользовательского интерфейса могут использоваться для отображения ваших custom properties на панели свойств:

• Button – Кнопка
• Button group – Группа кнопок
• Check box – Флажок
• Color-picker – выбор цвета
• Drop down list – Выпадающий список
• Input box / text box – Поле ввода / текстовое поле
• Link – Ссылка
• Media
• Radio button – Переключатель
• Range slider – Ползунок для выбора диапазона
• Slider
• Switch – Переключатель
• Text – Текст
• Text area – Текстовая область

Их можно сгруппировать в разделы и заголовки на панели свойств. Каждый из них предоставляет различные параметры конфигурации для управления их поведением.

Совет: Как улучшить управляемость скриптом Javascript при разработке Extension?

Если у вас есть много разных свойств, определенных в основном файле JavaScript, вы скоро поймете, что размер файла js может стать довольно большим, и его будет трудно читать и поддерживать. Для облегчения работы с js есть разные подходы:

• Разделите раздел definition на несколько переменных JavaScript.
• Создайте отдельный файл JavaScript для определения ваших свойств и загрузите этот файл в основной файл сценария расширения визуализации.

Определение свойств в отдельном файле JavaScript

В этом разделе показано, как определить ваши свойства в отдельном файле JavaScript. Мы начинаем со следующего кода, определенного в вашем основном файле сценария.

define( [
        'jquery'
    ],
    function ( $ ) {
        'use strict';

        return {

            // Define what the properties panel looks like
            definition: {
                type: "items",
                component: "accordion",
                items: {
                    dimensions: {
                        uses: "dimensions"
                    },
                    measures: {
                        uses: "measures"
                    },
                    appearance: {
                        uses: "settings",
                    }
                }
            },
            // Paint/Rendering logic
            paint: function ( $element, layout ) {
            // Main rendering logic goes here
            }
        };
    } );

Создайте файл и назовите его properties.js. Сохраните его в той же папке, где находятся ваши основные файлы расширения визуализации. Новый файл properties.js должен выглядеть так:

define( [], function () {
    'use strict';
    // *****************************************************************************
    // Dimensions & Measures
    // *****************************************************************************
    var dimensions = {
        uses: "dimensions",
        min: 0,
        max: 1
    };
    var measures = {
        uses: "measures",
        min: 0,
        max: 1
    };
    // *****************************************************************************
    // Appearance section
    // *****************************************************************************
    var appearanceSection = {
        uses: "settings"
    };
    // *****************************************************************************
    // Main properties panel definition
    // Only what is defined here is returned from properties.js
    // *****************************************************************************
    return {
        type: "items",
        component: "accordion",
        items: {
            dimensions: dimensions,
            measures: measures,
            appearance: appearanceSection
        }
    };
});

Затем вам нужно загрузить внешнее определение свойств в ваш основной файл сценария и назначить definition.

define( [
        // Load properties.js using requireJS
        // Note: if you load .js files, omit the file extension
        // otherwise requireJS will not load it correctly
        './properties'
    ],
    function ( props ) {
        'use strict';
        return {
            definition: props,
            // Paint/Rendering logic
            paint: function ( $element, layout ) {
            // Main rendering logic goes here
            }
        };
    } );

Добавление basic custom property

В этом разделе мы определим самый простой, но один из наиболее распространенных компонентов – текстовое поле.

// Text box definition
var myTextBox = {
    ref: "props.myTextBox",
    label: "My text box",
    type: "string"
};

В определении всех компонентов пользовательского интерфейса есть общие свойства, которые можно установить.

type

Используется для всех определений типов настраиваемых свойств. Может быть string, integer, number или boolean.

ref

Имя или идентификатор, используемый для ссылки на свойство.

label

Используется для определения метки, отображаемой на панели свойств.

component

Используется для определения того, как свойство отображается на панели свойств.

В приведенном выше примере component не определен. Qlik Sense автоматически по умолчанию использует текстовое поле, если component не определен для элементов, type которых является string или integer.

Добавление определения компонента на панель свойств

В этом разделе мы добавим вновь созданное текстовое поле на основе строки в раздел Внешний вид.

Перед:

// Appearance section
var appearanceSection = {
    uses: "settings"
};
// Main properties panel definition
// Only what is defined here is returned from properties.js
return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection
    }
};

После:

var myTextBox = {
    ref: "props.myTextBox",
    label: "My text box",
    type: "string"
};

// Appearance section
var appearanceSection = {
    uses: "settings",
    items: {
        myTextBox: myTextBox
    }
};

// Main properties panel definition
// Only what is defined here is returned from properties.js
return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection
    }
};

Результат:

Добавление собственного заголовка раздела

В предыдущем примере вы добавили текстовое поле в новый раздел. В заголовке раздела автоматически повторно использовалась метка компонента. В этом разделе вы добавите собственный заголовок раздела. Для этого вы создаете новый заголовок ( myNewHeader в примере ниже) в существующем разделе «Внешний вид», а затем добавляете туда элементы:

var appearanceSection = {
    uses: "settings",
    items: {
        // Definition of the custom section header
        myNewHeader: {
            type: "items",
            label: "My header, containing text box",
            items: {
                myTextBox: myTextBox
            }
        }
    }
};

// NOTHING CHANGED HERE ...
// Return overall definition of the property accordion
return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection
    }
};

Результат:

Добавление настраиваемого раздела

Вы также можете создавать совершенно новые разделы аккордеона.

// Some components
var header1_item1 = {
    ref: "props.section1.item1",
    label: "Section 1 / Item 1",
    type: "string",
    expression: "optional"
};

...
...

// Define a custom section
myCustomSection = {
    // not necessary to define the type, component "expandable-items" will automatically
    // default to "items"
    // type: "items"
    component: "expandable-items",
    label: "My Accordion Section",
    items: {
        header1: {
            type: "items",
            label: "Header 1",
            items: {
                header1_item1: header1_item1,
                header1_item2: header1_item2
            }
        },
        header2: {
            type: "items",
            label: "Header 2",
            items: {
                header2_item1: header2_item1,
                header2_item2: header2_item2
            }
        }

    }
}

Ключ в приведенном выше коде заключается в том, что вы добавляете expandable-items компонента . Остальной код работает как в предыдущих примерах.

return {
    type: "items",
    component: "accordion",
    items: {
        appearance: appearanceSection,
        customSection: myCustomSection
    	 }
    };
});

Результат:

Отображение и сохранение custom (настраиваемых) свойств

После того как вы определили custom properties, Qlik Sense позаботится обо всем остальном, а именно:

• Отображение custom properties вместе со встроенными свойствами
• Сохранение значений свойств. Если значение свойства изменяется, вам не нужно заботиться о сохранении, то есть о сохранении и загрузке значения свойства.

Ссылка на значения настраиваемых свойств

Ссылка на значения custom properties аналогична ссылке на значения из встроенных свойств, но с одним исключением. Используя ref, вы можете определить, как значения свойств отображаются в дереве объектов. Этот принцип применяется ко всем элементам настраиваемых свойств.

Примеры:

Определяем текстовое поле:

var myTextBox = {
    ref: "myTextBox",
    ...
};

На это значение можно ссылаться в вашем скрипте:

console.log( layout.myTextBox );

В то время как:

var myTextBox = {
    ref: "prop.myTextBox",
    ...
};

Будет вызываться с использованием:

console.log( layout.prop.myTextBox );

Добавление префиксов к вашим свойствам, как показано в последних примерах выше, позволяет легко перебирать все настраиваемые свойства. Это также гарантирует отсутствие конфликтов именования стандартных объектов Qlik Sense.

Определение настраиваемых свойств

Custom string properties

todo

Custom integer properties

todo

Custom number properties

todo

Custom array properties

todo

Custom button properties

todo

Custom button group properties

todo

Custom check box properties

todo

Custom color-picker properties

todo

Custom drop down list properties

todo

Custom link properties

todo

Custom media properties

todo

Custom radio button properties

todo

Custom slider properties

todo

Custom range-slider properties

todo

Custom switch properties

todo

Custom text properties

todo

Custom textarea properties

todo

Сообщение Панель свойств расширения или Properties Panel появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Backend API состоит из ряда методов и используется для взаимодействия с ассоциативным механизмом Qlik. Он предоставляет вспомогательные функции для вызовов ассоциативного механизма Qlik и доступ к данным ассоциативного механизма Qlik.

Backend API – это оболочка для выбранных методов Qlik Engine JSON API, но с той разницей, что Backend API знает контекст, то есть текущее соединение WebSocket и приложение Qlik Sense.

Backend API доступен для разработчиков расширений как this.backendApi:

this.backendApi.eachDataRow(function(rownum, row) {
    .....
});

Примеры использования

Selections

Следующие методы Backend API доступны, когда вы работаете с выборками в универсальном объекте, стоящем за вашим расширением.

• selectValues
• selectRange
• clearSelections
• hasSelections

Используйте метод selectValues для выбора значений в этом объекте. Вызов вызывает перерисовку объекта.

$element.find('li').on('click', function() {
    if(this.hasAttribute("data-value")) {
        var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
        self.backendApi.selectValues(dim, [value], true);
    }
});

Метод selectRange выбирает значения в этом объекте, используя диапазоны.

var range = {
    "qMeasureIx": 1,
    "qRange": {
        "qMin": 10,
        "qMax": 100,
        "qMinInclEq": true,
        "qMaxInclEq": true
    }
};
self.backendApi.selectRange( [range], false);

Метод hasSelections можно использовать, чтобы узнать, есть ли неподтвержденные выборы для этого объекта.

this.backendApi.hasSelections();

Если для этого объекта есть неподтвержденные выборки, вы можете использовать метод clearSelections, чтобы очистить их.

this.backendApi.clearSelections();

Search

При работе с поиском в объектах списка вы можете использовать следующие методы Backend API.

• search
• acceptSearch
• abortSearch

Используйте метод search для поиска термина в list object. Это приводит к обновленному layout, который содержит только совпадающие записи.

this.backendApi.search("A");

Метод acceptSearch принимает результат поиска и делает его выбранным в поле.

this.backendApi.acceptSearch(false);

Используйте метод abortSearch, если поиск должен быть прерван. Это очищает существующий поиск и возвращает объект в состояние, в котором он находился до поиска.

this.backendApi.abortSearch();

Сообщение Qlik Web Developer – Backend API для разработки Extensions появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Исторически сложилось так, что разработчики JavaScript часто использовали alert() для целей отладки, но это может восприниматься как раздражающее, поэтому вместо этого рекомендуется использовать console.log() для отправки данных в консоль браузера.

Инструменты веб-разработчика

Большинство веб-браузеров предлагают какой-то инструмент разработчика, но в этом разделе вы познакомитесь с некоторыми основными концепциями, основанными на Google Chrome.

Инструменты разработчика в вашем браузере

Если вы разрабатываете расширения визуализации с помощью Qlik Sense Desktop, вы можете использовать свой любимый браузер для целей отладки. Просто откройте Qlik Sense Desktop и оставьте его открытым. Затем откройте свой браузер и перейдите по адресу http://localhost:4848. Отобразится Hub, и оттуда вы сможете открыть инструменты разработчика браузера.

Инструменты разработчика из Qlik Sense Desktop

Поскольку Qlik Sense Desktop использует Chromium в качестве встроенного браузера, вы можете получить доступ к Chrome DevTools из Qlik Sense Desktop. Нажмите Ctrl + Shift и одновременно щелкните правой кнопкой мыши по листу, а затем выберите «Показать DevTools» в диалоговом окне.

Откроется окно devtools

Отладка с помощью Chrome DevTools

В этом разделе выделены три области, которые имеют большое значение при разработке расширений визуализации:

• Использование console
• Inspect elements
• Debugging

Использование консоли

Как упоминалось выше, удобнее использовать console в веб DevTools вместо запуска предупреждений. Для этого используйте console.info или console.log, чтобы передать что-нибудь в консоль.

Пример: 

paint: function ( $element, layout ) {

    var err = {
        message: 'Something went wrong',
        errCode: 'bla'
    };

    console.info( 'We are re-painting the extension' );
    console.error( 'Oops, we haven an error', err );
    console.log( 'We are here' );
    console.log( 'layout', layout );

}

Рекомендуется потратить некоторое время на изучение более сложных концепций console, например:

console.assert();
console.group();
console.groupCollapsed();
console.groupEnd();
console.table();

Некоторые соображения

Функции console.xyz() поддерживаются не всеми веб-браузерами, поэтому рекомендуется убедиться, что в коде не осталось console.xyz(), когда он попадет в рабочую среду. Для этого есть несколько стратегий:

• Вручную удалите все console.xyz() из кода перед развертыванием в производственной среде.
• Оберните все ваши вызовы в консоль, чтобы они выполнялись только в том случае, если текущий веб-браузер поддерживает консольные вызовы.
• Используйте инструменты, например Grunt или Gulp, для создания процесса развертывания, в котором все операторы консоли удаляются автоматически.

Inspect elements (Осмотрите элементы)

Манипуляции с объектной моделью документа (DOM) можно просмотреть с помощью инспектора элементов, который встречается в большинстве инструментов веб-разработчика. В Chrome DevTools вы получаете доступ к функции проверки элементов, щелкнув увеличительное стекло на панели инструментов.

Отладка

Вы можете использовать developer tools для отладки в реальном времени, например:

• Chrome DevTools
• Firebug
• Инструменты разработчика F12 для Internet Explorer

Для того, чтобы запустить режим debugging в расширении, необходимо написать команду debugger;.

Пример:

paint: function($element, layout) {
    
    console.log(layout);
    
    var hypercube = layout.qHyperCube;
    
    console.log(hypercube);
    
    debugger;
}

Сообщение Отладка visualization extension с помощью web developer tools появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Extension API состоит из методов и свойств, используемых для создания custom расширений визуализации (или custom visualization extensions).

Обзор Visualization extension templates

Для начала рассмотрим шаблоны Visualization extension templates. В dev-hub при создании Extension вам предлагают выбрать шаблон.

Basic Visualization template

Назовем наш Extension “1_BVT”. При инициализации создадутся два файла:

1_BVT.qext

{
    "name": "1_BVT",
    "description": "Basic empty visualization template",
    "type": "visualization",
    "version": "1.0.0",
    "icon": "extension",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

1_BVT.js

define( [ "qlik"
],
function ( qlik) {

    return {
        support : {
            snapshot: true,
            export: true,
            exportData : false
        },
        paint: function ($element) {
            //add your rendering code here
            $element.html( "1_BVT" );
            //needed for export
            return qlik.Promise.resolve();
        }
    };

} );

Chart Template

Назовем наш Extension “2_CT”. При инициализации создадутся 4 файла:

2_CT.qext

{
    "name": "2_CT",
    "description": "Chart visualization template",
    "icon": "bar-chart-horizontal",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

2_CT.js

define( ["qlik", "text!./2_CT.ng.html", "css!./2_CT.css"],
    function ( qlik, template ) {
        "use strict";
        return {
            template: template,
            initialProperties: {
                qHyperCubeDef: {
                    qDimensions: [],
                    qMeasures: [],
                    qInitialDataFetch: [{
                        qWidth: 2,
                        qHeight: 50
                    }]
                }
            },
            definition: {
                type: "items",
                component: "accordion",
                items: {
                    dimensions: {
                        uses: "dimensions",
                        min: 1,
                        max: 1
                    },
                    measures: {
                        uses: "measures",
                        min: 1,
                        max: 1
                    },
                    sorting: {
                        uses: "sorting"
                    }
                }
            },
            support: {
                snapshot: true,
                export: true,
                exportData: true
            },
            paint: function () {
                //needed for export
                this.$scope.selections = [];
                return qlik.Promise.resolve();
            },
            controller: ["$scope", "$element", function ( $scope ) {
                $scope.getPercent = function ( val ) {
                    return Math.round( (val * 100 / $scope.layout.qHyperCube.qMeasureInfo[0].qMax) * 100 ) / 100;
                };

                $scope.selections = [];

                $scope.sel = function ( $event ) {
                    if ( $event.currentTarget.hasAttribute( "data-row" ) ) {
                        var row = parseInt( $event.currentTarget.getAttribute( "data-row" ), 10 ), dim = 0,
                            cell = $scope.$parent.layout.qHyperCube.qDataPages[0].qMatrix[row][0];
                        if ( cell.qIsNull !== true ) {
                            cell.qState = (cell.qState === "S" ? "O" : "S");
                            if ( $scope.selections.indexOf( cell.qElemNumber ) === -1 ) {
                                $scope.selections.push( cell.qElemNumber );
                            } else {
                                $scope.selections.splice( $scope.selections.indexOf( cell.qElemNumber ), 1 );
                            }
                            $scope.selectValues( dim, [cell.qElemNumber], true );
                        }
                    }
                };
            }]
        };

    } );

2_CT.css

.qv-object-2_CT .css_bars_row {
    transition: all 0.3s ease;
    float: left;
    width: 98%;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    margin-bottom: 2px;
    border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.qv-object-2_CT .css_bars_bar {
    float: left;
    clear: left;
    height: 30px;
    background-color: #5f5f5f;
}

.qv-object-2_CT .css_bars_bar span {
    font-weight: bold;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 7px;
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    white-space: nowrap;
}

.qv-object-2_CT .css_bars_per {
    position: relative;
}

.qv-object-2_CT .css_bars_per span {
    font-weight: bold;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 5px;
}

.qv-object-2_CT .css_bars_per span.over {
    position: absolute;
    right: 15px;
    color: #f0f0f0;
}

.qv-object-2_CT .css_bars_row:hover, .qv-object-2_CT .css_bars_row.selected {
    border: 1px solid #000;
}

2_CT.ng.html

<div qv-extension style="height: 100%; position: relative; overflow: auto;">
    <div class="css_bars_row" ng-repeat="item in layout.qHyperCube.qDataPages[0].qMatrix" title="{{item[0].qText}}" data-row="{{ $index }}"
         ng-click="sel($event)" data-value="{{ item[0].qElemNumber }}" ng-class="{selected: (item[0].qState) === 'S' || selections.indexOf(item[0].qElemNumber) !== -1 }">
        <div class="css_bars_bar" ng-style="{'width':getPercent(item[1].qNum)+'%'}"><span>{{item[0].qText}}</span></div>
        <div class="css_bars_per">
            <span ng-class="{over: (getPercent(item[1].qNum)>95)}">{{getPercent(item[1].qNum)}} %</span></div>
    </div>
</div>

Listbox template

Назовем наш Extension “3_LBT”. При инициализации создадутся 3 файла:

3_LBT.js

define( ["qlik", "jquery", "text!./style.css"], function ( qlik, $, cssContent ) {
    'use strict';
    $( "<style>" ).html( cssContent ).appendTo( "head" );
    return {
        initialProperties: {
            qListObjectDef: {
                qShowAlternatives: true,
                qFrequencyMode: "V",
                qInitialDataFetch: [{
                    qWidth: 2,
                    qHeight: 50
                }]
            }
        },
        definition: {
            type: "items",
            component: "accordion",
            items: {
                dimension: {
                    type: "items",
                    label: "Dimensions",
                    ref: "qListObjectDef",
                    min: 1,
                    max: 1,
                    items: {
                        label: {
                            type: "string",
                            ref: "qListObjectDef.qDef.qFieldLabels.0",
                            label: "Label",
                            show: true
                        },
                        libraryId: {
                            type: "string",
                            component: "library-item",
                            libraryItemType: "dimension",
                            ref: "qListObjectDef.qLibraryId",
                            label: "Dimension",
                            show: function ( data ) {
                                return data.qListObjectDef && data.qListObjectDef.qLibraryId;
                            }
                        },
                        field: {
                            type: "string",
                            expression: "always",
                            expressionType: "dimension",
                            ref: "qListObjectDef.qDef.qFieldDefs.0",
                            label: "Field",
                            defaultValue: "=ValueList('A','B','C')",
                            show: function ( data ) {
                                return data.qListObjectDef && !data.qListObjectDef.qLibraryId;
                            }
                        },
                        frequency: {
                            type: "string",
                            component: "dropdown",
                            label: "Frequency mode",
                            ref: "qListObjectDef.qFrequencyMode",
                            options: [{
                                value: "N",
                                label: "No frequency"
                            }, {
                                value: "V",
                                label: "Absolute value"
                            }, {
                                value: "P",
                                label: "Percent"
                            }, {
                                value: "R",
                                label: "Relative"
                            }],
                            defaultValue: "V"
                        }
                    }
                },
                settings: {
                    uses: "settings"
                }
            }
        },
        support : {
            snapshot: true,
            export: true,
            exportData : false
        },
        paint: function ( $element,layout ) {
            var self = this, html = "<ul>";
            layout.qListObject.qDataPages[0].qMatrix.forEach( function ( row ) {
                html += '<li class="data state' + row[0].qState + '" data-value="' + row[0].qElemNumber + '">' + row[0].qText;
                if ( row[0].qFrequency ) {
                    html += '<span>' + row[0].qFrequency + '</span>';
                }
                html += '</li>';
            } );
            html += "</ul>";
            $element.html( html );
            if ( this.selectionsEnabled ) {
                $element.find( 'li' ).on( 'click', function () {
                    if ( this.hasAttribute( "data-value" ) ) {
                        var value = parseInt( this.getAttribute( "data-value" ), 10 ), dim = 0;
                        self.selectValues( dim, [value], true );
                        this.classList.toggle("selected");
                    }
                } );
            }
            return qlik.Promise.resolve();
        }
    };
} );

3_LBT.qext

{
    "name": "3_LBT",
    "description": "Listbox visualization template",
    "icon": "list",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

style.css

.qv-object-3_LBT div.qv-object-content-container {
    overflow: auto;
}
.qv-object-3_LBT ul {
    list-style: none;
}
.qv-object-3_LBT li.data {
    padding: 4px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* frequency */
.qv-object-3_LBT li.data span
{
    padding-left: 10px;
    font-style: italic;
    float:right;
}
/* colors when NOT in selection mode */

.qv-object-3_LBT li.stateS, .qv-object-3_LBT li.stateL {
    background-image: linear-gradient(top, #52cc52, #4dc04d);
    background-image: -o-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -moz-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -webkit-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -ms-linear-gradient(top, #52cc52, #4dc04d);
    color: #fff;
}

.qv-object-3_LBT li.stateX, .qv-object-3_LBT li.stateXL, .qv-object-3_LBT li.stateXS {
    background-color: #A9A9A9;
    color: #fff;
}

.qv-object-3_LBT li.stateA {
    background-image: none;
    background-color: #ddd;
    color: #000;
}
/* colors when in selection mode */
.qv-object-3_LBT.qv-selections-active li {
    background-image: none;
    background-color: #ddd;
    color: #000;
}

.qv-object-3_LBT.qv-selections-active li.selected {
    background-image: linear-gradient(top, #52cc52, #4dc04d);
    background-image: -o-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -moz-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -webkit-linear-gradient(top, #52cc52, #4dc04d);
    background-image: -ms-linear-gradient(top, #52cc52, #4dc04d);
    color: #fff;
}

Angular Basic Visualization template

Назовем наш Extension “4_ABVT”. При инициализации создадутся 3 файла:

4_ABVT.qext

{
    "name": "4_ABVT",
    "description": "Basic empty visualization template based on angular.js",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

4_ABVT.js

define( ["qlik", "text!./template.html"],
    function ( qlik, template ) {

        return {
            template: template,
            support: {
                snapshot: true,
                export: true,
                exportData: false
            },
            paint: function () {
                return qlik.Promise.resolve();
            },
            controller: ['$scope', function ( $scope ) {
                //add your rendering code here
                $scope.html = "Hello World";
            }]
        };

    } );

template.html

<div qv-extension style="height: 100%; position: relative; overflow: auto;" class="ng-scope">
    {{ html }} 
</div>

Angular Table template

Назовем наш Extension “5_ATT”. При инициализации создадутся 4 файла:

5_ATT.js

define( ["qlik","jquery", "text!./style.css", "text!./template.html"], function (qlik, $, cssContent, template ) {'use strict';
    $("<style>").html(cssContent).appendTo("head");
    return {
       template: template,
       initialProperties : {
            qHyperCubeDef : {
                qDimensions : [],
                qMeasures : [],
                qInitialDataFetch : [{
                    qWidth : 10,
                    qHeight : 50
                }]
            }
        },
        definition : {
            type : "items",
            component : "accordion",
            items : {
                dimensions : {
                    uses : "dimensions",
                    min : 1
                },
                measures : {
                    uses : "measures",
                    min : 0
                },
                sorting : {
                    uses : "sorting"
                },
                settings : {
                    uses : "settings",
                    items : {
                        initFetchRows : {
                            ref : "qHyperCubeDef.qInitialDataFetch.0.qHeight",
                            label : "Initial fetch rows",
                            type : "number",
                            defaultValue : 50
                        }
                    }
                }
            }
        },
        support : {
            snapshot: true,
            export: true,
            exportData : true
        },
        paint: function ( ) {
            //setup scope.table
            if ( !this.$scope.table ) {
                this.$scope.table = qlik.table( this );
            }
            return qlik.Promise.resolve();
        },
        controller: ['$scope', function (/*$scope*/) {
        }]
    };

} );

5_ATT.qext

{
    "name": "5_ATT",
    "description": "Table visualization template based on angular.js",
    "icon": "table",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

style.css

.qv-object-5_ATT div.qv-object-content-container {
    overflow: auto;
}
.qv-object-5_ATT td,
.qv-object-5_ATT th {
    border-top: 0px solid #fff;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: default;
    font-size: 12px;
}
.qv-object-5_ATT td.numeric {
    text-align: right;
}
.qv-object-5_ATT button {
    width: 100%;
}

template.html

<div qv-extension style="height: 100%; position: relative; overflow: auto;">
    <table>
        <thead>
        <tr>
            <th ng-repeat="head in table.headers track by $index" ng-click="head.orderBy()">{{head.qFallbackTitle}}</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in table.rows track by $index">
            <td ng-repeat="cell in row.cells track by $index" class="selectable" ng-class="{'selected':cell.selected,'numeric':cell.qNum}" ng-click="cell.select($event)">{{cell.qText}}</td>
        </tr>
        </tbody>
    </table>
    <button ng-if="table.rowCount>table.rows.length" ng-click="table.getMoreData()" class="lui-button more">More...</button>
</div>

Table template

Назовем наш Extension “6_TT”. При инициализации создадутся 3 файла:

6_TT.js

/*globals define*/
define( ["qlik", "jquery", "text!./style.css"], function ( qlik, $, cssContent ) {
    'use strict';
    $( "<style>" ).html( cssContent ).appendTo( "head" );
    function createRows ( rows, dimensionInfo ) {
        var html = "";
        rows.forEach( function ( row ) {
            html += '<tr>';
            row.forEach( function ( cell, key ) {
                if ( cell.qIsOtherCell ) {
                    cell.qText = dimensionInfo[key].othersLabel;
                }
                html += "<td ";
                if ( !isNaN( cell.qNum ) ) {
                    html += "class='numeric'";
                }
                html += '>' + cell.qText + '</td>';
            } );
            html += '</tr>';
        } );
        return html;
    }

    return {
        initialProperties: {
            qHyperCubeDef: {
                qDimensions: [],
                qMeasures: [],
                qInitialDataFetch: [{
                    qWidth: 10,
                    qHeight: 50
                }]
            }
        },
        definition: {
            type: "items",
            component: "accordion",
            items: {
                dimensions: {
                    uses: "dimensions",
                    min: 1
                },
                measures: {
                    uses: "measures",
                    min: 0
                },
                sorting: {
                    uses: "sorting"
                },
                settings: {
                    uses: "settings"
                }
            }
        },
        snapshot: {
            canTakeSnapshot: true
        },
        paint: function ( $element, layout ) {
            var html = "<table><thead><tr>", self = this,
                morebutton = false,
                hypercube = layout.qHyperCube,
                rowcount = hypercube.qDataPages[0].qMatrix.length,
                colcount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length;
            //render titles
            hypercube.qDimensionInfo.forEach( function ( cell ) {
                html += '<th>' + cell.qFallbackTitle + '</th>';
            } );
            hypercube.qMeasureInfo.forEach( function ( cell ) {
                html += '<th>' + cell.qFallbackTitle + '</th>';
            } );
            html += "</tr></thead><tbody>";
            //render data
            html += createRows( hypercube.qDataPages[0].qMatrix, hypercube.qDimensionInfo );
            html += "</tbody></table>";
            //add 'more...' button
            if ( hypercube.qSize.qcy > rowcount ) {
                html += "<button class='more'>More...</button>";
                morebutton = true;
            }
            $element.html( html );
            if ( morebutton ) {
                $element.find( ".more" ).on( "click", function () {
                    var requestPage = [{
                        qTop: rowcount,
                        qLeft: 0,
                        qWidth: colcount,
                        qHeight: Math.min( 50, hypercube.qSize.qcy - rowcount )
                    }];
                    self.backendApi.getData( requestPage ).then( function ( dataPages ) {
                        rowcount += dataPages[0].qMatrix.length;
                        if ( rowcount >= hypercube.qSize.qcy ) {
                            $element.find( ".more" ).hide();
                        }
                        var html = createRows( dataPages[0].qMatrix, hypercube.qDimensionInfo );
                        $element.find( "tbody" ).append( html );
                    } );
                } );
            }
            return qlik.Promise.resolve();
        }
    };
} );

6_TT.qext

{
    "name": "6_TT",
    "description": "Table visualization template",
    "icon": "table",
    "type": "visualization",
    "version": "1.0.0",
    "author": "",
    "homepage": "",
    "keywords": "qlik-sense, visualization",
    "license": "",
    "repository": "",
    "dependencies": {
        "qlik-sense": ">=3.0.x"
    }
}

style.css

.qv-object-6_TT div.qv-object-content-container {
    overflow: auto;
}
.qv-object-6_TT td,
.qv-object-6_TT th {
    border-top: 0px solid #fff;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: default;
    font-size: 12px;
}
.qv-object-6_TT td.numeric {
    text-align: right;
}
.qv-object-6_TT button {
    width: 100%;
}

Структура расширения

Как мы видим из примеров стандартных шаблонов экстеншенов для создания расширения необходимо минимум 2 файла – js и qext. Для более богатой функциональности добавляются css и html.

Опишем зачем нужны файлы:

• <name_extension>.js – это код Javascript – фактически это ядро вашего Extension. Здесь происходит отрисовка визуализации (например, в цикле заполняется html код с тегами при обходе гиперкуба qlik sense), настраивается логика работы с выборкой и другие действия.
• <name_extension>.qext – extension metadata file (QEXT) – файл JSON, который используется Qlik Sense для идентификации расширения визуализации. В этом файле указывается название расширения, тип расширения, версия, автор, ключевые слова. И другие атрибуты, которые будут расмотрены в дальнейших разделах.
• <name_extension>.css – в этом файле прописываются стили для кастомной визуализации (т.е. вашего экстеншена).
• <name_extension>.html – шаблон html кода, который будет использоваться в js коде и заполняться внутри js кода (например в цикле). Этот прием используется, например, в Angular Framework.
• wbfolder.wbl^* (не является обязательным) – Файл загрузки Workbench – используется редактором Extension & Mashup и содержит список файлов, которые должны быть загружены в редактор dev-hub (без него вы не сможете открыть или продублировать расширение в dev-hub).
  Когда вы сохраняете проект расширения или Mashup из редактора, WBL-файл автоматически создается и включается в проект. Если вы сделаете копию расширения или мэшапа, то будут скопированы только файлы, перечисленные в wbfolder.wbl.
  Добавляя дополнительные имена файлов – разделенные точкой с запятой и переносом строки – в wbfolder.wbl, вы также можете разрешить загрузку этих дополнительных файлов. При отсутствии файла может возникнуть ошибка Incomplete visualization. The visualization is incomplete and cannot be opened or duplicated (wbfolder.wbl file missing).

Рассмотрим процесс отрисовки экстеншена:

Когда пользователь открывает лист, Qlik Sense извлекает визуализации на этом листе, а затем выполняет стандартный рабочий процесс для каждой визуализации.

Пример Hello World можно посмотреть на сайте http://qliksite.io/tutorials/qliksense-visualization-extensions/part-01/03-Lets-Get-Started–Hello-World-Example/

Схема работы JS кода в QS Extension

define – это концепция, введенная RequireJS для определения зависимостей в ваших файлах JavaScript. Идея состоит в том, чтобы загрузить внешние зависимости до того, как будет выполнен ваш основной скрипт.

Зависимости – внешние модули (скрипты/библиотеки), которые необходимы для работы нашего расширения.

paint – основной метод визуализации визуализации, который будет вызываться каждый раз, когда визуализация должна быть отрисована, либо из-за новых данных с сервера, либо из-за изменения размера.

Метод paint получает два параметра $elementи layout.

todo

Видео “How to build Qlik Sense Visualization Extensions – Introduction”

Методы Qlik Sense Extension API

beforeDestroy

Выполняется до того, как объект будет уничтожен путем его удаления, переключения листа, открытия инструмента выделения или любых других средств удаления расширения. Используйте этот метод для того, чтобы удалить привязки и предотвратить утечку памяти.

Утечка памяти — это, в широком смысле, фрагмент памяти, выделенной приложению, который больше не нужен этому приложению, но не может быть возвращён операционной системе для дальнейшего использования. Другими словами это — блок памяти, который захвачен приложением без намерения пользоваться этой памятью в будущем.

Источник: Практическое руководство по борьбе с утечками памяти в Node.js

mounted

Выполняется один раз при инициализации объекта.

mounted($element)

paint

Отрисовывает (или render) визуализацию расширения. Вызовите этот метод, когда необходимо отрисовать visualization extension либо из-за новых данных с сервера, либо из-за изменения размера расширения визуализации.

Параметры метода paint

$element

Оболочка jQuery, содержащая HTML-элемент, в котором должна отображаться визуализация.

layout

Данные и свойства для визуализации.

layout.qHyperCube.qDimensionInfo

Массив с данными об используемых dimensions. Включает qFallbackTitle, заголовок и qCardinal , количество различных значений.

layout.qHyperCube.qMeasureInfo

Массив с данными об используемых мерах. Включает qFallbackTitle, заголовок (title), qCardinal, количество различных значений, qMin и qMax для минимального и максимального значений.

layout.qHyperCube.qDataPages[0].qMatrix

Массив с данными из Qlik Sense . Каждому объекту соответствует строка в результате. Значения измерения (dimension) и меры (measure) являются объектами JavaScript в этом массиве.

layout.qHyperCube.qDataPages[0].qMatrix[0..#dimensions – 1]

Значения Dimension для строки результата. Каждый объект содержит текст ( qText), используемый для рендеринга, и значение ( qElemNumber ), используемое для selections, и состояние значения ( qState ).

layout.qHyperCube.qDataPages[0].qMatrix[#dimensions..]

Массив со значениями measure для строки результата. Каждый объект содержит данные, фактическое значение ( qNum ) и текст ( qText ), форматированное значение.

layout.qHyperCube.qSize

Общее количество строк (qcy) и столбцов (qcx) в результирующем наборе.

layout.qInfo.qId

qId – Уникальный идентификатор объекта. При необходимости полезно для создания уникального HTML-идентификатора.

layout.qSelectionInfo

Если пользователь находится в режиме выбора, это будет объект с двумя флагами: qInSelections и qMadeSelections.

updateData

Выполняется каждый раз при изменении layout или данных, например при осуществлении выборок или изменении свойств. Получает новый layout и возвращает promise.

updateData(layout)

Properties Qlik Sense Extension API

initialProperties

initialProperties()

Задает свойства, которые объект должен иметь при создании. Определите либо как гиперкуб ( qHyperCubeDef ), либо как объект списка ( qListObjectDef ).

Настройте все свойства и назначьте значения по умолчанию для custom properties.

Максимальное количество ячеек ( qWidth * qHeight ), разрешенное при исходной выборке данных, составляет 10 000. Получите дополнительные данные по частям с помощью метода getData в Backend API.

Пример: использование гиперкуба

initialProperties : {
    qHyperCubeDef : {
        qDimensions : [],
        qMeasures : [],
        qInitialDataFetch : [{
            qWidth : 2,
            qHeight : 50
        }]
    }
}

Пример, в котором используется объект списка, а также определяются некоторые custom properties

initialProperties : {
    qListObjectDef : {
        qShowAlternatives : true,
        qFrequencyMode : "V",
        qInitialDataFetch : [{
            qWidth : 2,
            qHeight : 50
        }]
    },
    fixed : true,
    width : 25,
    percent : true,
    selectionMode : "CONFIRM"
}

Ограничение 10000 ячеек

Ходят упорные слухи, что при работе с HyperCube с использованием клиентских API (в расширениях визуализации или мэшапах) можно загрузить только 10 000 ячеек данных.

Этот слух не соответствует действительности !!!

Вместо этого верно, что вы можете получить только 10 000 записей на страницу данных из Engine, но вы, безусловно, можете запросить получение дополнительных страниц данных.
Таким образом, разработчик полностью решает, сколько точек данных из источника данных используется в пользовательском интерфейсе.

snapshot

Включает или отключает возможность делать снимки расширения визуализации для использования в Data Storytelling.

snapshot(enable)

export

Включает или отключает возможность экспорта расширения визуализации как изображения или как PDF-файл. Это также позволяет включить расширение визуализации в экспорт из Storytelling (PowerPoint или PDF).

Если задано значение true , включены параметры контекстного меню «Экспорт как изображение» и «Экспорт в PDF» для расширения визуализации. Это также позволяет расширениям визуализации быть частью историй, экспортируемых в PowerPoint или PDF, в параметрах контекстного меню «Экспорт истории в PowerPoint» и «Экспорт истории в PDF».

exportData

Включает или отключает возможность экспорта данных из расширения визуализации и сохранения их в файле XLSX. Если задано значение true, параметр контекстного меню «Экспорт данных» включен для расширения визуализации.

Пример

var ext = {
    support: {
        snapshot: true,
        export: true,
        exportData: true
    }
};

Property definitions

Array

todo

Integer

todo

Number

todo

String

todo

Text

todo

Button

todo

Button group

todo

Check box

todo

Color-picker

todo

Drop down list

todo

Link

todo

Media

todo

Radio button

todo

Slider

todo

Range-slider

todo

Switch

todo

Textarea

todo

Сообщение Обзор Extension API и описание методов расширений появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

• arguments –
• alert – показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК»
• atob – Функция декодирует строку данных , которые были закодированы с помощью Base64 кодирования.

  • var decodedData = scope.atob(encodedData);

• angular –
• addEventListener – способ назначения обработчиков на события с привязкой к элементу. Синтаксис:
  • element.addEventListener(event, handler[, options]);
    • event – Имя события, например "click"
    • handler – Ссылка на функцию-обработчик
    • options – Дополнительный объект со свойствами: once, capture, passive.
  • Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента

    • function handler1() {
        alert('Спасибо!');
      };
      
      function handler2() {
        alert('Спасибо ещё раз!');
      }
      
      elem.onclick = () => alert("Привет");
      elem.addEventListener("click", handler1); // Спасибо!
      elem.addEventListener("click", handler2); // Спасибо ещё раз!

• app –

== B ==

• blur –
• btoa – Метод создает Base64 закодированную ASCII строку из двоичной строки / Binary (то есть String объект , в котором каждый символ в строке рассматриваются как байты двоичных данных). Вы можете использовать этот метод для кодирования данных, которые в противном случае могут вызвать проблемы со связью, передать их, а затем использовать метод atob() для повторного декодирования данных.

  • var encodedData = scope.btoa(stringToEncode);

• break –
• backendApi –

== C ==

• customElements –
• closed –
• clientInformation –
• crypto –
• cancelAnimationFrame –
• cancelIdleCallback –
• captureEvents –
• clearInterval – отменяет синхронизированное, повторяющееся действие, которое было ранее установлено вызовом setInterval().
• clearTimeout – отменяет тайм – аут ранее установленного вызовом метода setTimeout().
• close –
• confirm – отображает диалоговое окно, которое содержит две кнопки (OK и Cancel), а так же опциональное (необязательное) текстовое сообщение.
  • result = confirm(message);
    • message опциональная (необязательная) строка, которая будет отображена в диалоговом окне.
    • result булево значение, указывающее на нажатую кнопку OK или Cancel (true означает OK).
• createImageBitmap – Метод создает bitmap из источника, при необходимости можно использовать только часть источника. Метод существует в глобальной области как в окнах, так и в рабочих процессах. Он принимает множество различных источников изображений и возвращает Promise, которое resolve в ImageBitmap.
• chrome –
• caches –
• case –
• catch –
• continue –

== D ==

• dimensionInfo –
• document –
• devicePixelRatio –
• defaultStatus –
• dragomanClosure –
• define –
• debounceTimer –
• dispatchEvent –
• debugger –
• default –
• delete –
• do –

== E ==

• external –
• engineModuleGlobal –
• else –

== F ==

• frames –
• frameElement –
• fetch – Метод WindowOrWorkerGlobalScope Mixin начинается процесс извлечения ресурса из сети, возвращая обещание , которое выполняется , как только отклик доступен. Обещание преобразуется в Response объект, представляющий ответ на ваш запрос. Обещание не отклоняется при ошибках HTTP – оно отклоняется только при ошибках сети. Вы должны использовать then обработчики для проверки ошибок HTTP.
• find –
• focus –
• false –
• finally –
• for –
• function –

== G ==

• getComputedStyle –
• getSelection –

== H ==

• html –
• history –

== I ==

• innerWidth –
• innerHeight –
• isSecureContext –
• indexedDB –
• if –
• in –
• instanceof –

== L ==

• location –
• locationbar –
• length –
• localStorage –
• layout –

== M ==

• menubar –
• matchMedia –
• moveBy –
• moveTo –

== O ==

• opener – Свойство opener возвращает ссылку на окно, которое открыло текущее. Когда Вы открываете новое окно с помощью open() Вы можете воспользоваться этим свойством, чтобы взаимодействовать с родительским окном из нового окна.

  • //Создадим новое окно win 
    win = window.open();
    //Выведем в новое окно текст
    win.document.write("Текст нового окна");
    //Теперь выведем текст в родительское окно с помощью свойства opener
    win.opener.document.write("Текст родительского окна");

     

• origin –
• outerWidth –
• outerHeight –
• onsearch –
• onappinstalled –
• onbeforeinstallprompt –
• onabort –
• onblur –
• oncancel –
• oncanplay –
• oncanplaythrough –
• onchange –
• onclick –
• onclose –
• oncontextmenu –
• oncuechange –
• ondblclick –
• ondrag –
• ondragend –
• ondragenter –
• ondragleave –
• ondragover –
• ondragstart –
• ondrop –
• ondurationchange –
• onemptied –
• onended –
• onerror –
• onfocus –
• onformdata –
• oninput –
• oninvalid –
• onkeydown –
• onkeypress –
• onkeyup –
• onload –
• onloadeddata –
• onloadedmetadata –
• onloadstart –
• onmousedown –
• onmouseenter –
• onmouseleave –
• onmousemove –
• onmouseout –
• onmouseover –
• onmouseup –
• onmousewheel –
• onpause –
• onplay –
• onplaying –
• onprogress –
• onratechange –
• onreset –
• onresize –
• onscroll –
• onseeked –
• onseeking –
• onselect –
• onstalled –
• onsubmit –
• onsuspend –
• ontimeupdate –
• ontoggle –
• onvolumechange –
• onwaiting –
• onwebkitanimationend –
• onwebkitanimationiteration –
• onwebkitanimationstart –
• onwebkitanimationend –
• onwheel –
• onauxclick –
• ongotpointercapture –
• onlostpointercapture –
• onpointerdown –
• onpointermove –
• onpointerup –
• onpointercancel –
• onpointerover –
• onpointerout –
• onpointerenter –
• onpointerleave –
• onselectstart –
• onselectionchange –
• onanimationend –
• onanimationiteration –
• onanimationstart –
• ontransitionend –
• onafterprint –
• onbeforeprint –
• onbeforeunload –
• onhashchange –
• onlanguagechange –
• onmessage –
• onmessageerror –
• onoffline –
• ononline –
• onpagehide –
• onpageshow –
• onpopstate –
• onrejectionhandled –
• onstorage –
• onunhandledrejection –
• onunload –
• open –
• ondevicemotion –
• ondeviceorientation –
• ondeviceorientationabsolute –
• onpointerrawupdate –
• openDatabase –

== P ==

• personalbar –
• parent –
• pageXOffset –
• pageYOffset –
• performance –
• postMessage –
• print –
• prompt – отображает диалоговое окно с необязательным запросом на ввод текста: result = prompt(title, [default]);
  • Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
    • result — это строка, содержащая текст, поступивший от пользователя или null.
    • title – Текст для отображения в окне.
    • default – Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

== Q ==

• queueMicrotask – Метод, который подвергается воздействие на Window или Worker интерфейсе, в очередь microtask , которая будет выполнено в безопасное время до контроля возвращения в цикл обработки событий браузера. Микрозадача – это короткая функция, которая будет выполняться после того, как текущая задача завершит свою работу, и когда нет другого кода, ожидающего запуска, до того, как управление контекстом выполнения будет возвращено в цикл событий браузера. Это позволяет вашему коду выполняться без вмешательства в любой другой ожидающий выполнения код с потенциально более высоким приоритетом, но до того, как браузер восстановит контроль над контекстом выполнения, что может зависеть от работы, которую вам нужно выполнить.

  • scope.queueMicrotask(function);

• qJsonp –
• qvangularGlobal –
• qListObject – является базовым списком и подходит, если вы хотите создать список всех значений из поля. Объект списка – это визуализация, содержащая одно измерение. При получении макета объекта списка ( qListObjectDef ) отображаются все значения. Если выбор применяется к объекту списка, выбранные значения отображаются вместе с исключенными и дополнительными значениями.
  • Пример: горизонтальный список initialProperties

  • initialProperties : {  
                version : 1.0,  
                qListObjectDef : {  
                    qShowAlternatives : true,  
                    qFrequencyMode : "V",  
                    qSortCriterias : {  
                        qSortByState : 1  
                    },  
                    qInitialDataFetch : [{  
                        qWidth : 2,  
                        qHeight : 50  
                    }]  
                },  
                fixed: true,  
                width: 25,  
                percent: true,  
                selectionMode: "CONFIRM"  
    }

     

• qHyperCube –
• qlik –

== R ==

• rows –
• releaseEvents –
• requestAnimationFrame –
• requestIdleCallback –
• resizeBy –
• resizeTo –
• regeneratorRuntime –
• require –
• requirejs –
• removeEventListener –
• return –
• reply –

== S ==

• self –
• scrollbars –
• statusbar –
• status –
• screen –
• scrollX –
• scrollY –
• screenX –
• screenY –
• screenLeft –
• screenTop –
• styleMedia –
• sessionStorage –
• scroll –
• scrollBy –
• scrollTo –
• setInterval – Метод, предложенный на Window и Worker интерфейсах, неоднократно вызывает функцию или выполняет фрагмент кода, с фиксированной задержкой по времени между каждым вызовом. Он возвращает идентификатор интервала, который однозначно определяет интервал, поэтому вы можете удалить его позже, позвонив clearInterval(). Этот метод определяется WindowOrWorkerGlobalScope миксином.

  • var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);

• setTimeout – Метод WindowOrWorkerGlobalScope Mixin (и преемника Window.setTimeout()) устанавливает таймер , который выполняет функцию или указанный фрагмент кода один раз, когда таймер истекает.

  • var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);

• stop –
• showDirectory –
• showOpenFilePicker –
• showSaveFilePicker –
• speechSynthesis –
• switch –

== T ==

• this –
• toolbar –
• top –
• trustedTypes –
• throw –
• true –
• try –
• typeof –

== V ==

• visualViewport –
• var –
• void –

== W ==

• window –
• webkitStorageInfo –
• webkitCancelAnimationFrame –
• webkitRequestAnimationFrame –
• webkitRequestFileSystem –
• webkitResolveLocalFileSystemURL –
• webpackJsonpsensei_codearea –
• while –
• with –

Сообщение Обзор функций Javascript в редакторе Qlik Sense Extensions появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Майк Таралло из Qlik рассказывает, что нового в последней версии Qlik Sense – ноябрь 2018 года.

• Precedent Machine Learning (Insight Advisor – Enterprise only)
• Dashboard Extension Bundle
• New Chart Map Layer
• Enhanced Pie Chart (2 measures – Rose, Polar)
• Alternate States
• Single Selections
• Set Analysis Expression Editor improvements

Обязательно ознакомьтесь с нашими примечаниями к выпуску на сайте загрузки клиента Qlik.
Demonstration Qlik Sense Apps November 2018

Dashboard extension bundle – Qlik Sense

Официальный набор Extensions от Qlik, которые они будут поддерживать при переходе к новой версии.

Ссылки на описание расширений. НЕ УСТАНАВЛИВАЙТЕ РАСШИРЕНИЯ С GITHUB. Только через официальный инсталлятор Qlik Sense Desktop.

• https://github.com/NOD507/SenseDateRangePicker
• https://github.com/stefanwalther/sense-navigation
• https://github.com/bohua/nprinting-sense-on-demand
• https://github.com/fadyheiba/ShowHide
• https://github.com/mhamano/Qlik-Sense-Tabs
• https://github.com/erikwett/qsVariable

Сообщение Qlik Sense November 2018 – What’s New появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Cookbook for PicassoJS Qlik Sense Extensions – School of Picasso JS

Picasso JS

https://picassojs.com/ – официальный сайт Picasso JS

School of Picasso JS Part 1: Get started

School of Picasso JS Part 2: Create Qlik Sense Extension

School of Picasso JS Part 3: Simple Qlik2Go Extension for Qlik Sense

School Of PicassoJS Part 4: Adding Brushing

Introducing Picasso Designer for Qlik Sense

Picasso Designer – это расширение для построения сложных диаграмм, основанных на библиотеке Picasso.JS, без необходимости писать какой-либо код или понимать структуру Picasso JSON. В этом видео демонстрируется BETA версия Picasso Designer (https://github.com/AnalyticsEarth/aePicassoChart).

Сообщение Cookbook for PicassoJS Qlik Sense Extensions – School of Picasso JS появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.

Installing Extensions into Qlik Sense

Building a Qlik Sense Extension, Week 1

Сообщение Подборка Видео по Qlik Sense Extensions появились сначала на Qlik Sense - Обучение, учебник, онлайн курс.