Use dashboard widgets on custom pages

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 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 type variable (code: build).
   • Start of the period. A Date/time (Date) variable.
   • End of the period. A Date/time (Date) variable.
   • Responsible sales reps. A Users (Many) variable.

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 build) 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.

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 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.

Read more about the widget’s settings in Sales rep and sales manager dashboard widgets.

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:

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.

Was this helpful?

Thanks for your feedback!

Please specify why:

Recommendations did not help meArticle is hard to understandDidn`t answer my questionContent does not match the topicOther

How we can improve it?

YesNo

Please specify whyRecommendations did not help meArticle is hard to understandDidn`t answer my questionContent does not match the topicOther

Found a typo? Highlight the text, press ctrl + enter and notify us