Skip to content

Виджеты

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

Оглавление

Добавление виджета

  1. Авторизуйтесь в роли администратора.
  2. Войдите в раздел Виджеты.
    widget_1
  3. Нажмите Добавить виджет.
    Откроется страница виджета с формой.
    widget_4
  4. Заполните поля формы.
  5. Нажмите Создать.
    Виджет создан.

Важно: Подробное заполнение полей формы описано в разделе ниже.

Редактирование виджета

  1. Авторизуйтесь в роли администратора.
  2. Войдите в раздел Виджеты.
    Откроется страница виджета с формой.
  3. Выберите виджет и нажмите pencil.
    Откроется страница редактирования виджета с формой.
    widget_2 Виждет типа static. Язык simple
  4. Заполните поля формы.
  5. Заполните Название, идентификатор Код виджета, по необходимости добавьте css класс.
  6. Выберите Тип виджета: список, карта, статический.
  7. Выберите таблицу с данными для типов map и list.
  8. Выберите язык верстки: простой (simple), реакт (react).
    widget_6 Виждет типа list. Язык simple
  9. Заполните поле с кодом, используя в случае простой верстки специальные вставки вида {NAME}.
  10. Нажмите Сохранить.
    Изменения сохранены.

Важно: 1) Название — задается произвольно. Используется для идентификации виджета в интерфейсе. 2) Код — технический идентификатор виджета. Используется для внедрения одного виджета в другой. Допустимы только латинские символы. Не должен начинаться с цифры. Имеет низкий приоритет при обработке. 3) CSS class — значение класса, применяемого для стилизации HTML-элементов. Указывается латинскими символами. Позволяет применять одинаковые стили к группе элементов. 4) Тип — предустановленный вид виджета. Доступны три варианта: static — отображение неизменяемой информации. Не требует обновления до изменения самих данных, list — отображение информации в виде списка (например, список статей, задач, контактов). Поддерживает загрузку данных из таблиц, map — отображение и взаимодействие с географическими данными. 5) Язык — инструмент используемый для разработки виджета. Возможны два варианта: simple (базовая HTML-разметка) и react(используется библиотека React.js для создания динамичных и интерактивных интерфейсов со сложной логикой). 6) В случае выбора таблицы для типа list в превью видна только первая строка таблицы. Под превью отображаются подряд названия всех полей таблицы. Специальными вставками вида {NAME} можно добавить коды столбцов из таблицы данных. 7) Вводимые значения в поле кода будут отображаться ниже на превью. В типе map введенные в код данные отобразятся на превью карты в виде информационного указателя.

Пример шаблона виджета тип list

<div style="padding: 12px 16px; max-width: 240px; font-family: Arial, sans-serif;">
  <div style="font-weight: bold; margin-bottom: 8px;">{name}</div>
  <div style="color: #666; font-size: 14px; line-height: 1.4;">{cost}</div>

  <div style="color: #666; font-size: 14px; line-height: 1.4;">{description}</div>
</div>