Report Editor Techniques

Highlighting Sections

To highlight the contours of each individual section in your report:

  • Click anywhere in the report margin (white space).
  • Hover the mouse slowly over each section.

In this example we have created three sections and the middle section (containing a table) has been highlighted.

830

Highlighting Elements/Charts

To highlight the contours of individual elements and charts within a specific section:

  • Double click on any element/chart in the section (or click once on a section click again on an element/chart within that section).
  • Hover the mouse slowly over the various elements/charts in the section.

Note that this feature works for each section independently. So for each section, you need to select a single element/chart in a section and then you can view the various elements/charts in that section only.

In this example, a single Text element has been highlighted.

1035

Splitting Sections Vertically

In general, each section consists of a single column. But in cases where you want to arrange two elements in side-by-side fashion, you can use the Column element to split a section vertically.

In this example, the first section has a single column while the second section has been split into two columns.

959

Splitting Sections Horizontally

In general, each section consists of a single row. But if you want to arrange two layered elements, you can use the Row element to split a section horizontally.

In this example the first section consists of a single row, while the second section has been split into two rows.

963

NOTE: A simpler way to create two layered elements is to simply enter two sections in your report (because sections are arranged in horizontal layers).

About Static/Dynamic Values

As you begin designing reports, you may notice that many Frontegg objects contain static/dynamic data type switches within the CONTENT submenu.

  • Static data values can be edited locally within the various Frontegg menus.
  • Dynamic data values are generated separately for each report during integration.

Example of Static Data

This sample pie chart has its Data Type set to Static. You can use the JSON chart data to experiment with the pie chart appearance. For example, if you change the Vector 1 value from 40 to 100, the pie chart image will update interactively.

870

Example of Dynamic Data

Now let's take a look at what happens when we change the Data Type from static to dynamic. First of all, the default Field Name donut_chart_3 appears. You can change the Field Name if desired.

In addition, the purple code displays the dynamic values related to the pie chart. These values are needed when generating the report within an API or application environment.

864

Related Topics

For more information on using dynamic values in reports, see Viewing Data Structure.

As you create/edit a report, Frontegg will switch interactively between insert mode and edit mode, depending on what object you select in the report.

Insert Mode

To work in insert mode, click anywhere in the report margins (white space). When in Insert Mode, you can use the Elements, Charts and Components submenus to drag items into your report.

1129

Edit Mode

To work in edit mode, click once on a section to edit it, or click twice on any element/chart to edit it. When in Edit Mode, you can use the CONFIGURATION and DESIGN submenus to edit the selected selection, element or chart.

In this example, a Table element has been selected.

1129

Global Report Parameters

Click on the STYLE menu to set global report parameters including:

  • Report Width
  • Background Color
  • Primary Color
  • Secondary Color
  • Text Color
  • Spacing

Local Report Parameters

In cases where the same parameter appears in the STYLE menu for general report parameters and in the DESIGN menu for a specific element/chart, the local setting will override the global setting for that particular element/chart. One common example is text color, where the global text color serves as the default, unless changed for a specific element/chart.

Whenever you select an element or chart, a mini Toolbar becomes active, as shown below.

494
COMMANDDESCRIPTION
SELECT PARENTMove up in the selection tree (within a single section).
MOVEChange location of an element/chart.
COPYDuplicate an element/chart.
DELETERemove an element/chart.