Виджет Список

Виджет Список отображает записи данных в настроенном пользователем виде списка. Он использует дизайн карточек в качестве контейнера для небольших коротких описаний связанной информации с опцией, которая позволяет включить кнопку для просмотра дополнительных деталей. Вы можете выбрать один из нескольких шаблонов для построения компоновки карточки. Шаблоны включают виджеты изображения, кнопки и текста. Вы также можете выбрать пустой шаблон, чтобы создать свой собственный дизайн. Источник данных для списка определяется векторным слоем. В списке каждая карточка элемента представляет запись данных, а виджеты на карточке можно использовать для отображения атрибутов этой записи. Вы можете изменить оформление списка, настроив свойства стиля и изменив компоновку первой карточки, что обновит все карточки в списке.

Примеры

Используйте этот виджет для поддержки требований к разработке приложений, таких как:

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

Примечания по использованию

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

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

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

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

Настройки

Виджет Список включает следующие настройки:

  • Выбрать шаблон — выберите один из предопределенных дизайнов списка или начните с пустого шаблона списка. (Если вы выбираете шаблон, вы сможете настроить его внешний вид позже.)
  • Данные — укажите данные для включения в список.
    • Выбрать данные — выберите источник данных для векторного слоя с объектами, которые будут отображаться в виджете. Вы можете выбрать только один вид данных для одного векторного слоя. В настройках вида данных можно отфильтровать данные, чтобы ограничить их отображение в виджете, отсортировать данные для отображения элементов списка в определенном порядке или указать ограничения на запись.
    • Сообщение об отсутствии данных - задайте сообщение, которое будет отображаться, если в виджете отсутствуют данные, например, когда пользователь применил фильтр.
    • Последнее обновление текста — если для источника данных включено Автоматическое обновление, при желании можно исключить надпись последнего обновления, которая указывает, когда данные были обновлены в приложении.
  • Расположение — определите расположение элементов в списке.
    • Компоновка—Отобразите элементы в строке, столбце или списке сетки.
    • Ширина и высота элемента—Укажите размер элементов списка.
      • Для строки списка определите ширину элемента списка, введя точное число пикселов в этом параметре или перетащив панель изменения размера на канве. Высота элемента определяется высотой виджета.
      • Для столбца списка определите высоту элемента списка, введя точное число пикселов в этом параметре или перетащив панель изменения размера на канве. Ширина элемента определяется шириной виджета.
      • Для табличного списка определите ширину и высоту элемента списка, введя точное число пикселов в каждом параметре или перетащив панель изменения размера на канве. Вы также можете определить ширину элемента списка в процентах от ширины виджета.
      Примечание:

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

    • Зафиксировать соотношение высоты/ширины — зафиксируйте соотношение ширины и высоты элементов списка при изменении размера виджета.
    • Выравнивание (доступно для списков сетки) — Выравнивание элементов списка по правому, левому краю или центру.
    • Горизонтальный или вертикальный интервал — задайте интервал между элементами списка в пикселах. Для табличного списка выберите оба.
    • Стиль страницы — определите, как загружать элементы списка, которые не помещаются на первой странице:
      • Прокрутка — при прокрутке списка вниз будут загружаться дополнительные элементы.
        • Полоса прокрутки — включите отображение полосы прокрутки.
        • Навигатор — включите элементы управления навигацией вверх и вниз или влево и вправо для прокрутки списка. Для Шаг задайте сколько элементов или строк будут прокручиваться при каждом щелчке на элементе управления навигацией.
      • Несколько страниц — разделите длинный список на несколько страниц с помощью разбиения на страницы. Для Элементов на странице задайте количество элементов, отображаемых на странице.
  • Состояния — обеспечивает визуальное представление для переключения между тремя состояниями элементов списка: По умолчанию (состояние по умолчанию для элемента без взаимодействия с пользователем), Наведение курсора (пользователь инициирует это состояние, наведя курсор на элемент списка) и Выбранное (пользователь выбирает элемент списка).
    Подсказка:

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

    • Фон — установите фон для элементов списка в их состоянии по умолчанию (без взаимодействия с пользователем). Выберите цвет заливки или изображение. Выбирая изображения, вы можете расположить его в пределах границ элемента списка с помощью опций  По размеру экранаЗаполнитьЦентрироватьЗамостить или  Растянуть. Если вы выберете  По размеру экрана, вокруг изображения появится цвет заливки фона.
    • Граница — задайте параметры границ элементов списка в их состоянии по умолчанию, выбрав цвет границы, стиль (например, пунктирный или точками) и ширину в пикселах.
    • Радиус границы — измените размер радиуса (в пикселах или процентах), чтобы задать форму углов элементов списка в их состоянии по умолчанию. Заблокируйте настройки для синхронизации радиуса для всех четырех углов.
    • Наведение курсора — укажите, изменяется ли внешний вид элемента списка при наведении на него указателя мыши. Когда включено состояние Наведение курсора, на панели конфигурации отображаются параметры с опциями изменения фона, границы и радиуса границы элемента списка, на который наведен курсор.
      • Рядом с первым элементом списка на канве появляется вкладка Наведение курсора, которая обновляется, чтобы показать, как этот элемент будет отображаться при наведении на него указателя мыши. Также вы можете добавлять или удалять виджеты, изменять их размер и перемещать существующие виджеты только для состояния Наведение курсора.
    • Выбранное — укажите, можно ли выбирать карточку элемента в списке и как изменится ее внешний вид, когда пользователи щелкнут, чтобы выбрать ее. Когда включено состояние Выбранное, на панели конфигурации отображаются параметры с опциями, позволяющими осуществлять множественный выбор и изменять фон, границу и радиус границы выбранного элемента списка. С помощью Режима выборки можно ограничить выборку только одним элементом (щелчок на другом элементе очищает текущую выборку) или разрешить пользователям выбирать несколько элементов одновременно (щелчок на другом элементе добавляет его в текущий набор выборки).
      • Вкладка Выбранное появляется рядом с первым элементом списка в канве и обновляется, чтобы показать, как этот элемент будет отображаться, когда его выберет пользователь. Также вы можете добавлять или удалять виджеты, изменять их размер и перемещать существующие виджеты только для состояния Выбранное.
  • Инструменты — предоставьте пользователям инструменты для взаимодействия со списком.
    • Поиск — предоставьте окно поиска в списке.
      • Выберите поля поиска — выберите одно или несколько полей для поиска.
      • Точное совпадение — ограничьте результаты поиска только теми записями, которые соответствуют поисковой фразе.
      • Подсказка - введите текст подсказки, который появляется в поле поиска, когда пользователь выполняет поиск подходящих значений.
    • Сортировка — предоставьте пользователям меню для сортировки списка по определенным полям и последовательности. Введите пользовательское имя для каждого пункта меню.
    • Фильтр — добавьте фильтры для взаимодействия пользователей со списком. Когда вы устанавливаете фильтры, этот виджет включает кнопку сброса, которая возвращает фильтры в исходное состояние.
    • Показать выборку — предоставьте пользователям возможность обновить список, чтобы в нем отображались только выбранные элементы.
    • Очистить выборку — предоставьте пользователям возможность очистить все выбранные элементы.
    Примечание:

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