Виджет "Выпадающий список" (с поддержкой тем)
 |
Этот виджет заменяет представление поля со списком из унаследованного виджета "Список".
|
Виджет "Выпадающий список" позволяет добавить выпадающее меню, которое открывает список элементов во время выполнения. Можно настроить виджет для выбора одного или нескольких элементов. Выбранные элементы сохраняются в свойстве виджета SelectedText, которое можно привязать как входные данные для других виджетов, функций или сервисов данных. Можно определить элементы и их состояние, создав сервис данных, который возвращает таблицы данных. Ниже приведены примеры конфигураций, которые можно выполнять с помощью свойств виджета.
• Выровнять метки элементов по левому краю, по правому краю или по центру выпадающего списка.
• Разрешить одиночный или множественный выбор.
• Добавить поле фильтра, чтобы пользователи могли быстрее находить элементы в длинных списках.
• Применить форматирование стиля к элементам списка.
| | Виджет "Выпадающий список" доступен как стандартный виджет платформы и как веб-компонент, который можно импортировать из SDK. |
Формат данных
Чтобы сконфигурировать элементы списка для виджета "Выпадающий список", необходимо создать сервис данных, который возвращает таблицу данных со следующими определениями полей:
Поле "Показать" | Поле "Значение" | Поле "Состояние" | |
|---|---|---|---|
Базовый тип | STRING | STRING | Boolean |
Описание | Метка для отображения элементов в выпадающем списке. | Фактическое значение, используемое для каждого элемента. Это значение используется в свойстве виджета SelectedItems при связывании с другими виджетами или сервисами данных. | Определяет, будет ли элемент включен или выключен. Нельзя выбирать отключенные элементы. |
Пример строки | English | en | True |
Каждая строка в таблице данных определяет элемент в выпадающем списке. Можно сконфигурировать сервис данных для статического или динамического создания элементов на основе входных данных из других виджетов или сервисов данных.
Привязка данных элементов списка
Чтобы привязать данные конфигурации к виджету "Выпадающий список", выполните следующие шаги:
1. Добавьте вещь, которая содержит сервис данных для элементов списка, используя панель Данные.
2. Привяжите свойство All Data сервиса к свойству Data виджета.
3. Привяжите сервис к событию Loaded мэшапа.
4. На панели Свойства укажите столбцы таблицы данных, которые нужно использовать для конфигурирования элементов выпадающего списка:
◦ DisplayField - выберите столбец, который будет использоваться для меток элементов.
◦ ValueField - выберите столбец, который будет использоваться для фактических значений элементов.
◦ StateField - выберите столбец, который будет использоваться для состояния элементов.
5. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
Во время выполнения элементы списка отображаются при открытии выпадающего списка.
Задание промежутка между списком и выпадающим списком
Используйте свойство виджета ListMarginTop, чтобы указать промежуток между выпадающим списком и списком элементов. По умолчанию для промежутка задано значение 8 пикселей. Чтобы удалить промежуток, задайте для свойства значение 0.
Добавление элемента для очистки выбора
По умолчанию виджет "Выпадающий список" не позволяет пользователям очищать выбор в списке во время выполнения. Чтобы разрешить пользователям очищать выбор во время выполнения, включите свойство ClearSelectionItem. В список добавляется дополнительный элемент, имеющий метку по умолчанию (Нет). Пользователи могут выбрать этот элемент, чтобы предотвратить выбор в выпадающем списке.
Свойства виджета
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) | ||
|---|---|---|---|---|---|---|---|
HintText | Отображает текст местозаполнителя, поясняющий, что именно должно быть введено в поле. | STRING | Выберите... | Д | Д | ||
Label | Текст, отображаемый в качестве метки виджета. | STRING | Н/Д | Д | Д | ||
LabelAlignment | Позволяет выровнять метку: по левому краю, правому краю или центру. | STRING | Слева | Д | Н | ||
Alignment | Позволяет выровнять текстовые элементы в выпадающем списке по левому краю, правому краю или центру. | STRING | Слева | Д | |||
ClearSelectionItem | Добавляет в выпадающий список пустой элемент выбора. Позволяет пользователю очистить выбор. | BOOLEAN | True | Д | |||
ClearSelectionLabel | Определяет пользовательский текст для элемента очистки выбора в выпадающем списке. По умолчанию задано значение None. | STRING | None | Д | Д | ||
Disabled | Используйте это свойство, чтобы отключить виджет в мэшапе. Виджет будет отображаться в мэшапе, но не будет реагировать на нажатие. | BOOLEAN | false | Д | Н | ||
ShowListFilter | Позволяет добавить фильтр в выпадающий список и фильтровать элементы списка во время выполнения. | BOOLEAN | false | Н | Н | ||
FilterHintText | Отображает текст подсказки для фильтра выпадающего списка. | STRING | Н/Д | Д | Д | ||
ListMaxHeight | Позволяет задать максимальную высоту отображаемого выпадающего списка. Полоса прокрутки добавляется в отображение, если высота всех элементов в выпадающем списке превышает заданную высоту списка. | NUMBER | Н/Д | Д | Н | ||
StateField | Таблица данных, которая представляет состояние элементов линии в выпадающем списке. Это свойство можно использовать для включения или выключения элементов линии в выпадающем списке. | INFOTABLE | Н/Д | Н | Н | ||
MultiSelect | Позволяет пользователю выбрать несколько элементов в выпадающем списке. | BOOLEAN | false | Н | Н | ||
AutoSelectFirstRow | Позволяет задать первую строку как выбранную опцию в выпадающем списке.
| BOOLEAN | false | Н | Н | ||
RowHeight | Позволяет задать высоту строки для одной строки. | NUMBER | 34 | Д | Н | ||
CustomClass | Позволяет определить класс CSS для применения в верхнем разделе виджета. Можно ввести несколько классов, разделенных пробелами. | STRING | Н/Д | Д | Н | ||
TabSequence | Последовательность, в которой подсвечиваются виджеты при нажатии пользователем клавиши табуляции. | NUMBER | Н/Д | Н | Н | ||
Data | Источник таблицы данных. | INFOTABLE | Н/Д | Д | Н | ||
DisplayField | Поле таблицы данных, представляющее значение данных. | Н/Д | Н/Д | Н | Н | ||
ValueField | Поле, используемое для выбранного текста. | Н/Д | Н/Д | Н | Н | ||
SelectedText | Это свойство используется двумя способами в зависимости от направления его привязки при использовании режима одиночного выбора: • Внутренний - выбирает объект с меткой, которая соответствует значению свойства. • Внешний - загружает текст выбранного элемента из списка.
| STRING | Н/Д | Д | Д | ||
SelectedItems | Источник таблицы данных для выбранных элементов в списке. | INFOTABLE | Н/Д | Д | Н | ||
ListFormat | Открывает диалоговое окно, в котором можно задать рендеринг и правила форматирования для данных виджета. В ThingWorx 9.1 и более поздних версиях можно также применить форматирование состояния к виджету. | Рендерер и форматирование состояния | Н/Д | Н | Н | ||
ListMarginTop | Задает промежуток между полем выпадающего списка и списком элементов. | NUMBER | 8 | Н | Н | ||
TooltipField | Отображает текст всплывающей подсказки при наведении указателя на метку, связанную с выпадающим списком, и текущее выбранное значение в выпадающем списке.
| STRING | Н/Д | Д | Д | ||
TooltipIcon | Задает изображение значка для всплывающей подсказки виджета "Выпадающий список".
| MEDIA ENTITY | Н/Д | Н | Н |
Проверка данных виджета "Выпадающий список"
Свойства проверки можно использовать для проверки выбора элементов во время выполнения. Например, можно потребовать выбор в выпадающем списке и отобразить сообщение об ошибке, если не выбран ни один элемент.
Дополнительные сведения о свойствах проверки см. в разделе Применение проверки к виджетам.
В следующей таблице перечислены свойства проверки, доступные на панели Проверка в ThingWorx 9.3.4 и более поздних версий.
Свойство | Описание | Базовый тип | Значение по умолчанию | Доступно для связывания (Д/Н)? | Локализуемое (Д/Н) |
|---|---|---|---|---|---|
CriteriaMessage | Сообщение, отображаемое для критериев проверки и при сбое проверки. | STRING | Н/Д | Д | Д |
CriteriaMessageDetails | Подробности, отображаемые для сообщения о критериях проверки и о сбое. | STRING | Н/Д | Д | Д |
RequiredMessage | Сообщение, отображаемое, если для опции "Требуется выбор" задано значение 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 | Д | Н |