Show/Hide Toolbars

Руководство администратора

Виджет Таблица

В виджете Таблица можно выводить данные, получаемые из хранимых процедур SQL. Для выполнения действий над объектами в строках таблицы могут быть настроены смарт-кнопки (кнопки управления) — например, если в таблице отображается список задач, то с помощью кнопок можно менять их приоритет или переводить по маршруту, не заходя в карточку задачи.

block_table_ex

Пример блока "Таблица".

В настройках виджета по ссылке Открыть дополнительные настройки будет вызвано окно дополнительных настроек:

Кликните мышью для просмотра изображения в полном размере

Окно дополнительных настроек таблицы до выбора источника данных.

Введите наименование процедуры в поле Хранимая процедура (1) и нажмите кнопку Сохранить (2). После этого в таблице настроек отобразятся колонки отображаемой таблицы (3).

Кликните мышью для просмотра изображения в полном размере

Окно дополнительных настроек таблицы с источником данных.

Порядок колонок в выводимой таблице можно изменить, перетаскивая строки таблицы настроек (мышкой по иконке !move).

!warning Требования к хранимым процедурам описаны здесь.

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

Название

Описание

Хранимая процедура

Название хранимой процедуры (указывается только название процедуры, без схемы и квадратных скобок)

Количество строк итогов

Количество последних строк, которые будут идентифицироваться как итоговые

Брать стиль строки из

Название колонки, в которой хранится описание стиля (атрибуты форматирования) отображения для строк таблицы

Настройки вывода колонок

Блок кнопок

В первой строке настроек таблицы настраивается вывод кнопок. Если для таблицы настроены кнопки, все они выводятся в одной, самой первой (левой) колонке. Для этой колонки можно только включить признак Отображать, указать имя и ширину. Сами кнопки настраиваются в блоке Кнопки управления, см ниже

Отображать

Если флажок отключен, то колонка не будет отображаться (по умолчанию отображаются все колонки)

Столбец sql

Название колонки в SQL-процедуре

Имя

Название колонки, как оно должно отображаться в таблице

Колонка для функции DrillDown

Название колонки, по которой будет строиться детализация (DrillDown).

!warning В строке может быть заполнена только одна из настроек: Брать ссылку из или Название колонки для функции DrillDown. Если одновременно заполнены обе настройки, то при сохранении настроек выдается предупреждение об ошибке!

Пример настройки детализации см. ниже

Хранимая процедура

Название хранимой процедуры для детализации данных. Если процедура задана, то клику на значение в ячейке отображается новый виджет "Таблица" с набором данных, сформированным указанной хранимой процедурой. По нажатию на иконку !props в колонке справа вызывается окно для настройки виджета с детализацией.

Параметры хранимой процедуры:

@XmlParam xml (readonly) - параметр, в который передаются значения фильтра, привязанного к виджету,

@DrillDownField varchar(max) = null - название столбца SQL, для которого настраивается детализация (т.е. параметр определяет колонку, по которой кликнул пользователь).
Используется, если одна и та же хранимая процедура получает детальные данные по разным столбцам,

@DrillDownParams varchar(max) = null - значение параметра для детализации (т.е. параметр определяет строку, по которой кликнул пользователь).
Поскольку поддерживается вложенная детализация с неограниченным количеством уровней вложенности, то в параметре передается полная история значений, по которым последовательно кликал пользователь. Это дает возможность вернуться в детализацию предыдущего уровня кнопкой "Назад",

@UserID int = null - пользователь, для которого формируются данные.

Пример настройки детализации см. ниже

Детализация

По нажатию на значок !gear открывается окно настройки таблицы детализации, аналогичное настройкам исходной таблицы.

Пример настройки детализации см. ниже

Брать ссылку из

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

!warning В строке может быть заполнена только одна из настроек: Брать ссылку из или Название колонки для функции DrillDown. Если одновременно заполнены обе настройки, то при сохранении настроек выдается предупреждение об ошибке!

Формат ссылок можно посмотреть здесь

Открывать в модальном окне

Если флажок включен, то ссылка, указанная в колонке "Брать ссылку из", будет открываться в модальном окне, а если не включен - в текущей вкладке

Другие настройки

По нажатию на значок !gear открывается окно визуальных настроек и индикаторов

Другие настройки

Общие настройки

Ширина колонки

Ширина колонки в % от общей ширины таблицы

Выравнивание текста

Выберите один из доступных вариантов выравнивания текста в данной колонке (по левому краю, по центру, по правому краю)

Название группы колонок

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

Брать стилизацию из колонки

Если в данной настройке есть значение, то текст в этой колонке будет выводиться с указанными атрибутами форматирования (вместо форматирования по умолчанию)

Брать класс из колонки

Поле, содержащее набор css-классов для форматирования значений в данной колонке

Режим фильтрации

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

Возможные значения:

Отсутствует (по умолчанию)

Обычный

Excel

block-table-filter-options

Вывод информации

Можно отметить один или несколько из флажков:

Текст

Изображение

Индикатор

График

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

Текст

Выделять красным отрицательные числа

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

Отображать 0

Если флажок включен, то нулевые значения будут отображаться как 0.

Если флажок выключен, то вместо 0 будет отображаться пустая ячейка

Вырезать теги

Если флажок включен, то текст в колонке будет выводиться без учета html-тегов

Переносить текст на другую строку

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

Если флажок выключен и для колонки задана ширина, то не поместившийся текст обрезается (не отображается)

Формат вывода данных

для даты

для чисел

Изображение

Колонка значения

Колонка из источника данных, которая содержит надпись, выводимую на индикатор (например, число)

Высота %, px

Высота изображения в пискелях или процентах

Ширина %, px

Ширина изображения в пискелях или процентах

Стиль

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

Выравнивание

Определяет, будет ли индикатор отображаться слева или справа от значения в колонке

Индикатор

Тип индикатора

Возможные значения:

Текст (используется по умолчанию)

Иконка

Если выбрано значение Иконка, то ниже отображается поле для выбора набора иконок. Пока доступен только набор Material. Название иконки из набора должно возвращаться в колонке SQL-процедуры, указанной в настройке Колонка значения

Колонка цвета

Колонка из источника данных, которая определяет цвет фона индикатора. Значение должно быть в формате hex: #XXXXXX

Колонка значения

Колонка из источника данных, которая содержит надпись, выводимую на индикатор, если тип индикатора Текст, или название иконки из набора, если тип индикатора Иконка (название должно начинаться с маленькой буквы)

Стиль

Дополнительные параметры отображения индикатора — рамка, радиус закругления и пр.

Выравнивание

Определяет, будет ли индикатор отображаться слева или справа от значения в колонке

График

Колонка значения

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

Тип графика (линейный, столбчатый или круговая диаграмма)

Параметры стилизации графика

Данные

Примеры JSON, описывающих графики

Кнопки управления

Таблица с настройками кнопок для данного виджета. Настройка кнопок описана здесь.

Настройка детализации

В виджете может быть настроена детализация данных по определенным полям. В соответствующей строке настроек в поле Хранимая процедура указывается процедура, которая будет формировать данные для детализации. Если хранимая процедура для детализации не указана, то будет вызвана хранимая процедура для самой таблицы. Детализация строится по полю, указанному в поле Колонка для функции DrillDown. Вид таблицы детализации настраивается по клику на значок в колонке Детализация.

В примере на рисунке ниже в параметр @DrillDownField будет передано название колонки 'fact', а в параметр @DrillDownParams - значение колонки fio, т.е фамилия менеджера.

Когда детализация настроена, в пользовательском интерфейсе значения в колонке отображаются в виде гиперссылок. По клику на значение (1) открывается новый виджет (2), построенный по данным хранимой процедуры для детализации по заданному полю. Для возврата к основной таблице нужно нажать ссылку Назад (3).

block_table_details

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

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

Способ получения значений входящих параметров описан здесь.

Примеры хранимых процедур для виджетов можно посмотреть здесь.

Настройка стиля

Если предполагается форматировать выводимые в таблице данные, то в возвращаемых данных могут присутствовать поле с описанием стиля строки (указывается в поле "Брать стиль строки из") и поле с описанием стиля столбца (указывается в колонке "Брать стилизацию из колонки").  

 

block_table_styles

Настройки стилей в таблице.

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

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

Значение

CSS стиль, который соответствует данному значению

Default

Нет стиля

Success

background-color:#dff0d8 (зеленый)

Info

background-color:#d9edf7 (голубой)

Warning

background-color:#fcf8e3 (желтый)

Danger

background-color:#f2dede (розовый)

TotalsRow

font-weight: bold

BackRed

background-color: pink

BackGreen

background-color: lightgreen

BackBlue

background-color: lightblue

BackYellow

background-color: gold

TextRed

color: red

TextGreen

color: green

!warning Если необходимо задать несколько атрибутов, их надо перечислить через пробел.

Помимо типовых значений для задания стиля можно использовать любые значения цвета и фона в формате 'Color#ХХХХХХ' для цвета текста и 'Background#ХХХХХХ' для цвета фона (где ХХХХХХ - шестизначное обозначение цвета в формате HEX). Если надо задать оба значения, их можно перечислить через запятую 'Color#ХХХХХХ,Background#ХХХХХХ'. Например, 'Color#ff0000,Background#00ff00'.

Примеры JSON, описывающих график

Линейный график

{ "type":"polyline",
 "points":[

       { "x":1, "y":2,
         "color":"#DEDEDE"

       },

       { "x":2,

         "y":4,
         "color":"#DEDEDE"

       },

       { "x":3,

         "y":8,
         "color":"#DEDEDE"

       },

       { "x":4,

         "y":16,

         "color":"#DEDEDE"

       }  
  ]
}

Столбчатый график

{ "type":"bar",

 "points":[

       { "x":1,

         "y":2,
         "color":"#FF0000"

       },

       { "x":2,

         "y":4,
         "color":"#00FF00"

       },

       { "x":3,

         "y":8,

         "color":"#0000FF"

       },

       { "x":4,

         "y":16,

         "color":"#DEDEDE"

       }  

  ]

}

Круговая диаграмма

{ "type":"pie",
 "points":[

       { "x":1,

         "y":2,
         "color":"#FF0000"

       },

       { "x":2,

         "y":4,
         "color":"#00FF00"

       },

       { "x":3,

         "y":8,
         "color":"#0000FF"

       },

       { "x":4,

         "y":16,

         "color":"#DEDEDE"

       }  

  ]

}

Пример хранимой процедуры с данными для графика

CREATE or ALTER PROCEDURE [dbo].[sp_table]
(
  @XmlParam xml = null,
  @DrillDownField varchar(max) = null,
  @DrillDownParams varchar(max) = null,
  @UserID int
)
AS
BEGIN
SET NOCOUNT ON;
 
declare @points table ( x int, y int, color varchar ( 100 ) )
insert into @points
select 1, 2, '#FF0000' union all
select 2, 4, '#00FF00' union all
select 3, 8, '#0000FF'
 

select 1 as Col1, ( select 'polyline' as [type], ( select x, y, color from @points for json path ) as points for json path, WITHOUT_ARRAY_WRAPPER ) as chartdata union all
select 2 as Col1, ( select 'bar' as [type], ( select x, y, color from @points for json path ) as points for json path, WITHOUT_ARRAY_WRAPPER ) union all
select 3 as Col1, ( select 'pie' as [type], ( select x, y, color from @points for json path ) as points for json path, WITHOUT_ARRAY_WRAPPER )
 
END

 

Полезные ссылки