Skip to content

Виджеты

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

Оглавление

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

  1. Авторизуйтесь в роли администратора.
  2. Войдите в раздел Виджеты.

widget_1

  1. Нажмите Добавить виджет.

Откроется страница виджета с формой.

widget_4

  1. Заполните поля формы.
  2. Нажмите Создать.

Виджет создан.

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

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

  1. Авторизуйтесь в роли администратора.
  2. Войдите в раздел Виджеты.

Откроется страница виджета с формой.

  1. Выберите виджет и нажмите pencil

Откроется страница редактирования виджета с формой.

widget_2 Виждет типа static. Язык simple

  1. Заполните поля формы.

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

  1. Заполните Название, идентификатор Код виджета, по необходимости добавьте css класс.

  2. Выберите Тип виджета:

  3. список,

  4. карта,

  5. статический.

  6. Выберите таблицу с данными для типов map и list.

Важно: В случае выбора таблицы для типа list в превью видна только первая строка таблицы. Под превью отображаются подряд названия всех полей таблицы. Специальными вставками вида {NAME} можно добавить коды столбцов из таблицы данных.

  1. Выберите язык верстки:

  2. простой (simple),

  3. реакт (react).

widget_6 Виждет типа list. Язык simple

  1. Заполните поле с кодом, используя в случае простой верстки специальные вставки вида {NAME}.

Важно: Вводимые значения в поле кода будут отображаться ниже на превью. В типе map введенные в код данные отобразятся на превью карты в виде информационного указателя.

  1. Нажмите Сохранить.

    Изменения сохранены.

Пример шаблона виджета типa 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>