ActiveReports 18 .NET Edition
Report Authors: Designer Components / WebDesigner
In This Topic
    WebDesigner
    In This Topic

    ActiveReports WebDesigner is based on the HTML5/JS technology stack. The designer is an integrated reporting application that comes packed with a powerful yet intuitive user interface that facilitates users to create summarized and structured reports anywhere on any device. The designer supports all types of reports that a desktop designer supports - RDLX, RDLX Dashboard, Page, and Section.

    WebDesigner Interface

    The UI of WebDesigner Interface consists of the following regions:


    WebDesigner Interface

    Ribbon Tabs

    The ribbon on the designer window consists of the following tabs:
    Ribbon tabs

    Menu Button

    The Menu on the designer window contains the explorer, group editor, layers and report controls that assist in designing reports. You can preview the report by clicking on the Preview button.

    Properties tab

    The Properties tab is located on the right-hand side of the app. Click the tab to view the Properties panel, which displays the properties of the designer or the selected report element. If more than one element is selected, only their common properties are shown.
    Properties tab

    Data tab

    Data tab is located next to the properties tab. It manages the data sources, data sets, and parameters. It also displays common values such as the current date and time, page number, total pages, and more.

    Style Sheet tab

    It contains styles, which are a set of properties that you can apply to selected controls in your reports to quickly change their appearance. In EUD you must open report’s properties dialog to edit the style sheet. In WebDesigner we have a separate tab for that.

    Note: Style Sheet tab is available only for the Section report.

    Designer Buttons
    Designer Buttons

    Preview

    When the user clicks the Preview button, a Preview window opens as shown below:

    Preview the report

    The Preview toolbar consists of the following elements:

    Keyboard Shortcuts

    The following shortcuts are available in the WebDesigner.

    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 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.
    In the Chart Control, arrow keys move data-fields and category-fields.
    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, 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.