Cloud Migration Resources
Planning a Cloud migration? These resources can help you get started:
→ Dashboard Hub Cloud features – Review Cloud features and understand key differences between DC and Cloud.
→ Migration support from Appfire – Learn how we can help you migrate smoothly.
Nodes as building blocks for Custom Reports
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.
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',
} |
|
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', |
|
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',
} |
|
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 }
} |
|
Progress | Displays progress bars. You can customize the appearance and behavior to show completion status.
| {
type: 'progress',
class: 'card',
value: '60',
} |
|
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',
},
],
},
} |
|
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' }] },
],
} |
|
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: {$}',
} |
|
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}',
},
],
},
],
} |
|
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' },
}
} |
|