Skip to content

Inline Component

An Inline can be used to layout other components horizontally across a page. Any components that do not fit in a single row across the page will drop down to create a new row. This is most useful when combined with groups that repeat n times.

Schema

key type required description
type string required A string defining the component type as an Inline.
horizontalSpacing number optional An integer that defines the amount of horizontal spacing to add between components. Default is 0.
verticalSpacing number optional An integer that defines the amount of vertical spacing to add between components. Default is 0.
components Component[] required An array of components that will make up the layout of the inline.
dataQuery string optional A JSONata query to use as the data source for this component and all child components. If repeating is true, the query must resolve to an array of objects in order to repeat components in components.
repeating boolean optional If true, all components defined in components will repeat for each element in the array returned by dataQuery. Default is true.
pageBreak boolean optional A boolean indicating whether to add a page break after each repeated group of components. Default is false.
gridRow integer optional The grid row to place the component. Only applicable when inside a GridV2 component.
gridColumn integer optional The grid column to place the component. Only applicable when inside a GridV2 component.
gridRowSpan integer optional The number of rows to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
gridColumnSpan integer optional The number of columns to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
rowWidth float optional A fixed width for the component inside the row. Only applicable when inside a RowV2 component.
rowRelativeWidth float optional A proportional width for the component inside the row. Only applicable when inside a RowV2 component.
sectionName string optional Marks the component, its contents, and any sub-components as a named section in the report. A section can span multiple pages. The first, last and page count of a section can be inserted into the report using tokens: e.g. $(SECTION_BEGIN_[section-name]), $(SECTION_END_[section-name]) and $(SECTION_COUNT_[section-name]).
sectionLink string optional If defined, the entire component will become a link to a named section in the report. The link will redirect the user to the beginning of the named section in the report.
debug DebugOptions optional Enables highlighting of this component in the report. Useful for debugging layout issues.
style string or Style optional Either a style identifier or a style object used to define the layout/styling options for the component. Any textOptions in the style are ignored for this component. For a more detailed explanation of the style system, see Styles.
condition Conditional optional The component will not be rendered in the report if a condition is present and it evaluates to false. For more information on conditions, see Conditionals.

Example

This example shows how the Inline component can span multiple rows on a page. Notice that the width of the first component does not leave room for the other two in a single row.

{
    "type": "Inline",
    "horizontalSpacing": 10,
    "verticalSpacing": 10,
    "components": [
        {
            "type": "Text",
            "text": "Sales Report",
            "style": {
                "layoutOptions": {
                    "width": 500
                }
            }
        },
        {
            "type": "Text",
            "text": "Created: 08/22/2022"
        },
        {
            "type": "Text",
            "text": "Author: Aaron Watson"
        }
    ]
}

The component defined above renders as in the following image: !Inline Example