Available UI components

Overview of the components that are available for use.

Text components

Component name Available properties Properties editor Default look
Title
  • Title text
  • Title type (H2, H3, H4)
Title component - edit properties Title component - default look
Paragraph
  • Paragraph text
Paragraph component - edit properties Paragraph component - default look

Basic form components

Component name Available properties Properties editor Default look
Input
  • Link to data model
  • Label text
  • Description text
Input component - edit properties Input component - default look
Checkboxes
  • Link to data model
  • Label text
  • Description text
  • Method to add options (codelist/manual)
  • Codelist name
  • Manual option
    • Label
    • Value
  • Pre-selected choice
Manual adding of options
Checkboxes component - edit properties
Adding options via codelist
Checkboxes component - edit properties
Checkboxes component - default look
Radio buttons
  • Link to data model
  • Label text
  • Description text
  • Method to add options (codelist/manual)
  • Codelist name
  • Manual option
    • Label
    • Value
  • Pre-selected choice
Manual adding of options
Radio buttons component - edit properties
Adding options via codelist
Radio buttons component - edit properties
Radio buttons component - default look
File Upload File upload component - edit properties File upload component - default look
Text Area
  • Link to data model
  • Label text
  • Description text
  • Read only
Text area component - edit properties Text area component - default look
Datepicker
  • Link to data model
  • Label text
  • Description text
Text area component - edit properties Text area component - default look

In addition to the above components, the following basic form components are under development. These are not ready to be used, they will be added to the overview when they are ready to use:

  • Dropdown
  • Container

Advanced form components

Advanced form components are components that potentially contain multiple fields that each need to be mapped to a field in the data model. They will typically contain fields that are functionally related, ex. fields related to address, see below.

NOTE: The address component is a proof of concept. The content/design of this component and its configuration is under development. The component is available for use, but might undergo major changes in the future.

Component name Available properties Properties editor Default look
Address component
(simple mode)
  • Link to data model for field:
    • Address
    • Postal code
    • Postal area
  • Label text for Address field
Address (simple mode) - edit properties Address (simple mode) - default look
Address component
(advanced mode)
  • Link to data model for field:
    • Address
    • Postal code
    • Postal area
    • C/O
    • Housing number
  • Label text for Address field
Address (advanced mode) - edit properties Address (advanced mode) - default look

Custom / third party components

If there is a need for specialized/custom components, it is possible to use components that are not part of the Altinn Studio component library. These components need to be written in React, and imported to the app. See [here]() for instructions on how to create a custom component using React.

Adding a custom component to an app

The custom component needs to be defined in a index.js-file. This file can then be included in the app repository. To make the component available to the app, create a file called ThirdPartyComponents.json in the app repository, under the Resources folder.

NOTE: It is important that the name and location of the file ThirdPartyComponents.json is correct, otherwise the component will not be available for the app.

The content of this file should be as follows:

{
  "packages": [{
    "packageName": "[name of the component]",
    "location": "[Link to raw format of index.js in app repository]"
  }]
}
  • [name of the component] should be replaced with the name that will be shown in the Altinn Studio UI editor.
  • [Link to raw format of index.js in app repository] should be replaced with the full url to the file in the git repo (can be found by navigating to the file in the [Repositories] solution and copying the url).

Once this is done, the UI editor in Altinn Studio should be re-loaded, and the custom component will appear in the component menu on the left.

NOTE: Editing properties for custom components in the UI editor is currently not supported. As such, and properties for the component should be set directly in the code for the component. The documentation will be updated once this functionality is made available through the UI editor.

See all Github issues for UI-editor.