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.
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.
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.
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.
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.
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.
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.
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.
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.
COMMAND | DESCRIPTION |
---|---|
SELECT PARENT | Move up in the selection tree (within a single section). |
MOVE | Change location of an element/chart. |
COPY | Duplicate an element/chart. |
DELETE | Remove an element/chart. |
Updated 4 months ago