# Использование виджетов для дэшбордов на пользовательских страницах

> [HTML Version](use-dashboards-widgets.html)

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

- поля, которые связываются с определёнными переменными, например, созданными в контексте виджета. Значения этих переменных можно задавать вручную или при помощи скрипта;

- опции, которые определяют внешний вид построенных графиков и списков и задаются вручную.

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

1. [Создайте страницу](360009924451.md) и укажите название, например, **Бухгалтерия**.

2. Нажмите на значок шестерёнки справа от названия страницы и выберите пункт **Конструктор**.

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

- **Создать отчёт** — переменная типа [Выбор «да/нет»](360009707032.md#yes_no) с кодом \[OBJECT\];

- **Начало периода** — переменная типа [Дата/время](360009707032.md#date-time) с включённой опцией **Дата**;

- **Конец периода** — переменная типа [Дата/время](360009707032.md#date-time) с включённой опцией **Дата**;

- **Ответственные** — переменная типа [Пользователи](360009707032.md#users) с включённой опцией **Несколько**.

**(use-crm-widgets-1.png)**

4. Перейдите на вкладку **Шаблон**. На панели справа выберите вкладку **Свойства** и добавьте** **на поле для моделирования переменные **Начало периода**, **Конец периода**, **Ответственные**. Значения этих переменных будут задаваться вручную пользователем на странице. 

5. Добавьте на поле для моделирования виджет **Кнопка**. В настройках укажите название кнопки, в поле **Тип действия** выберите **Скрипт**. 

**(use-crm-widgets-2.png)**

6. В поле **Событие при нажатии** добавьте скрипт, в котором используется переменная **Создать отчёт** с кодом \[OBJECT\], добавленная в контекст виджета на _шаге 3_: 

````
async function build (): Promise<void> \{  
    Context.data.build = \!Context.data.build;  
\}

````


7. Вынесите на поле для моделирования виджет **Распределение Лидов/Сделок по сотрудникам**.

8. В настройках виджета свяжите опции **Построить график**, **Пользователи**, **Начало периода** и **Конец периода** с переменными, добавленными в контекст виджета. Для этого нажмите на значок (chain_icon.png) справа от названия поля, затем на ссылку **<Не установлено>**. В открывшемся списке выберите соответствующее свойство.

9. Задайте другие параметры виджета, например, в поле **Приложение\*** укажите приложение **Сделки**, в поле **Воронки** — отметьте все созданные для сделок воронки. При таких настройках в отчёте будут показываться все назначенные на выбранных пользователей сделки из всех воронок.

**(use-crm-widgets-3.png)**

Подробнее о полях виджета читайте в статье [«Виджеты дэшбордов руководителя и сотрудника отдела продаж»](crm-dashboards-widgets.md#assigned-items).

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

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

Настроенная страница может выглядеть следующим образом: 

**(use-crm-widgets-4.png)**

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