Открыть образLTS

С помощью этого действия в режиме просмотра можно открывать другой образ внутри текущего.

Настройки действия

• Название — название действия
• Образ — выберите, какой образ открывать: Нет (пустой), Созданный или Генерируемый (скриптом)
• Параметры
• Открыть в
• Передавать фильтры

Параметры

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

При открытии генерируемого образа может понадобиться настроить параметры. Для настройки параметров используются способы ввода Из колонки, Из переменной, Задать формулой или Задать агрегацией.

Открыть в

Укажите, как в режиме просмотра будет открываться выбранный образ:

• Окне — в текущем окне открывается выбранный образ вместо текущего
  • Переключатель Открыть в новом окне — Образ открывается в новой вкладке браузера
• В боковом окне:
  • Выравнивание окна — справа или слева на экране
  • Кнопки действий
• В модальном окне:
  • В месте клика — в режиме просмотра модальное окно с образом открывается рядом с местом последнего клика
  • Кнопки действий
• В плейсхолдере — образ открывается в выбранном плейсхолдере. Внутри образа невозможно отобразить этот же образ. Если скрипт возвращает в плейсхолдер пустой образ, такой плейсхолдер в режиме просмотра скрывается, но отображается в режиме редактирования

Передавать фильтры

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

Пример открытия созданного образа

1. В модель данных пространства добавлена таблица case_table, которая содержит информацию об обращениях в техподдержку компании. В колонке rf_name данной таблицы указывается название филиала.
2. Имеется дашборд с данными по обработке заявок, в котором находятся два образа: Обработка заявок и Детализация по филиалу.
3. В образе Детализация по филиалу находится круговая диаграмма по типу взаимодействия с клиентом и входящее значение Филиал. В значении по умолчанию используется формула: any("case_table"."rf_name").
4. Для использования входящего значения в качестве фильтрации, на уровне образа добавляется фильтр с формулой "case_table"."rf_name" = ${Филиал}. При открытии образа ко всем виджетам в нем применяется эта фильтрация.
5. В образе Обработка заявок, который назначен домашним, находится столбиковая диаграмма с данными по средней длительности обработки и количеству обращений. В качестве разреза указан Филиал (формула "case_table"."rf_name"). Для разреза настроено действие по клику Открыть образ.
6. В качестве открываемого в боковом окне образа указан созданный образ Детализация по филиалу.
7. Во входящем значении открываемого образа указан способ ввода Из колонки. Здесь выбрана колонка с названием филиала, по которому будут фильтроваться данные в открываемом образе.
8. Чтобы в режиме просмотра действие по клику срабатывало сразу после нажатия на разрез, для столбиковой диаграммы отключена фильтрация.
9. Опубликуем дашборд и нажмем на столбик одного из филиалов.
10. Открывается отфильтрованный образ Детализация по филиалу с данными по выбранному филиалу.

Настройка генерируемого образа

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

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

Общий порядок настройки генерируемого образа

Чтобы настроить генерируемый образ, выполните следующие шаги:

1. Создайте скрипт для генерации образа.
2. Добавьте блок Ручной запуск. На этом этапе можно задать один или несколько входных параметров (например, год, период, статус и т.д.), которые будут использоваться в дальнейших блоках скрипта.
3. Добавьте блок Выбрать строки через SQL-запрос для того, чтобы получить и преобразовать данные.
4. Добавьте блок Выполнить код. Этот блок использует JavaScript-код для сборки YAML-описания образа на основе ранее полученных данных и передачи его в дашборд.
5. Добавьте блок Вернуть данные для возврата результата работы скрипта. Возвращаемое значение представляет собой текст YAML-описания образа, которое будет использовано дашбордом.
6. Опубликуйте скрипт.
7. Откройте нужный дашборд в режиме редактирования.
8. Добавьте в образ плейсхолдер и в раскрывающемся списке выберите Сгенерированный скриптом и укажите созданный ранее скрипт.
9. Настройте передачу входных параметров. Доступны способы ввода Из переменной и Задать агрегацией.
10. После публикации дашборда содержимое образа будет формироваться динамически при изменении входных параметров.

Пример настройки генерируемого образа

Рассмотрим пример настройки генерируемого образа, который отображает список процессов по департаментам с количеством активных экземпляров для выбранного года или итогового значения. Входной параметр скрипта — Год.

1. Создадим новый скрипт для генерации образа и укажем его наименование, например «Генерация списка: активные экземпляры по департаментам».
2. Добавим блок Ручной запуск и в разделе Ожидаемые поля настроим входной параметр Год с типом данных Строка. Протестируем блок.
3. Добавим блок Выбрать строки через SQL-запрос и используем входной параметр Год для получения данных за выбранный год или для итогового значения. Протестируем блок. [!NOTE] Для строковых входных параметров, в которых могут встречаться кавычки, используйте двойные символы $ в начале и в конце: defaultValue: "$$Новое поле$$". Это позволяет корректно передать строковое значение и избежать ошибок.
4. Добавим блок Выполнить код, в котором с помощью JavaScript сформируем YAML-описание образа на основе данных, полученных на предыдущем шаге. Протестируем блок. В приведенном примере образ создается для виджета Текст. JS-код состоит из двух частей: получение и подготовка данных, которые необходимо вывести в образе, и формирование YAML-кода образа. Пример кода представлен ниже:
   const getWidgets = function () {
     var row_index = -1;
     var has_next = true;
     var rows = new Array(String);
     var widgets = new Array(String);
   
     do {
       has_next = z.hasNext();
       var dept = String(${a9.process_department});
       var example = String(${a9.example_process});
       var cnt = String(${a9.process_cnt});
       if (!dept && !has_next) {
         break;
       }
   row_index<span class="token operator">++</span><span class="token punctuation">;</span>
   
   rows<span class="token punctuation">[</span>row_index<span class="token punctuation">]</span> <span class="token operator">=</span>
     <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">- columns:
       - mode: WIDGET
         widgetKey: row</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>row_index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
         width:
           mode: FRACTION
           value: 1
         height:
           mode: FIXED
           value: 102\r\n</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
   
   widgets<span class="token punctuation">[</span>row_index<span class="token punctuation">]</span> <span class="token operator">=</span>
     <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">- key: row</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>row_index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
       apiVersion: "15"
       type: TEXT
       settings:
         ignoreFilters: true
         stateName: null
         paddings: 8
         markdownText: |-
           **</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>row_index <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. Департамент:** </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dept<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
           - **Наименование процесса:** </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>example<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
           - **Активные экземпляры:** </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>cnt<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
         markdownTextSize: 13\r\n</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
   
   z<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     } while (has_next);
   
     return {
       rows: rows,
       widgets: widgets
     };
   };
   
   const getLayout = function () {
     var view = getWidgets();
   
     var text =
       `schema: 7
   metadata:
     autoUpdate:
       enabled: false
     spacing: false
     cornerRadius: null
     dividersHeight:
       mode: FIXED
       value: 6
   widgetsSetting:
     titleColor:
       mode: AUTO
     titleSize: 14
     paddings: 8
     titleWeight: NORMAL
     textSize: 12
     filterMode: DEFAULT
     ignoreFilters: false
     stateName: null
   layout:
     rows:\r\n` +
       view.rows.join('') +
       `widgets:\r\n` +
       view.widgets.join('');
   
     return text;
   };
   
   const app = {
     output: () => ({
       yaml: getLayout()
     })
   };
   

5. Добавим блок Вернуть данные, выберем формат запроса Текст и укажем возвращаемое значение — YAML-описание образа из блока Выполнить код. Протестируем блок.
6. Опубликуем скрипт.
7. Откроем нужный дашборд в режиме редактирования.
8. Добавим в образ Плейсхолдер и в настройках выберем Сгенерированный скриптом и созданный ранее скрипт.
9. Настроим передачу входного параметра Год на боковой панели справа. В примере передача входного параметра Год настраивается через одноименную переменную дашборда. Переменная дашборда Год имеет тип Динамический список и содержит значения 2024, 2025 и Итого, каждое из которых привязано к отдельной кнопке. Значение выбранной кнопки изменяет значение переменной Год, которое передаётся во входной параметр Год скрипта для генерации образа. В результате при нажатии на кнопку выполняется повторная генерация образа: в SQL-запрос передается выбранное значение года, последовательно выполняются блоки скрипта и создается образ, соответствующий полученным данным.
10. Опубликуем изменения в дашборде и проверим работу генерируемого образа. При выборе разных значений входящего параметра Год будет генерироваться образ с разным составом департаментов. Например, для значения 2024 будет отражено: Для значения Итого будет сгенерировано больше позиций:

Действие по клику в YAML

Чтобы добавить действие по клику (OPEN_VIEW), используйте ключи, перечисленные в таблицах. Ключи указываются в блоке onClick. Ключи для блока onClick описаны на странице Действия по клику.

Параметры скрипта (блок parameters)

Если необходимо указать параметры образа или скрипта, добавьте блок parameters. Внутри блока используются ключи name и inputMethod.

Пример настройки действия по клику в YAML: по нажатию открывается образ с детализацией продаж по типу магазина. Ключ образа store-sales-by-type указан в viewKey.

onClick:
  - mode: EXISTED_VIEW
    name: Открыть образ
    viewKey: store-sales-by-type
    inheritFilter: true
    type: OPEN_VIEW
    openIn: DRAWER_WINDOW
    alignment: RIGHT
    parameters:
      - dbDataType: String
        inputMethod: COLUMN
        name: Тип магазина
        columnName: Тип магазина
        tableName: store