Elements of Web Designer

ActiveReports Web Designer is based on HTML5/JS technology stack. The designer is an integrated reporting application and comes packed with a powerful yet intuitive user interface that facilitates users in creating summarized and structured reports anywhere on any device.

Web Designer Interface Elements

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. It is visible on the Design tab and the Report tab. See below for more information.

Ribbon tabs: The ribbon on the designer window consists of following tabs:
- Menu: Contains report explorer, group editor, and report controls that assist in designing reports. You can also find Preview button to preview reports.
  - Report Explorer: Provides an overview on hierarchy of added report items. It displays the current selection and also allows selecting other report items
  - Group Editor: Shows Column and Row hierarchies of Tablix members for currently selected Tablix or Table data region.
- File: Contains options to create, open or save reports. It also contains the version information in About option and help documentation link in Help 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.
- Insert: Contains controls that can be dragged and dropped onto the design area.
- 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.
- Properties: Displays the properties of the selected report element. If more than one element is selected, only their common properties are shown.
- 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.
Designer Buttons: Designer buttons consist of options to change appearance and behavior of the design area:
- Grid: Click this option to show or hide the grid. Grids help in accurate placements of controls.
- Snap to Grid and Snap to Guides: When Snap to Grid option is enabled, the selected control snaps to the grid at set locations. When 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.
Zoom support: Using the zoom in (+) and zoom out (-) buttons, you can change the zoom level of the design area. You can also use shortcuts [Ctrl] + [+] to zoom in and [Ctrl] + [-] to zoom out.
Ruler Units: Lets you change the ruler measurements for a report to Centimeters (cm) or Inches (in) using ruler units.

The following shortcuts are available in the Web Designer.

Keyboard Shortcut	Action
Ctrl + A	Selects all cells in the Table and Tablix controls. In the List, Body and Container controls, selects all controls in the current container.
Ctrl + E	Opens the New Report page.
Ctrl + O	Opens the Open Report page.
Ctrl + S	Opens the Save Report page.
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.
Del	Deletes text and controls.
Left, Right, Up, Down	Moves the visible area of the page in the corresponding direction. In the Table and Tablix controls, navigates between the cells. In the List, Body and Container controls, moves controls by the grid-size. In the Chart Control, moves data-fields, series-fields and category-fields.
Tab	Navigates in the forward direction between the cells in the Table and Tablix controls. In the List, Body and Container controls, switches between controls in the forward direction.
Shift + Tab	Navigates in the backward direction between the cells in the Table and Tablix controls. In the List, Body and Container controls, switches between controls in the backward direction.