Last modified: Nov 10, 2024

Summary

🚧 This documentation is a work in progress.

Usage

Anatomy

Properties

The following is an autogenerated list of the properties available for Summary based on the component’s JSON schema file (linked below).

We are currently updating how we implement components, and the list of properties may not be entirely accurate.

JSON schema

Required properties: id,type,componentRef,pageRef

PropertyTypeDescription

id

stringThe component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>.

type

stringThe component type.

textResourceBindings

objectText resource bindings for a component.
textResourceBindings.titlestring

componentRef

stringString value indicating which layout component (by ID) the summary is for.

display

objectOptional properties to configure how summary is displayed
display.hideBottomBorderbooleanSet to true to hide the blue dashed border below the summary component. False by default.
display.hideChangeButtonbooleanSet to true if the change button should be hidden for the summary component. False by default.
display.useComponentGridbooleanSet to true to allow summary component to use the grid setup of the referenced component. For group summary, this will apply for all group child components.

excludedChildren

arrayArray of component ids that should not be shown in a repeating group's summary

grid

objectSettings for the components grid. Used for controlling horizontal alignment.
Example(s): {xs: 12}
gridSettings.innerGridgridPropsOptional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width.
Example(s): {xs: 12}
See: gridProps
gridSettings.labelGridgridPropsOptional grid for the component label. Used in combination with innerGrid to align labels on the side.
Example(s): {xs: 12}
See: gridProps

hidden

booleanBoolean value or expression indicating if the component should be hidden. Defaults to false.

largeGroup

booleanBoolean value indicating if summary of repeating group should be displayed in large format. Useful for displaying summary with nested groups.

pageBreak

object
pageBreak.breakAfterstringPDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid
pageBreak.breakBeforestringPDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'.
Example(s): auto,always,avoid

pageRef

stringString value indicating which layout page the referenced component is defined on.

Configuration

We are currently updating Altinn Studio Designer with more configuration options! The documentation is continuously updated, and there may be more settings available than what is described here, and some settings may be in beta version.

Add component

    You can add a component in Altinn Studio Designer by dragging it from the list of components to the page area. Selecting the component brings up its configuration panel.

    Basic component:

    App/ui/layouts/{page}.json
    {
      "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
      {
        "data": {
          "layout": [
            {
              // Basic component (required properties)
            }
          ]
        }
      }
    }
    

    Examples