Last modified: Sep 17, 2024

Summary2

Allows you to show summary versions of components, pages and layoutsets

Usage

The Summary2 component lets you display a summary of either a component, page or layoutSet, either in the current or previous tasks.

It is customizable to suit your needs, and is also used for generating PDFs.

Anatomy

Summary2
Example of Summary2 components inside groups

For examples of how Summary2 looks in different components, see this example app

Configuration

Component Summary

The most basic way to use the component is to show a summary of a single component.

For example, if you want to show a summary of a simple input field configured like this:

{
  "id": "MyInputFieldID",
  "type": "Input",
}

your Summary2 configuration would look like this:

{
        "id": "MySummary2ID",
        "type": "Summary2",
        "target": {
          "type": "component",
          "id": "MyInputFieldID"
        }
}

The resulting Summary2 output would look like this:

Summary2
Example of Summary2 components inside groups

Page Summary

If you would like to show a summary of an entire page, you would set the target.type property to "page" like so:

{
        "id": "MySummary2ID",
        "type": "Summary2",
        "target": {
          "type": "page",
          "id": "MyLayoutFilename"
        }
}

In this case, the target.id is set to the name of the layout page you want to render, so you would have a file called MyLayoutFilename.json in your project.

Layoutset Summary

It is also possible to render a summary of an entire layoutSet. In this case, you would set the target.type property to "layoutSet" like so:

{
        "id": "MySummary2ID",
        "type": "Summary2",
        "target": {
          "type": "layoutSet",
          "id": "MyLayoutSet"
        }
}

In this case, you would have a layoutSet called MyLayoutSet in your project. This would render a summary of all the pages and components in the layoutSet.

Rendering summaries of previous tasks

You can also render summaries of components, pages and layoutSets that exist in previous tasks.

To do this, simply specify the target.taskId like so:

{
  "id": "Summary2-previous-page",
  "type": "Summary2",
  "target": {
    "type": "page",
    "taskId": "Task_1",
    "id": "AddressPage"
 }
}

The behaviour is exactly like before with regard to target.type and target.id, except that a taskId property has been added.

Overrides

For each component in your summary, you can configure different overrides to suit your needs.

To configure an override, use the override field of the Summary2 component like so:

{
        "id": "MySummary2ID",
        "type": "Summary2",
        "target": {
          "type": "component",
          "id": "MyComponentID"
        },
         "overrides": [
           {
             "componentId": "MyComponentID",
             "displayType": "string"
           }
         ]
}

Here are the overrides that are common for all components:

ParameterTypeRequiredDescription
componentIdstringyesID of the compoment you are overriding
hiddenbooleannoExclude the component from summary
forceShowbooleannoWill force show the component in a summary even if hideEmptyFields is set to true in the summary component.
emptyFieldTextstringnoCustom text to show for empty fields.
hideEmptyFieldsbooleannoExclude empty fields for summary. Only works if the field is not required.

In addition, a few components support component-specific overrides:

Checkbox and MultipleSelect

ParameterTypeRequiredDescription
displayTypeenum: list | stringnoDisplay the summary as a list or string

Group

ParameterTypeRequiredDescription
isCompactbooleannoOption to display a compact version of groups