# Use dashboard widgets on custom pages

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

As dashboard widgets display charts and lists, they need input data for the reports to be generated. To pass this data, use the two kinds of parameters in the widgets’ settings:

- Fields linked with variables. These variables can be created in the widget’s context. You can set their values manually or using scripts.

- Options that determine what the generated reports and lists will look like. They are configured manually.

Let’s consider an example of how statistics from dashboard widgets can be displayed on custom pages. We’ll set up a page where the accounting department can view how deals are allocated among sales reps. To do that:

1. [Create a page](360009924451.md) and enter its name, for example, **Accounting**.

2. Click the gear icon next to the page’s name and select **Widget Builder**.

3. In the interface designer, go to the **Context** tab and create the following variables:

	- **Generate the report**. A [Yes/No switch](360009707032.md#yes-no-switch) type variable (code: \[OBJECT\]).

	- **Start of the period**. A [Date/time](360009707032.md#date-time) (**Date**) variable.

	- **End of the period**. A [Date/time](360009707032.md#date-time) (**Date**) variable.

	- **Responsible sales reps**. A [Users](360009707032.md#users) (**Many**) variable.

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

4. Go to the **Template** tab. On the right-side panel, switch to **Properties** and add the **Start of the period**,** End of the period**, and **Responsible sales reps **fields** **to the modeling canvas. The user will set the values of these properties manually on the report’s page.

5. Add the **Button** widget to the modeling canvas. In the widget’s settings, specify the button’s name. In the **Action type** field, select **Run a script**.

6. In the **On click handler** field, add a script. It will use the **Generate the report **variable (code \[OBJECT\]) that we added to the widget’s context in step 3.

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

7. ````
Save the settings of the **Button** widget.

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

8. Drag the **Allocation of Leads/Deals by Employee** widget to the modeling canvas.

9. In the widget’s settings, link the **Build chart\***, **Users**, **Start of the period**, and **End of the period** fields with the variables added to the context. To do that, click the **(link-icon.png) **icon to the right of a field and select **<Not defined>**. In the window that opens, select the corresponding variable.

10. Set up other parameters of the widget. For example, select **Deals** in the **App\*** field and check all sales pipelines in the **Pipelines** field. With these settings, all deals from all pipelines that are assigned to the specified users will be included in the report.

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

Read more about the widget’s settings in [Sales rep and sales manager dashboard widgets](crm-dashboards-widgets.md#assigned-items).

11. Save the widget’s settings.

12. To make the page available to users, click **Save** and **Publish** in the interface designer toolbar.

The page you configure may look like this:

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

Users can specify the dates and the employees in the fields at the top of the page and click **Generate Report**. The widget on the page displays statistics on the number of deals in each status of the pipeline assigned to the selected sales reps.