Map
🚧 This documentation is a work in progress.
Usage
Anatomy
Properties
We are currently updating how we implement components, and the list of properties may not be entirely accurate.
| Property | Type | Description |
|---|---|---|
id | string | The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with dash or number. |
dataModelBindings.simpleBinding | string | Data model binding for a component’s connection to a single field in the data model. |
textResourceBindings.title | string | The title/label text for the component. |
textResourceBindings.description | string | The description text for the component (optional). |
textResourceBindings.help | string | The help text for the component (optional). |
textResourceBindings.shortName | string | The short name for the component, used in validation messages (optional). If it is not specified, ’title’ text is used. |
textResourceBindings.tableTitle | string | The text shown in column title when component is used in repeating group (optional). If it is not specified, ’title’ text is used. |
required | boolean | Boolean or expression indicating if the component is required when filling in the form. Defaults to false. |
readOnly | boolean | Boolean or expression indicating if the component should be presented as read only. Defaults to false. Please note that even with read-only fields in components, it may currently be possible to update the field by modifying the request sent to the API or through a direct API call. |
grid | object | Settings for the components grid. Used for controlling horizontal alignment. Example(s): {xs: 12} |
grid.innerGrid | gridProps | Optional. 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 |
grid.labelGrid | gridProps | Optional. Grid for the component label. Used in combination with innerGrid to align labels on the side. Example(s): {xs: 12}See: gridProps |
hidden | boolean | Boolean value or expression indicating if the component should be hidden. Defaults to false. |
pageBreak | object | Enables page break settings in PDF output. |
pageBreak.breakAfter | string | PDF only: Indicates whether a page break should be added after the component. Allowed values: auto (default), always, avoid. |
pageBreak.breakBefore | string | PDF only: Indicates whether a page break should be added before the component. Allowed values: auto (default), always, avoid. |
renderAsSummary | boolean | Boolean or expression indicating if the component should be rendered as a summary. Defaults to false. |
centerLocation | object | Center location of the map. |
centerLocation.latitude | number | Number or expression for the latitude of the center location. |
centerLocation.longitude | number | Number or expression for the longitude of the center location. |
layers | array | List of map layers. |
layers.attribution | string | String for setting the attribution of the tile layer. |
layers.subdomains | array | List of subdomains. Used for balancing the load on different map tiling servers. A random one will replace {s} in the defined URL. |
layers.url | string | The URL to a map tile. {z}/{x}/{y} will be replaced with tile coordinates, {s} will be replaced with a random subdomain if subdomains are given. |
zoom | number | Number that sets the default zoom of the map. |
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)
}
]
}
}
}