---
title: "Nodes as building blocks for Custom Reports"
canonical: "https://support.appfire.com/space/RDD/1548747137/Nodes%20as%20building%20blocks%20for%20Custom%20Reports"
format: markdown
---
> Macro (aura-html)

### 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. | ```json
{
    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. | ```json
{
  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. | ```json
{
  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. | ```json
{ 
  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. | ```json
 {
  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. | ```json
{
  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. | ```json
{
  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. | ```json
{
  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 [https://appfire.atlassian.net/wiki/spaces/RDD/pages/1550352515](https://appfire.atlassian.net/wiki/spaces/RDD/pages/1550352515). | ```json
{
  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 by default. or POST
- `headers[]`: REST headers
- `queryParams[]`:
- `children[]` Child nodes |
| GraphQL | A precise alternative to REST that lets you make specific requests to GraphQL endpoints, for example, a Compass endpoint. | ```
{
  type: 'graphql',
  uri: 'datasource://compass',
  query: 'query GetComponents {\
    compass {\
      searchComponents(cloudId: \"{{$initial.cloudId}}\") {\
        ... on CompassSearchComponentConnection {\
          nodes {\
            component { id name description state typeId ownerId url slug }\
            link\
          }\
          totalCount\
        }\
        ... on QueryError {\
          message\
        }\
      }\
    }\
  }',
  path: '$.data.compass.searchComponents.nodes.component ',
  children: [
    { type: 'json' },
  }
}
``` | - `uri`: property to form the uri
- `path`: JSON path applied to the downloaded data
- `children[]` Child nodes |