# Report Designer Interface Learn about the report designer interface in ActiveReportsJS. ## Content The report designer allows you to create and modify report templates. Its user interface consists of several components described below. ## Toolbox The `Toolbox` enumerates available report items. By default, the toolbox shows icons, but you can expand it using the `hamburger` menu on the designer's top-left corner to see the report item names. To add a report item into a report, you can either double-click the corresponding item in the toolbox or drag-and-drop it into a specific report area. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch adding a report item in action DOC-SUMMARY-TAG-CLOSE ![AddingTablix](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingTablix.0aef49.gif) DOC-DETAILS-TAG-CLOSE ## Report Explorer The `Report Explorer` allows you to navigate the report structure and quickly select a report item or its part. To open the report explorer, click the `tree` icon beneath the [open toolbox](/activereportsjs/docs/v6.1/#toolbox) button on the designer's top-left corner. You could also pin the report explorer to keep it open using the corresponding button. Click an item in the hierarchical report structure to select it. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the report explorer in action DOC-SUMMARY-TAG-CLOSE ![ChartAddingAndConfiguring](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/ChartAddingAndConfiguring.4e7044.gif) DOC-DETAILS-TAG-CLOSE ## Group Editor The `Group Editor` can be used to navigate the [Tablix](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Tablix) structure and quickly modify it by adding or removing tablix members. To open the group editor, click the icon beneath the [open report explorer](/activereportsjs/docs/v6.1/#report-explorer) button on the designer's top-left corner. You could also pin the group editor to keep it open using the corresponding button. Check the [Tablix documentation](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Tablix#insert-adjacent-child-or-parent-groups) to learn more about using the group editor. ## Report Layers Editor The `Report Layers` editor can be used to add or remove `Report Layers` and modify their properties. Visit the [Report Layers](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-layers) page for more information. ## Toolbar The `Toolbar` located on the top of the report designer allows you to `cut`, `copy`, `paste` and `delete` a report item and also to configure its [text properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#text-properties). DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the toolbar in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/UsingToolbar.gif) DOC-DETAILS-TAG-CLOSE ## Report Layout The `Report Layout` is a visual surface in the form of a page that displays report items and allows to select and re-arrange them. You can use the UI element on the right-bottom corner of the report designer to configure various design-time properties of this page surface. * Use the `Grid` button to show or hide the grid. * Use the `Zoom out`, `Zoom in`, or `Zoom level` buttons to set the zoom level. * Use the drop-down menu of the magnet-like icon to set the `Grid Size`, and configure the following options. * `Snap to Grid` \- if it is enabled\, then report items' location and size will be aligned to the grid points\. * `Snap to Guides` \- if it is enabled\, then the report designer displays the guidelines that allow you to easily align the size and location of a report item with other report items\. ## Property Inspector The `Property inspector` is located on the right side of the report designer and consists of two components: the `Properties panel` and the `Data Panel`. ## Properties panel The `Properties panel` is opened by default and allows you to modify [report item properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties). The `Basic` mode only displays the essential properties, while the `Advanced mode` shows all the properties. You can use the drop-down menu on the right-bottom side of the report designer to switch between `Basic` and `Advanced` modes. On the left side of this drop-menu, you can find the switch that sets the default unit of measure for [Length units](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#length). DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch Basic and Advanced modes in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/PropertiesPanel.gif) DOC-DETAILS-TAG-CLOSE ## Data Panel The `Data panel` encapsulates several functions. * It allows configuring [Data Binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) * It can be used to add, remove, and re-arrange the order of [Report Parameters](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Parameters) * It displays the list of [global values](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions/references#global-values) that you can drag and drop into a report DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the data panel in action DOC-SUMMARY-TAG-CLOSE ![AddingDataSource](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/AddingDataSource.a68d56.gif) DOC-DETAILS-TAG-CLOSE ### Instant Visuals After configuring the [data binding](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) for your report, you can leverage the `Instant Visuals` feature to quickly create a data visualization for the selected data set: 1. Expand the Data Set by clicking the `Expand` button next to the dataset name: ![image](https://cdn.mescius.io/document-site-files/images/47f99832-236c-4f21-ab3d-46658c668072/image.ae8ab4.png) 2. Click the `Select Fields...` button, which will replace the `Expand` button: ![image](https://cdn.mescius.io/document-site-files/images/47f99832-236c-4f21-ab3d-46658c668072/image.4bd535.png) 3. Choose the fields you want to visualize, then click the `Explore` button that appears after selecting the fields. In the example below, two fields—`freight` and `shipCountry`—are selected: ![image](https://cdn.mescius.io/document-site-files/images/47f99832-236c-4f21-ab3d-46658c668072/image.c7a492.png) 4. The `Instant Visuals` panel will open, offering several pre-built visualizations such as chart, table, or pivot table. You can drag and drop any visualization into your report. Additionally, you can customize the visual's appearance by selecting a color scheme through the Palette icon located in the bottom-right corner of each visualization. In the example below, the Instant Visuals panel offers a `Bar Chart`, `Pie Chart`, and a `Table` summarizing freight by ship country: ![image](https://cdn.mescius.io/document-site-files/images/47f99832-236c-4f21-ab3d-46658c668072/image.cd540e.png) ## Expression editor The `Expression Editor` is the dialog that easily composes an [expression](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#expression). You can open it using the drop-down menu that appears if you click the box on an expression-based property editor's right boundary. The left side of the `expression editor` enumerates available constants, functions, and references. Visit the [expressions documentation](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions) for more information. Double click an item to add into a resulting expression that displays on the right side. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the Expression Editor in action DOC-SUMMARY-TAG-CLOSE ![UsingExpressionEditor](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/UsingExpressionEditor.3675b3.gif) DOC-DETAILS-TAG-CLOSE ## Filters editor The `Filters editor` is the interface that allows you to easily configure conditions for excluding the data to be displayed in a [data region](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions) or its part, such a [table group](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-grouping). The `Filters Editor` opens when you click the editor of the `Filters` property that shows either the `Add...` text if no filters have been added yet, or the `Edit...` text otherwise. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the Filters editor in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithTabularReport/AddingFilters.gif) DOC-DETAILS-TAG-CLOSE