Блог

Виджеты в SimpleOne

Развитие визуального программирования сильно упростило разработку программного обеспечения. Пропала необходимость описывать код визуальных элементов, а в случае с виджетами — ещё и логику их взаимодействия с пользователем.

Виджет — это небольшое самостоятельное приложение, которое взаимодействует с логикой сервера и клиента. Разработчик создаёт виджет, добавляет его в библиотеку элементов управления и в дальнейшем использует при проектировании пользовательского интерфейса (UI). Также виджеты могут применять пользователи и администраторы для кастомизации платформ с подходами Pro Code и Low Code.

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

Для настройки виджета важно понимать его структуру и принцип взаимодействия клиента с сервером.

Шаблон виджета определяет его внешний вид на портале, он сформирован на HTML и SimpleTags. Именно в шаблоне прописаны элементы виджета, с помощью которых пользователь вводит данные и взаимодействует с системой.

Серверный скрипт — это JS-скрипт, который запускается на сервере. Он обрабатывает данные, полученные от клиента, и отправляет результат ему обратно.

Клиентский скрипт — это JS-скрипт, который запускается на стороне клиента. Он получает данные от сервера, обрабатывает их и загружает в шаблон виджета для визуализации. Также клиентский скрипт передаёт данные клиента на сервер для их обработки серверным скриптом.

Параметры виджета — заданные значения, которые передаются клиентскому приложению, например параметры вёрстки, такие как цвет рамки, вложенность меню и другие.

Схема взаимодействия виджета, клиента и сервера
Схема взаимодействия виджета, клиента и сервера

Благодаря наличию в SimpleOne инструментов Low Code создать новый виджет и разместить его на страницах портала может любой администратор платформы. Для этого необходимо зайти в панель управления, перейти в раздел «Виджеты» и создать новый, указав следующие параметры:

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

После того как виджет создан, администратор может разместить его на любой странице портала. Для этого необходимо перейти в раздел «Экземпляры виджетов» и заполнить форму, указав:

  • виджет, для которого настраивается отображение;
  • поле — элемент портала, где будет размещён виджет;
  • порядок размещения виджета на странице портала;
  • схему опций — параметры, которые предопределены для виджета.
Настройка размещения виджета на странице портала
Настройка размещения виджета на странице портала

Преимущества виджетов

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

Примеры виджетов

Виджеты на странице портала
Виджеты на странице портала

С помощью виджетов можно сформировать все элементы страницы портала. На приведённом примере каждый отображаемый элемент — это отдельный виджет, взаимодействующий с пользователем.

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

Кому полезны виджеты

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

Для разработчиков виджеты также могут быть полезны, они позволяют создавать мини-приложения, выполняющие определённую функцию. Разместить такую функциональную возможность можно в несколько кликов мышки, причём заранее преднастроенный виджет устанавливается на сайт и размещается на странице методом перетаскивания, что полностью вписывается в современный стандарт визуальной настройки No Code.

Пользователь, в свою очередь, получает удобный визуальный интерфейс, с помощью которого может решать свои ежедневные задачи. Виджеты повышают уровень пользовательского опыта (UX).

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

Пользуясь настоящим сайтом, вы даете свое согласие на использование файлов cookies