site_logo

Виджеты в SimpleOne

Инструменты разработки
Функциональность

Обновлено: 12 сентября 2024

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

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

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

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

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

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

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

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

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

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

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

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

    Настройка виджета

    Настройка серверного и клиентского скриптов виджета

    Настройка серверного и клиентского скриптов виджета

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

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

    Настройка размещения виджета на странице портала

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

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

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

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

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

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

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

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

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

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

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

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