Виджет "Список" (с поддержкой тем)
Виджет "Список" является виджетом, позволяющим отображать строки данных.
 |
Виджет "Список" доступен как стандартный виджет платформы и как веб-компонент, который можно импортировать из SDK.
|
Формат данных
Можно сконфигурировать элементы виджета "Список", используя данные из таблицы данных, отформатированной с помощью следующей структуры.
|
Определение поля
|
Отображаемое поле
|
Поле "Значение"
|
Поле "Состояние"
|
|---|---|---|---|
|
Описание
|
Представляет метку элемента списка во время выполнения.
|
Представляет фактическое значение элемента списка. Это значение также сохраняется в свойстве SelectedText.
|
Дополнительное поле таблицы данных, которое представляет состояние элементов в списке. Это свойство можно использовать для включения или выключения элементов в списке. Поддерживаемые значения: Enabled или Disabled
|
|
Базовый тип
|
STRING или NUMBER
|
STRING или NUMBER
|
STRING
|
Определение элементов списка
Чтобы определить элементы списка, привяжите таблицу данных, форматированную с требуемым форматом данных.
1. На панели Данные добавьте сервис данных, который определяет элементы списка для виджета. Можно определить элементы, используя формат таблицы данных, который приведен в предыдущем разделе.
2. Привяжите свойство All Data сервиса данных к свойству Data виджета "Список". Привязка будет создана.
3. На панели Свойства выберите поле таблицы данных для каждого из следующих свойств:
◦ DisplayField - данные для меток элементов.
◦ ValueField - фактические значения меток элементов.
◦ StateField - необязательное поле, определяющее состояние "включено" или "отключено" для каждого элемента данных.
4. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
Элементы списка отображаются в виджете во время выполнения.
Включение множественного выбора
Можно включить множественный выбор в списке, задав для свойства MutliSelect виджета значение true. При множественном выборе добавляются флажки, позволяющие пользователям выбрать один или несколько элементов в списке. Кроме того, над элементами добавляется элемент управления, который позволяет пользователям снимать или устанавливать все флажки элементов.
Конфигурирование одиночного выбора
По умолчанию виджет поддерживает выбор одного элемента. Выбранный объект подсвечивается цветом фона.
Чтобы включить выбор переключателей при использовании режима одиночного выбора, задайте для свойства RadioButtonSelection значение true. Кнопка отображается слева от списка. Элементы списка отображаются в виде группы переключателей, показывающих пользователям, что каждый раз можно выбрать только один элемент.
Добавление фильтра
Можно добавить к списку фильтр, задав для свойства Filter виджета значение true. Фильтр, отображаемый в верхней части списка, позволяет пользователям быстро фильтровать элементы в списке.
Очистка выбора элементов
Можно добавить пустой элемент, позволяющий пользователям очистить выбор в едином списке выбора, задав для свойства ClearSelection виджета значение true. Можно также изменить метку пустого элемента с помощью свойства ClearSelectionLable.
| | Это свойство недоступно, если включен режим множественного выбора. |
Применение форматирования состояния
Можно использовать State Formatting, чтобы подсветить текущий статус элементов списка на основе строки или числового значения. Дополнительные сведения см. в разделе Пример: применение форматирования состояния к виджету "Список" (ptc.com).
Свойства виджета
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для связывания (Д/Н)? | Локализуемое (Д/Н) | ||
|---|---|---|---|---|---|---|---|
Label | Текст, отображаемый в качестве метки виджета. | STRING | Список | Д | Д | ||
LabelAligment | Выравнивает метку по левому краю, по правому краю или по центру. | STRING | Слева | Д | Н | ||
Aligment | Выравнивает элементы в списке по левому краю, по правому краю или по центру. | STRING | Слева | Д | Н | ||
ClearselectionItem | Добавляет в список пустой элемент выбора. Позволяет пользователю очистить выбор. | BOOLEAN | True | Д | Н | ||
ClearselectionLabel | Определяет пользовательский текст для элемента очистки выбора в списке. По умолчанию задано значение None. | STRING | None | Д | Д | ||
MultiSelect | Позволяет пользователю выбрать несколько элементов в списке. | BOOLEAN | false | Н | Н | ||
StateField | Определяет таблицу данных, которая будет использоваться для отключения или включения элементов в списке. | INFOTABLE | Н/Д | Н | Н | ||
Disabled | Отключает виджет в мэшапе. Виджет будет отображаться в мэшапе, но не будет реагировать на нажатие. | BOOLEAN | false | Д | Н | ||
ShowListFilter | Добавляет фильтр в список для фильтрации элементов списка во время выполнения. | BOOLEAN | false | Н | Н | ||
FilterHintText | Отображает текст подсказки для фильтра списков. | STRING | Н/Д | Н | Д | ||
AutoSelectFirstRow | Задает первую строку в качестве выбранной опции в списке.
| BOOLEAN | Н/Д | Н | Н | ||
RadioButtonSelection | Отображает переключатели рядом со списком элементов при использовании режима одиночного выбора. | BOOLEAN | false | Н | Н | ||
RowHeight | Задает высоту строки для одной линии. | NUMBER | 34 | Д | Н | ||
CustomClass | Определяет CSS для верхнего раздела Div виджета. Можно ввести несколько классов, разделенных пробелами. | STRING | Н/Д | Д | Н | ||
TabSequence | Последовательность, в которой подсвечиваются виджеты при нажатии пользователем клавиши табуляции. | NUMBER | Н/Д | Н | Н | ||
Data | Таблица данных или источник данных для данных виджета. | INFOTABLE | Н/Д | Д | Н | ||
DisplayField | Поле таблицы данных, представляющее значение данных. | Н/Д | Н/Д | Н | Н | ||
ValueField | Поле, которое используется для SelectedText. | Н/Д | Н/Д | Н | Н | ||
SelectedText | Позволяет выбирать элемент в списке. | STRING | Н/Д | Д | Д | ||
SelectedItems | Определяет источник таблицы данных для выбранных элементов в списке. | INFOTABLE | Н/Д | Д | Н | ||
DoubleClicked | Событие инициируется, если пользователь дважды щелкает виджет. | Н/Д | Н/Д | Д | Н | ||
ListFormat | Это свойство используется для применения конкретного рендеринга для данных. Это свойство поддерживает следующие форматы рендеринга: NUMBER, INTEGER, LONG, DATETIME, LOCATION, VEC2, VEC3, VEC4, THINGCODE, HYPERLINK, IMAGELINK, IMAGE, STRING, BOOLEAN, TAGS, HTML, THINGNAME, THINGSHAPENAME, THINGTEMPLATENAME, USERNAME, MASHUPS, INFOTABLE, PASSWORD, XML, JSON, VALUES. | Н/Д | Н/Д | Н/Д | Н/Д |
Проверка данных виджета "Список"
Можно использовать свойства проверки, чтобы проверять выбор объектов списка во время выполнения. Например, можно затребовать выбор элемента в списке и отобразить сообщение об ошибке, если не выбран ни один элемент.
Дополнительные сведения о свойствах проверки см. в разделе Применение проверки к виджетам.
В следующей таблице перечислены свойства проверки, доступные на панели Проверка в ThingWorx 9.3.4 и более поздних версий.
Свойство | Описание | Базовый тип | Значение по умолчанию | Доступно для связывания (Д/Н)? | Локализуемое (Д/Н) |
|---|---|---|---|---|---|
CriteriaMessage | Сообщение, отображаемое для критериев проверки и при сбое проверки. | STRING | Н/Д | Д | Д |
CriteriaMessageDetails | Подробности, отображаемые для сообщения о критериях проверки и о сбое. | STRING | Н/Д | Д | Д |
RequiredMessage | Сообщение, отображаемое, если для требования required задано значение true, а элемент не выбран | STRING | Требуется выбор | Д | Д |
ShowValidationCriteria | Показывает сообщение с подсказкой о требуемом вводе при правке флажка. | BOOLEAN | false | Д | Н |
ShowValidationFailure | Показывает сообщение о сбое при сбое проверки введенных данных. | BOOLEAN | false | Д | Н |
ShowValidationSuccess | Показывает сообщение об успешном завершении при успешной проверке введенного значения. | BOOLEAN | false | Д | Н |
SuccessMessage | Сообщение, отображаемое при успешном завершении проверки. | STRING | Н/Д | Д | Д |
SuccessMessageDetails | Дополнительное сообщение, расширяющее информацию сообщения об успешной проверке. | STRING | Н/Д | Д | Д |
Validate | Связываемое событие, которое инициируется при изменении значения виджета. Привяжите это событие к сервису или функции, чтобы применить шаблон или выражение проверки. | событие | Н/Д | Д | Н |
ValidationCriteriaIcon | Задает выбор значка SVG для отображения в сообщении подсказки для критериев проверки | IMAGELINK | info | Н | Н |
ValidationFailureIcon | Задает отображение значка SVG в сообщении о статусе при сбое проверки. | IMAGELINK | error | Н | Н |
ValidationOutput | Загружает выходные данные проверки виджета. Возвращаемые значения: Undefined, Unvalidated, Valid или Invalid. | STRING | Н/Д | Д | Н |
ValidationState | Связываемое свойство, которое задает состояние проверки. Для этого свойства можно задать значение Undefined, Unvalidated, Valid или Invalid. | STRING | Undefined | Д | Н |
ValidationSuccessIcon | Задает выбор значка SVG для отображения в сообщении о состоянии, если проверка прошла успешно | IMAGELINK | success | Н | Н |
ValueRequired | Требуется выбор элемента в списке. | BOOLEAN | false | Д | Н |