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

> [HTML Version](status-widget.html)

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

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



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

- статически — указать фиксированные цвет, текст, значок и наличие фона. Тогда пользователь увидит определённый визуальный акцент, например, восклицательный знак рядом с важным полем;

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

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

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

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

- **Новый** — синий;

- **В работе** — жёлтый;

- **Готово** — зелёный.

(status-widget-1.png)

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

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

1. [Подготовить страницу и приложение](#prepare), с элементами которого пользователи будут работать на странице.

2. [Создать пользовательский виджет](#create) для отображения данных по заказу: название, статус и кнопка для запуска процесса.

3. Настроить отображение текущих статусов заказов с помощью [виджета Статус](#settings).

4. [Связать статусы](#bind), заданные в контексте приложения **Заказы**, с настройками виджета **Статус**.

5. [Вывести на страницу список заказов](#display) с их статусами.

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



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

- есть приложение **Заказы** с настроенными [статусами](360009920611.md), и на уровне этого приложения создан бизнес‑процесс **Обработка заказа**;

- добавлена страница **Список заказов**. 

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



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

Для этого:

1. В настройках раздела со страницей **Список заказов** [создайте пользовательский виджет](interface_settings.md#create-widget) с названием **Строка заказа**.

2. В открывшемся дизайнере интерфейсов перейдите на вкладку **Контекст** и создайте переменную со следующими параметрами:

- **Отображаемое имя\*** — **Заказ**;

- **Имя свойства\*** — `order`;

- **Тип\*** — **Приложение (один)**;

- **Приложение\*** — **Заказы**.

3. Перейдите на вкладку **Шаблон** и добавьте виджет **Колонки**, состоящий из трёх колонок:

- в первой колонке разместите виджет **Надпись**. В его настройках на вкладке **Основные** [создайте и привяжите](bind-field-to-widget-option.md#niew-field) к опции **Текст** контекстную переменную **Название** с кодом `name`. Это позволит получать и отображать название заказа;

- во вторую колонку добавьте виджет **Статус**. Рассмотрим его настройки подробнее в [следующем шаге](#settings);

- в третью колонку добавьте виджет **Кнопка**. В его настройках заполните поля:

	- **Надпись / подсказка\*** — **Обработать заказ**;

	- **Тип действия** — **Запустить процесс**;

	- **Бизнес-процесс\*** — **Обработка заказа**;

	- **Настроить входные параметры** —  чтобы экземпляр процесса запускался по определённому заказу, свяжите переменные процесса и виджета. В открывшемся окне в колонке с названием процесса укажите переменную процесса, в которой хранится приложение **Заказы**, а в колонке **Контекст** — переменную **Заказ** из контекста виджета, [созданную ранее](#order-variable).

4. Сохраните настройки пользовательского виджета **Строка заказа**.

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



1. Откройте настройки виджета **Статус**, добавленного на [предыдущем шаге](#add-status). 

2. На вкладке **Основные** заполните следующие поля:  
(status-widget-2.png)

- **Текст** — какое слово или фразу пользователь увидит в виджете. Можно указать определённый текст или установить связь с контекстной переменной, чтобы в виджете отображалось её текущее значение.  
  
В нашем примере настроим второй вариант. Для этого нажмите значок **(chain_icon.png)**, затем — **<Не установлено>** и выберите **+ Новое поле**. В открывшемся окне создайте переменную **Название статуса** с кодом `statusName`. В дальнейшем используем её в скрипте и передадим в эту переменную текущий статус заказа из контекста приложения **Заказы**;

- **Иконка** — выберите значок, отражающий визуальный акцент, который нужно передать с помощью виджета: восклицательный знак, шестерёнка и т. д. В нашем примере иконка не нужна; 

- **Тип\*** — определите наличие фона:

	- **Первичный** — виджет отображается в виде цветного блока с текстом и иконкой, если вы их задали. Для нашего примера выберем этот вариант;

	- **Вторичный** — отображаются только указанные текст и значок без заливки фона;

- **Цвет\*** — определите цвет для фона и значка. Можно выбрать следующие стандартные варианты, для которых по умолчанию заданы определённые цвета: 

	- **Успех** — зелёный;

	- **Предупреждение** — жёлтый;

	- **Ошибка** — красный;

	- **Информация** — синий

	- **Нейтральный** — серый;

	- **Дополнительный** — при выборе этой опции в отдельном поле **Дополнительный цвет** можно задать один из нестандартных цветов.  
  
Цвета могут отличаться от указанных выше, если вы изменили их с помощью [дизайн-токенов](design-tokens.md).  
  
Также доступна установки связи с контекстной переменной, чтобы через неё настроить динамическую смену цвета. Например, применять опцию **Успех**, когда элемент приложения находится в статусе **Готово**, а опцию **Информация** — в статусе **В работе**.  
  
В нашем примере используем второй вариант. Для этого нажмите значок **(chain_icon.png)**, затем — **<Не установлено>** и выберите **+ Новое поле**. В открывшемся окне сохраните переменную с созданными по умолчанию параметрами. На вкладке **Контекст** в дизайнере интерфейсов появится переменная **Цвет** (`color`) типа **Категория**. В дальнейшем используем её в скрипте, чтобы определить, какой цвет фона отобразить в виджете в зависимости от статуса заказа;

- **Размер\*** — определите размер виджета: **Маленький** или **Стандартный**. Оставим значение по умолчанию — **Стандартный**.



3. На вкладках **События** и **Системные** можно задать [системные настройки](common_widget_settings.md), одинаковые для всех виджетов. Они позволяют управлять видимостью виджетов и доступом к ним, настраивать их поведение при наведении курсора и т. д.  
  
В нашем примере эти настройки не требуются.

4. Сохраните настройки виджета **Статус**.

### Шаг 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. Вывести на страницу список заказов с их статусами



Теперь сформируем список заказов на основе созданного пользовательского виджета **Строка заказа**. Для этого настроим виджет [Динамический список](dynamic-list.md). Внутри него разместим настроенный на предыдущих шагах пользовательский виджет **Строка заказа**, с помощью которого получаем данные заказа.

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

1. Откройте страницу **Список заказов** в дизайнере интерфейсов.

2. Для работы виджета **Динамический список** требуется переменная типа **Таблица**, в которую будут записываться данные заказов. Создайте её на вкладке **Контекст** с одной колонкой типа **Приложение (один)**. В настройках этой колонки выберите приложение **Заказы**.

3. Перейдите на вкладку **Шаблон** и добавьте виджет **Динамический список**. В его настройках на вкладке **Основные** в поле **Списочные данные\*** выберите созданную переменную типа **Таблица**. Сохраните настройки.

4. Разместите внутри виджета **Динамический список** созданный ранее виджет **Строка заказа**. 

5. Свяжите виджет с колонкой служебной таблицы, чтобы данные из виджета **Строка заказа** передавались в виджет **Динамический список**. Для этого в настройках виджета **Строка заказа** на вкладке **Основные** в поле **Заказ** нажмите значок **(chain_icon.png)**, затем — **<Не установлено>** и выберите **Элемент списка** **Таблица -> Заказ**.   
  
Сохраните настройки виджета **Строка заказа**.

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;  
\}

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

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