Designer Interface Elements

ActiveReportsJS Designer provides a rich interface that lets you create report layouts and edit them at design time. The modern interface design helps report authors to quickly understand, learn and create reusable reports.

Following table describes different elements of ActiveReportsJS designer:

Element Number Element Description
1 Menu Button Displays a detailed view for all the options in the panel.
2 Explorer Provides an overview on hierarchy of added report items. It displays the current selection and also allows selecting other report items.
3 Group Editor Shows Column and Row hierarchies of Tablix members for currently selected Tablix or Table data region.
4 Report Controls Report controls and data regions that you can use when creating a report.
5 Undo/Redo To undo or redo actions on designer.
6 Save/Save As To save reports.
7 Preview Shows report preview.
8 Ribbon Tabs • File - Contains options to create, open or save reports. It also contains the version information in the About option.
• Home - Consists of report editing options such as cut, copy, paste, and delete. It also provides shortcuts for text formatting such as font, font size, font color, and horizontal and vertical text alignments.
• Report - Contains options to add, delete, or move pages (in Page report) and add or remove header and footer (RDL report), and change report themes.
• Selected control - Adds a tab to display properties of the selected control. For example, when Chart data region is selected, Chart tab is added to the ribbon.
9 Report Design Surface The Report Design Surface is where you can drag and drop entities and attributes to create tables and charts and other controls to design your reports.
10 Properties Displays the properties of the selected report element. If more than one element is selected, only their common properties are shown.
11 Data Contains options to manage data sets and parameters. It also displays common values such as current date and time, page number, total pages, and more.
12 Grid Click this option to show or hide the grid. Grids help in accurate placements of controls.
13 Snap to Grid With the Snap to grid enabled, the selected control snaps to the grid at set locations. When the Snap to Guides option is enabled, the selected control snaps to the vertical or horizontal lines relative to the position of other controls. This is helpful for consistent spacing and alignment of controls.
14 Zoom Support Using the zoom in (+) and zoom out (-) buttons, you can change the zoom level of the design area or use shortcuts [Ctrl] + [+] to zoom in and [Ctrl] + [-] to zoom out.
15 Ruler Units Lets you change the ruler measurements for a report to Centimeters (cm) or Inches (in) using ruler units.
16 Properties Mode • Advanced Properties – This option provides number of advanced formatting properties for different report controls available in the designer.
• Basic Properties – This option provides minimal and basic formatting properties for the report controls.