/
Nodes as Building Blocks for Custom Reports

Nodes as Building Blocks for Custom Reports

Owned by Jeff Gleeson
Last updated: Dec 13, 2024 by Juan Gregorio Regalado
3 min read

The report editor lets you design and structure reports tailored to your needs. This page explains the existing nodes: The foundational building blocks of Custom Reports.

Find the technical documentation of the nodes here.

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

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. See Configure a REST API datasource for Custom Reports.

{ 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

Related content

Need support? Create a request with our support team.

Copyright © 2005 - 2025 Appfire | All rights reserved.