Components

Components are the building blocks of applications.

Components can be added and edited in the UI editor, see Altinn Studio Designer. Available settings are described for each component below.

When building an application, the layout of each page is described by a <pageName>.json file located in <applicationRepo>/App/ui/layouts/. Components added to the page are listed in the layout subsection in the file.

Available components and their respective properties are defined in each component’s JSON schema file.

Properties common to multiple components are described in a separate file and referenced by the component files. These properties are described separately in Common Component Properties below.

• Common Component Properties

  Description of common property definitions used by components

• Accordion

  A component that allows you to group content into collapsible sections.

• AccordionGroup

  A component that lets you group Accordions

• ActionButton
• Address
• Alert

  The component can be used to display a message with different levels of severity.

• AttachmentList
• Button
• ButtonGroup

  Arrange different types of button components horizontally

• Checkboxes

  Input element that allows the user to select or deselect choices for one or more options.

• Custom
• CustomButton

  Overview over the CustomButton component

• Datepicker
• Dropdown

  Input element that allows a user to select only one option from a number of choices

• FileUpload
• FileUploadWithTag
• Grid

  The Grid component is used to visually arrange components in a table

• Group
• Header
• IFrame

  The IFrame component can be used to render your own HTML and CSS within an Altinn app.

• Image

  Display visual content such as pictures, screenshots, illustrations, or graphics

• Input
• InstanceInformation
• InstantiationButton
• Likert

  The Likert component is a list of questions with answers in the form of radio buttons.

• Link

  Button or link to redirect the user to an external page.

• List

  The List component is used to present data to the user in a table. Every row in the table is selectable. The component supports search, sorting and pagination.

• Map
• MultipleSelect

  MultipleSelect can be used when the user must choose one or more values

• NavigationBar
• NavigationButtons
• Panel

  The panel component can be used to display important information to the user.

• Paragraph
• PrintButton

  A button that allows the user to print the current form page

• RadioButtons

  Input element that allows the user to choose one of several options.

• Summary
• Widgets

  How to use compound components (widgets).