Виджет "Набор"

Mashup Builder > Виджеты > Стандартные виджеты > Виджет "Набор"

Виджет "Набор"

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

Ключевые функции

• Более 60 свойств, обеспечивающих детализированное управление шагом, заполнением, заголовками, нижними колонтитулами, разделами, анимацией и другими опциями.

• Поддерживает возможность добавления динамических данных в каждую ячейку.

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

В виджете "Набор" можно использовать два представления:

• Гибкая компоновка: адаптивная с горизонтальным переносом. Эта компоновка наиболее похожа на ту, которая используется в виджете "Повторитель".

• Табличная компоновка: вертикальное размещение с одним мэшапом на строку.

Обзор использования

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

{
"events": "eventsName",
"min_temp": "minTemp",
"max_temp": "maxTemp",
"precipitation": "precipitation",
"image": "image",
"wind": "wind",
"sourceType": "sourceType",
"date": "date",
"week": "week",
"id": "rowId"
}

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

В MashupGlobalPropertyBinding используется тот же формат JSON, но каждая запись должна содержать уникальное наименование свойства (определяемое пользователем) в качестве ключа и базовый тип ThingWorx в качестве его значения (например, STRING, NUMBER, BOOLEAN). Каждая запись будет предоставлять связываемое пользовательское свойство виджету набора при выходе из поля MashupGlobalPropertyBinding.

Заполнение виджета данными

Можно сконфигурировать виджет "Набор" так, чтобы он во время выполнения был заполнен мэшапами одним из следующих способов:

• Определить мэшап, задав в свойстве наименование мэшапа.

• Создайте привязку к свойству наименования Mashup.

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

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

Свойство ItemLoadBehavior позволяет указать способ загрузки данных. По умолчанию для этого свойства задано значение Загрузить/выгрузить, которое загружает данные только для видимых элементов в наборе. Использование этой опции для мэшапов, использующих событие OnLoad, может привести к появлению большого числа вызовов сервера в данный момент времени. Это может привести к проблемам с производительностью, которых можно избежать, загружая все данные при первоначальной загрузке виджета во время выполнения. Чтобы загрузить данные для всех элементов, задайте для свойства опцию Загрузить все.

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

Известные ограничения для браузеров

Виджет "Набор" выполняется и загружается быстрее в браузерах Chrome и Firefox. Он хорошо работает в браузере Edge. В браузере Internet Explorer 11 время загрузки увеличивается, а производительность снижается.

Свойства

Дополнительные сведения об общих свойствах виджетов см. в разделе Виджеты. Свойства, специфические для виджета "Набор", описаны в приведенной ниже таблице.

Имя свойства

Описание

Базовый тип

Значение по умолчанию

Доступно для привязки? (Да/Нет)

Локализуемое? (Да/Нет)

Data

Представляет источник данных для виджета.

Таблица данных должна содержать уникальный идентификатор.

INFOTABLE

Н/Д

Да

Нет

ItemLoadBehavior

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

• Загрузить/выгрузить - загружает данные при прокрутке или изменении размера страницы браузера в наборе. Данные для элементов, которые не являются видимыми, выгружаются.

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

• Загрузить все - загружает данные для всех элементов в виджете.

STRING

Загрузить/выгрузить

Нет

View

Типы компоновки. Доступны следующие варианты: Flow и Table. Гибкая компоновка является адаптивной, а табличная имеет вид сетки, в каждой строке которой разрешено использовать один мэшап.

STRING

Гибкая

Да

Нет

Mashup

Мэшап для использования с элементами данных.

MASHUPNAME

Н/Д

Да

Нет

MashupHeight

Высота ячейки по умолчанию.

INTEGER

120

Нет

MashupWidth

Ширина ячейки по умолчанию.

INTEGER

400

Нет

UIDField

Представляет уникальный идентификатор элемента набора. Для получения наилучших результатов при сортировке следует использовать базовый тип NUMBER. Может использоваться поле любого типа, позволяющего уникально определить элемент. Если при использовании существующего сервиса для поля выбран аспект Является основным ключом, оно должно использоваться для UIDField. Если основной ключ не определен, рассмотрите возможность использования сервиса, чтобы скомбинировать существующую таблицу данных в новую, которая включает поле с базовым типом GUID или NUMBER, заданное как основной ключ. При этом также может потребоваться добавить структуру данных, включающую поле GUID.

INFOTABLE

Н/Д

Нет

SortField

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

INFOTABLE

Н/Д

Да

Нет

SortAscending

Используется с SortField. Если включено, сортировка выполняется по возрастанию, в противном случае - по убыванию.

BOOLEAN

Н/Д

Да

Нет

SectionField

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

INFOTABLE

Н/Д

Нет

SectionInsetLeft

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

INTEGER

Нет

SectionInsetTop

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

INTEGER

Нет

SectionInsetRight

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

INTEGER

Нет

SectionInsetBottom

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

INTEGER

Нет

LeftAlignFinalRow

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

BOOLEAN

Н/Д

Нет

FlowLayoutGravity

Управляет способом формирования потока ячеек в их строке.

Доступны следующие опции: "Край", "С интервалом", "В центре" или "Развернуть".

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

С интервалом: поддерживается одинаковое расстояние между ячейками, а также между ячейками и прилегающими к ним сторонами виджета.

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

Развернуть: ячейки развертываются с заполнением всей доступной ширины, даже за пределы настройки свойства MashupWidth.

STRING

Н/Д

Нет

FlowLayoutAlignment

Должно использоваться с гибкой компоновкой. Управляет выравниванием по вертикали ячеек в строке.

Это свойство полезно для управления выравниванием по вертикали при переменной высоте ячеек. Такая ситуация может возникать при получении значений высоты ячеек из сервиса с помощью свойства CellHeightField или при использовании свойства MashupNameField, когда для свойства UseMashupDimensions установлено значение true.

Сверху: выравнивание смежных ячеек по верхней стороне строки.

По центру: выравнивание смежных ячеек по центру строки.

По нижнему краю: выравнивание смежных ячеек по нижней стороне строки.

Развернуть: высота смежных ячеек подстраивается под самую высокую ячейку.

STRING

В центре

Нет

FlowLayoutContentGravity

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

Доступны следующие опции: "Сверху", "В центре" и "Снизу".

Сверху: ячейки заполняют пространство, начиная сверху.

По центру: ячейки заполняют пространство, начиная с центра по вертикали.

Снизу: ячейки заполняют пространство, начиная снизу.

STRING

Н/Д

Нет

RowSpacing

Управляет интервалом между заголовками, строками и нижними колонтитулами.

INTEGER

Нет

MinimumSpacing

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

TopPadding

Управляет заполнением между верхней границей и первым элементом.

INTEGER

Нет

BottomPadding

Управляет заполнением между нижней границей и последним элементом.

INTEGER

Нет

MashupNameField

Предоставляет наименование мэшапа для использования для элементов данных. Это свойство, если оно задано, замещает выбор в Mashup и SelectedFieldMashup.

PinHeadersToTop

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

BOOLEAN

Н/Д

Нет

PinFootersToBottom

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

BOOLEAN

Н/Д

Нет

MashupPropertyBinding

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

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

STRING

Н/Д

Нет

MashupGlobalPropertyBinding

Дополнительно. Строка JSON, которая используется для создания связываемого пользовательского свойства. Это свойство применяется для динамического привязывания данных, которые должны быть одинаковыми в каждом вложенном мэшапе (например, наименование продукта, глобальный индикатор статуса и т. д.). Каждое наименование ключа может быть любым разрешенным наименованием свойства, которое требуется добавить в виджет. Каждое значение должно иметь тип данных, для которого будет назначено свойство при его добавлении, например STRING, NUMBER, BOOLEAN. Свойство добавляется в виджет сразу после переключения со свойства MashupGlobalPropertyBinding и проверки. Прокрутите список в окне свойств или введите наименование в фильтре свойств. Может использоваться для привязки данных к пользовательскому свойству для передачи в параметр вложенного мэшапа виджета.

STRING

Н/Д

Нет

CellWidthField

Поле для определения ширины ячеек по умолчанию из сервиса. Эти значения замещают CellWidth.

CellHeightField

Поле для определения высоты ячеек по умолчанию из сервиса. Эти значения замещают CellHeight.

CellMashupSelectedField

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

STRING

Н/Д

Нет

UseMashupDimensions

Дополнительно. Необходимо использовать со свойством MashupNameField и мэшапами статических ячеек. Сопоставляет размер ячейки с мэшапом, который ее содержит.

AllowSelection

Если включено, ячейки доступны для выбора, в противном случае ячейки недоступны для выбора этим виджетом "Набор".

BOOLEAN

Н/Д

Нет

MultiSelect

Разрешает множественный выбор. Для множественного выбора в виджете "Набор" не требуется использовать действия CTRL + click или SHIFT + click. Щелкните для выбора нужного числа ячеек и щелкните ячейки для отмены выбора. Выбор диапазона мышью не поддерживается.

BOOLEAN

Н/Д

Нет

HasSelectedCells

Устанавливается значение ИСТИНА при наличии хотя бы одной выбранной ячейки в этом виджете "Набор".

BOOLEAN

false

Да

Нет

SelectedCellsCount

Содержит число ячеек, выбранных в представлении набора.

INTEGER

Да

Нет

ScrollsToSelectedCell

Позволяет при изменениях в выборе вызывать прокрутку набора до первой выбранной ячейки.

BOOLEAN

Н/Д

Нет

AutoSelectFirstCell

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

BOOLEAN

Н/Д

Нет

SelectedItems

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

INFOTABLE

Н/Д

Да

Нет

SelectedMashupName

Дополнительно. Переопределяет значение CellSelectedStyle, если оно задано. Определяет мэшап, заменяющий тот, который определен в свойствах Mashup или MashupFieldName, при выборе ячейки во время выполнения. В большинстве случаев размеры SelectedMashup должны совпадать с размерами мэшапа по умолчанию. Также он может иметь некоторые, все или дополнительные параметры как мэшап по умолчанию. В качестве примера использования этой возможности может служить предоставление более подробного представления данных при выборе ячейки либо отображение дополнительных опций выбора или фильтрации для представленных данных.

MASHUPNAME

Н/Д

Нет

HandleSelectionUpdates

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

BOOLEAN

Н/Д

Нет

CellStyle

Управляет фоном ячеек. Используется только свойство цвета фона стиля.

STYLE

Н/Д

Нет

CellAlternateStyle

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

Все ячейки будут использовать цвет фона CellStyle, если не задан цвет фона CellAlternateStyle.

STYLE

Н/Д

Нет

CellSelectedStyle

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

STYLE

Н/Д

Нет

CellHoverStyle

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

STYLE

Н/Д

Нет

CellActiveStyle

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

STYLE

Н/Д

Нет

RippleEffectStyle

Этот элемент необходимо использовать со свойством UseRippleEffect. Используется только свойство цвета фона стиля, которое применяется к эффекту волновой анимации.

STYLE

Н/Д

Нет

UseRippleEffect

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

BOOLEAN

Н/Д

Нет

CellBorderRadius

Необязательный радиус границы для применения к ячейкам. Если в качестве этого значения задана непустая строка, например 12px, для свойства overflow ячеек задается значение hidden.

STRING

Н/Д

Нет

CellBoxShadow

Если задана непустая строка, она будет использоваться как тень рамки для ячеек. Размеры тени задаются в соответствии со спецификацией и синтаксисом тени блока CSS:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

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

Не рекомендуется использовать вложенные, первоначальные и наследованные настройки CSS.

STRING

Н/Д

Нет

CellPointer

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

STRING

Auto

Нет

CellMenuStates

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

STATEDEFINITION

DefaultMenuStates

Нет

CellMenuStatesIconSize

Этот элемент необходимо использовать со свойством CellMenuStates. Этот размер устанавливается для значков меню. Максимальное значение: 64.

INTEGER

Н/Д

Нет

CellMenuStatesIconGravity

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

STRING

Н/Д

Нет

CellMenuStatesOrientation

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

STRING

Н/Д

Нет

ShowHeaders

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

BOOLEAN

Н/Д

Нет

HeaderMashupName

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

MASHUPNAME

Н/Д

Нет

HeaderSectionParam

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

STRING

Н/Д

Нет

HeaderHeight

Высота мэшапа заголовка.

INTEGER

Нет

ShowFooters

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

BOOLEAN

Н/Д

Нет

FooterMashupName

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

MASHUPNAME

Н/Д

Нет

FooterSectionParam

Параметр мэшапа, который получит идентификатор раздела.

STRING

Н/Д

Нет

FooterHeight

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

INTEGER

Нет

EmptyMashupName

Если определено, этот мэшап будет отображаться в случае пустого набора данных. Такое может происходить при использовании виджета "Фильтр данных" с сервисом, который используется для заполнения виджета "Набор". Можно использовать для отображения мэшапа, который содержит сообщение "Нет результатов".

MASHUPNAME

Н/Д

Нет

PlaysIntroAnimation

Включает анимацию перехода "вдвигание" для ячеек после загрузки данных.

BOOLEAN

Н/Д

Нет

Deselect

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

Н/Д

Да

Нет

SelectAll

При вызове набор выберет все строки своего набора данных.

Н/Д

Да

Нет

События

CellMenuStates - свойство CellMenuStates добавляет событие для каждого состояния в определении состояния, добавляемом в виджет "Набор". Наименование каждого события будет соответствовать наименованию каждого состояния.

CellWasClicked: запускается при щелчке или касании любой ячейки.

CellWasRightClicked: запускается при любом щелчке правой кнопкой.

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

CellWasLongClicked: запускается при длинном щелчке или длинном касании любой ячейки.

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

Было ли это полезно?