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.

ActiveReportsJS Designer

The 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 - Explorer, Group Editor, and all report controls.
2 Explorer Provides an overview of the 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 the designer.
6 Open To open reports.
7 Save/Save As To save reports.
8 Preview Shows report preview.
9 Ribbon Tabs File - Contains options to create a new report, open a report, 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 the Chart data region is selected, the Chart tab is added to the ribbon.
10 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.
11 Properties Tab Displays the properties of the selected report element. If more than one element is selected, only their common properties are shown.
12 Data Tab 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.
13 Grid Click this option to show or hide the grid. Grids help in accurate placements of controls.
14 Snap To Grid Grid Size allows you to specify the width of the grid in inches (in) or cm (centimeters). When Snap to Grid is enabled, the selected control snaps to the grid when you move the control. When Snap to Guides is enabled, the selected control snaps to a vertical or horizontal line relative to the position of other controls. This is helpful for consistent spacing and alignment of controls.
15 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.
16 Ruler Units Lets you change the ruler measurements for a report to Centimeters (cm) or Inches (in) using ruler units.
17 Properties Mode Advanced Properties - This option provides a 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.

Keyboard Shortcuts

Keyboard Shortcut Action
Ctrl + A Selects all cells in the Table and Tablix controls. The List, Body, and Container controls select all controls in the current container.
Ctrl + N Creates a new report.
Ctrl + O Opens a report.
Ctrl + S Saves a report.
Ctrl + Shift + S Saves a copy of the report.
Ctrl + Z Undoes the last action.
Ctrl + Y Redoes the last action.
Ctrl + X Cuts text and controls.
Ctrl + C Copies text and controls.
Ctrl + V Pastes text and controls.
Ctrl + B Bolds the text.
Ctrl + I Italicize the text.
Selected Item/Control + Ctrl + Arrow Moves the selected item or control. The arrow key specifies the direction in which the selected item will move.
Del Deletes text and controls.
Left, Right, Up, Down arrow keys Moves the visible area of the page in the corresponding direction. In the Table and Tablix controls, navigates between the cells. When controls inside List and Container controls and in the Body of the report are selected, arrow keys allow moving controls by grid-size.
Tab Navigates in the forward direction between the cells in the Table and Tablix controls. When controls inside List and Container controls and in the Body of the report are selected, the Tab key switches between controls in the forward direction.
Shift + Tab Navigates in the backward direction between the cells in the Table and Tablix controls. When controls inside List and Container controls and in the Body of the report are selected, Shift + Tab switches between controls in the backward direction.
Selected Item/Control + Shift + Arrow Resizes the selected item or control.