Custom Report structure

The report editor lets you design and structure reports tailored to your needs. This page explains the different parts of a custom report.

Structure of a Custom Report

The report is organized as a hierarchical tree of nodes. Each node is enclosed between curly braces {} and classified by type.

Node Types	Description	Example node	Explanation
Text	Allows you to display plain text with customizable styles. For example, you can adjust: font size, color, and alignment.	{ type: 'text', text: 'Welcome to Custom Reports!', style: { fontSize: 16, marginBottom: 20, lineHeight: 1.5, color: '#555', }	`fontSize`: sets the size of the font `text`: enter the text here `marginBottom`: sets the bottom margin of an element `lineHeight`: specifies the height of a line `color`: sets the color of the text
Link	Allows you to create clickable links. Customize the URL and the text.	{ type: 'link', href: 'https://example.com', style: { color: '#0052CC', } { type: 'text', text: 'Click here for example',	`href`: the url that the link is pointed at `color`: sets the link color
SVG	Displays scalable vector graphics. Adjust the size, colors, and other properties to create custom visualizations.	{ type: 'svg', src: '/app/assets/images/illustrations/appfire-icon.svg', style: { 'path.fill': '#000', 'path.stroke': '#000', }	`src`: path to the svg location `class`: CSS classes from provided stylesheet or stylesheet node `style[]`: Styles defined in JS-CSS style
Image	Displays images from a URL. You can adjust the size and add alt text for accessibility.	{ type: 'image', src: 'https://example.com/{id}.jpg', alt: 'img {id}', style: { width: 100 } }	`src`: Interpolated property for the image source `alt`: alt-text to improve accessibility `class`: CSS classes from provided stylesheet
Progress	Displays progress bars. You can customize the appearance and behavior to show completion status.	{ type: 'progress', class: 'card', value: '60', }	`variant`: circular, linear `value`: Value to display `minValue`: Minimum progress value `maxValue`: Maximum progress value `background`: Show background `backgroundPadding`: specifies the origin position of a background image
Chart	Displays data in graphical form. You can create bar, line, and area charts to visualize information. The PieChart node is also available for proportion-based data.	{ type: 'chart', options: { chart: { width: 300, height: 200 }, }, data: { categories: '$.categories', series: [ { chartType: 'bar', name: 'Sales', stroke: '#000', fill: '#ffb840', label: true, data: '$.investments', }, { chartType: 'line', name: 'Investments', stroke: '#000', fill: '#3f840f', label: true, data: '$.investments', }, ], }, }	`options[]`: `chart[]`: `cartesianGrid[]`: `legend[]`: `xAxis[]`: `yAxis[]`: `tooltip[]`: `data[]`: `categories`: List of categories for the x axis `series`: `chartType` `name` `stroke` `fill` `label` `data`
Table	Allow for structured data display. Customize columns and rows to fit your needs.	{ type: 'table', columns: [ { header: 'Name', accessor: 'name' }, { header: 'Surname', accessor: 'surname' }, // { header: 'Age', accessor: 'age', cell: { type: 'text', text: '{age} years' } }, { header: 'Age in hours', accessor: 'age', cell: [{ type: 'text', text: '{age * 365 * 24} hours' }] }, ], }	`class`: CSS classes from provided stylesheet or stylesheet node `style[]`: Styles defined in JS-CSS style `path`: JSON path for the selection, it must be an array `columns[]`: `header`: String representing the title header in the table `accessor`: JSON path expression to access the data in EACH row `cell[]`: Child nodes, customizing the body of the cell to any structure
List	Lists display items from an array. Customize the appearance and layout to suit your report.	{ type: 'list', path: '$', item: { type: 'text', style: { display: 'block', margin: 4, padding: 4, border: '1px dashed red', borderRadius: 5, }, text: 'List item: {$}', }	`item[]`: Child nodes `class`: CSS classes from provided stylesheet or stylesheet node `style[]`: Styles defined in JS-CSS style
REST	Fetches data from an API. You can specify the URL and customize the data display. You can also create datasources to reuse configurations or to protect credentials. Seehttps://appfire.atlassian.net/wiki/spaces/RDD/pages/1528825149/Getting+started+with+Custom+Reports#Add-Datasource	{ type: 'rest', uri: 'https://pokeapi.co/api/v2/pokemon?limit=5', children: [ { type: 'list', path: '$.results', style: { display: 'block', margin: 4, padding: 4, border: '1px dashed red', borderRadius: 5, }, item: [ { type: 'view', children: [ { type: 'text', text: '{name}', }, ], }, ], }	`uri`: property to form the uri `refresh`: Active mode: refresh on any change or wait for submission `id`: rest id `path`: JSON path applied to the downloaded data `method`: Rest method to use: GET is the default `headers[]`: REST headers `queryParams[]`: `children[]` Child nodes