side menu

Виджет «Статус»

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

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

 

В настройках виджета данные для отображения можно задать двумя способами:

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

Виджет можно разместить на боковой панели или в основной части формы или страницы. Для этого перетащите его с правой панели дизайнера интерфейсов на поле для моделирования или нажмите кнопку + Виджет.

Настроить визуальный акцент при помощи виджета «Статус»

Рассмотрим пример страницы с виджетом Статус. На ней пользователи могут увидеть, на какой стадии находится заказ и запустить процесс по его обработке. Для каждой из стадий задан свой цвет:

  • Новый — синий;
  • В работе — жёлтый;
  • Готово — зелёный.

status-widget-1

Для этого администратор системы создаёт скрипт, с помощью которого связывает виджет Статус с данными из контекста приложения Заказы. В результате, в виджете Статус автоматически будет отображаться текущая стадия заказа и присваиваться нужный цвет фона.

Настройки выполняются в несколько этапов:

  1. Подготовить страницу и приложение, с элементами которого пользователи будут работать на странице.
  2. Создать пользовательский виджет для отображения данных по заказу: название, статус и кнопка для запуска процесса.
  3. Настроить отображение текущих статусов заказов с помощью виджета Статус.
  4. Связать статусы, заданные в контексте приложения Заказы, с настройками виджета Статус.
  5. Вывести на страницу список заказов с их статусами.

Шаг 1. Подготовить страницу и приложение

 

В нашем примере виджет Статус настраивается в разделе Работа с заказами. Убедитесь, что в нём:

  • есть приложение Заказы с настроенными статусами, и на уровне этого приложения создан бизнес‑процесс Обработка заказа;
  • добавлена страница Список заказов.

Шаг 2. Создать пользовательский виджет

 

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

Для этого:

  1. В настройках раздела со страницей Список заказов создайте пользовательский виджет с названием Строка заказа.
  2. В открывшемся дизайнере интерфейсов перейдите на вкладку Контекст и создайте переменную со следующими параметрами:
  • Отображаемое имя* — Заказ;
  • Имя свойства* — order;
  • Тип* — Приложение (один);
  • Приложение* — Заказы.
  1. Перейдите на вкладку Шаблон и добавьте виджет Колонки, состоящий из трёх колонок:
  • в первой колонке разместите виджет Надпись. В его настройках на вкладке Основные создайте и привяжите к опции Текст контекстную переменную Название с кодом name. Это позволит получать и отображать название заказа;
  • во вторую колонку добавьте виджет Статус. Рассмотрим его настройки подробнее в следующем шаге;
  • в третью колонку добавьте виджет Кнопка. В его настройках заполните поля:
    • Надпись / подсказка* — Обработать заказ;
    • Тип действия — Запустить процесс;
    • Бизнес-процесс* — Обработка заказа;
    • Настроить входные параметры —  чтобы экземпляр процесса запускался по определённому заказу, свяжите переменные процесса и виджета. В открывшемся окне в колонке с названием процесса укажите переменную процесса, в которой хранится приложение Заказы, а в колонке Контекст — переменную Заказ из контекста виджета, созданную ранее.
  1. Сохраните настройки пользовательского виджета Строка заказа.

Шаг 3. Настроить виджет «Статус»

 

  1. Откройте настройки виджета Статус, добавленного на предыдущем шаге.
  2. На вкладке Основные заполните следующие поля:
    status-widget-2
  • Текст — какое слово или фразу пользователь увидит в виджете. Можно указать определённый текст или установить связь с контекстной переменной, чтобы в виджете отображалось её текущее значение.
     
    В нашем примере настроим второй вариант. Для этого нажмите значок chain_icon, затем — <Не установлено> и выберите + Новое поле. В открывшемся окне создайте переменную Название статуса с кодом statusName. В дальнейшем используем её в скрипте и передадим в эту переменную текущий статус заказа из контекста приложения Заказы;
  • Иконка — выберите значок, отражающий визуальный акцент, который нужно передать с помощью виджета: восклицательный знак, шестерёнка и т. д. В нашем примере иконка не нужна;
  • Тип* — определите наличие фона:
    • Первичный — виджет отображается в виде цветного блока с текстом и иконкой, если вы их задали. Для нашего примера выберем этот вариант;
    • Вторичный — отображаются только указанные текст и значок без заливки фона;
  • Цвет* — определите цвет для фона и значка. Можно выбрать следующие стандартные варианты, для которых по умолчанию заданы определённые цвета:
    • Успех — зелёный;
    • Предупреждение — жёлтый;
    • Ошибка — красный;
    • Информация — синий
    • Нейтральный — серый;
    • Дополнительный — при выборе этой опции в отдельном поле Дополнительный цвет можно задать один из нестандартных цветов.
       
      Также доступна установки связи с контекстной переменной, чтобы через неё настроить динамическую смену цвета. Например, применять опцию Успех, когда элемент приложения находится в статусе Готово, а опцию Информация — в статусе В работе.
       
      В нашем примере используем второй вариант. Для этого нажмите значок chain_icon, затем — <Не установлено> и выберите + Новое поле. В открывшемся окне сохраните переменную с созданными по умолчанию параметрами. На вкладке Контекст в дизайнере интерфейсов появится переменная Цвет (color) типа Категория. В дальнейшем используем её в скрипте, чтобы определить, какой цвет фона отобразить в виджете в зависимости от статуса заказа;
  • Размер* — определите размер виджета: Маленький или Стандартный. Оставим значение по умолчанию — Стандартный.

 

  1. На вкладках События и Системные можно задать системные настройки, одинаковые для всех виджетов. Они позволяют управлять видимостью виджетов и доступом к ним, настраивать их поведение при наведении курсора и т. д.
     
    В нашем примере эти настройки не требуются.
  2. Сохраните настройки виджета Статус.

Шаг 4. Связать статусы из приложения «Заказы» с настройками виджета «Статус»

Теперь напишите клиентский скрипт. С его помощью из приложения Заказы будут поступать данные заказа в пользовательский виджет Строка заказа, частью которого является виджет Статус. Эта информация записывается в созданные на предыдущих шагах контекстные переменные:

  • Название (name) — название заказа для виджета Надпись;
  • Название статуса (statusName) — статус заказа для параметра Текст в виджете Статус;
  • Цвет (color) — цвет для фона виджета Статус.

Для этого перейдите на вкладку Скрипты и добавьте следующий код:

async function onInit(): Promise<void> {
    if (!Context.data.order) {
        return;
    }
// Получение данных заказа
    const order = await Context.data.order.fetch();
    Context.data.name = order.data.__name; // присваивание названия заказа в контекстную переменную `name`
    Context.data.statusName = order.data.__status?.name ?? 'Неизвестно'; // если статуса нет, присваиваем значение `Неизвестно` 
    const statuses = order.fields.__status.variants; // получение статуса заказа
// Определение цвета виджета Статус в зависимости от текущего статуса заказа
    Context.data.color = order.data.__status?.code === statuses.done.code 
        ? Context.fields.color.variants.success
        : order.data.__status?.code === statuses.processing.code
        ? Context.fields.color.variants.warning
        : Context.fields.color.variants.info;
}

Чтобы пользовательский виджет Строка заказа, в состав которого входит виджет Статус, стал доступен для добавления на страницы и формы, нажмите Сохранить и Опубликовать на верхней панели дизайнера интерфейсов.

Шаг 5. Вывести на страницу список заказов с их статусами

 

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

Выполните следующие действия:

  1. Откройте страницу Список заказов в дизайнере интерфейсов.
  2. Для работы виджета Динамический список требуется переменная типа Таблица, в которую будут записываться данные заказов. Создайте её на вкладке Контекст с одной колонкой типа Приложение (один). В настройках этой колонки выберите приложение Заказы.
  3. Перейдите на вкладку Шаблон и добавьте виджет Динамический список. В его настройках на вкладке Основные в поле Списочные данные* выберите созданную переменную типа Таблица. Сохраните настройки.
  4. Разместите внутри виджета Динамический список созданный ранее виджет Строка заказа.
  5. Свяжите виджет с колонкой служебной таблицы, чтобы данные из виджета Строка заказа передавались в виджет Динамический список. Для этого в настройках виджета Строка заказа на вкладке Основные в поле Заказ нажмите значок chain_icon, затем — <Не установлено> и выберите Элемент списка Таблица -> Заказ.
     
    Сохраните настройки виджета Строка заказа.
  6. Чтобы заказы отображались в таблице при открытии страницы, перейдите на вкладку Скрипты и добавьте следующий код:

async function onInit () {
    // Получение всех элементов приложения Заказы
    const ordersListItems = await Namespace.app.zakazy.search().all();
 
        // Присваивание значения переменной типа Таблица, чтобы её можно было использовать
    if (!Context.data.table) {
        Context.data.table = Context.fields.table.create();
    }
 
       // Создание в таблице строки для каждого элемента приложения Заказы
    for (const ordersListItem of ordersListItems) {
        const row = Context.data.table.insert();
        row.order = ordersListItem;
    }
 
       // Присваивание значения таблице повторно, чтобы виджет обновился
    Context.data.table = Context.data.table;
}

  1. Чтобы настроенная страница стала доступна пользователям, на верхней панели дизайнера интерфейсов нажмите Сохранить и Опубликовать.

В результате на странице Список заказов отобразятся названия элементов приложения Заказы с их статусами. Для каждого статуса будет применяться свой цвет.

 

 

 

 

title_widget.html checkbox.html