Web report components

When you create a new web report in the Report Designer, the report has one or more components as determined by the template used to create the report. The report components define the content of the report. Currently, it is not possible to add or remove components, or to move or resize components. However, you can configure the component properties.

Each component has properties that determine the display and content of that component. For each component in the report, you must review these properties and configure them as needed. For example, Label components have display text, and Data Grid components have selected columns to display in the grid.

Components are configured on the Components panel of the Report Designer.

Example Components panel

To configure a component in a web report:

  1. Select the component that you want to configure. You can do either of the following to select the component:

    • Click on a component in the web report canvas to select it.

      OR

    • Use the drop-down list at the top of the Components tab to select a component. Components are listed by component name and type.

    The properties for the selected component display in the panel.

  2. Edit the component properties as needed. The specific properties depend on the component type. For more information, see the topic for the appropriate component:

    • Data Grid: Query data from the Axiom Software database and display it in a grid.
    • Hyperlink: Users can click the hyperlink text to open a web page or a document.
    • KPI Panel: Display key performance indicators (KPIs) in a series of automatically-formatted boxes.
    • Label: Display small amounts of user-defined text, such as for titles, descriptions, or contact information.

Adding and deleting components

Depending on the template you used to create the web report, it may already have components, or it may be a blank report. You can add components as needed, and you can delete components. For more information on the available components, see Web report components.

To add a component:

  1. Click the plus icon at the top of the panel to display the component toolbox.

    TBD

  2. Drag and drop a component from the menu to the desired location on the web report.

Once the component is in the report, you can move and resize it, and configure its properties. See the other sections in this topic for more information.

To delete a component:

  1. Select the component on the web report. When a component is selected, it displays with a blue box around it.
  2. Press the Delete button on your keyboard.

The component is deleted, as well as its configuration settings.

Moving and resizing components

Once a component has been added to the web report, you can move it to different locations, and you can resize it.

  • To move a component, select the component on the report and then drag and drop the component to the desired location. You can also use the arrow keys to move the component in the arrow direction (up, down, left, right).

  • To resize a component, select the component on the canvas and then hover your cursor over one of the selection handles on the corners and sides of the component, so that the cursor becomes a two-sided arrow. You can then resize the component to a larger or smaller size by dragging the selection handle.

    To maintain the current proportions when you resize, hold down the SHIFT key and drag any of the non-corner selection handles. For example, if you want to resize an image but maintain the current aspect ratio.

When you are using the Report Designer, gridlines display on the web report to help you size and position components in the report. Each minor line in the grid represents 10px and each major line in the grid represents 100px. The gridlines only display when the report is open for editing; they do not display when viewing the web report.

Alignment lines also display on the report when you drag a component close to alignment with the edge of another component. If you drop the component while an alignment line is displayed, the component will align with that edge of the other component.