Create application with Reports Config Widget


The Reports Config widget is a UI that simplifies the creation, modification, and extraction of Reports within the Reporting Platform. This tutorial will guide you through some basic steps and provide references to set up a viewer application for Reports Config Widget.

By the end of this walk-through, you will be able to have an iTwin viewer with quick access to all your reports.


Skill level:



10 minutes


This tutorial assumes that you already have:

Permissions and Scopes

The SPA client used by your iTwin viewer must have these additional scopes:

  • insights:read
  • insights:modify
  • projects:read

Do not forget to put these values within the IMJS_AUTH_CLIENT_SCOPES environment variable.

In addition, users must have the imodels_read and imodels_write permissions assigned at either the Project or iModel level. Further instruction on how to create roles and assign permissions can be found in the iTwin Platform Projects API documentation.

insights:read insights:modify projects:read

Adding the Reports Config Widget

The first step required by the widget is to initialize it before making use of the provider. This will initialize the widget’s localization.

Next, you must add the ReportsConfigProvider to the list of uiProviders within the viewer component. More details on adding uiProviders can be shown in this tutorial.

Congratulations, you should now have the Reports Config widget within your iTwin Viewer application.

useEffect(() => {
  uiProviders={[new ReportsConfigProvider()]}

More resources that you may like

A guide on how to create the grouping and mapping required by your reports.
This is the official documentation of Reporting API.
The quickest way to get access to a cloud hosted iModel is by creating an iModel seeded with Bentley provided sample data.
Bentley provided sample of a House for test iModel creation.
Describes interface of objects that want to provide UI component to the running IModelApp.
Global singleton that connects the user interface with the iTwin.js services.