Виджеты

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

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

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

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

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

1. Авторизуйтесь в роли администратора.
2. Войдите в раздел Виджеты.
   Откроется страница виджета с формой.
3. Выберите виджет и нажмите .
   Откроется страница редактирования виджета с формой.
   Виждет типа static. Язык simple
4. Заполните поля формы.
5. Заполните Название, идентификатор Код виджета, по необходимости добавьте css класс.
6. Выберите Тип виджета: список, карта, статический.
7. Выберите таблицу с данными для типов map и list.
8. Выберите язык верстки: простой (simple), реакт (react).
   Виждет типа 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>