Sist endret: 10. nov. 2024

Input

🚧 Denne dokumentasjonen er under oppdatering.

Bruk

Anatomi

Egenskaper

Følgende er en liste over tilgjengelige egenskaper for Input. Listen er automatisk generert basert på komponentens JSON schema (se link).

Vi oppdaterer for øyeblikket hvordan vi implementerer komponenter. Listen over egenskaper kan derfor være noe unøyaktig.

JSON schema

Required properties: id,type,dataModelBindings

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.

dataModelBindings

objectData model bindings for component
dataModelBindings.simpleBindingstringData model binding for components connection to a single field in the data model

textResourceBindings

objectText resource bindings for a component.
textResourceBindings.descriptionstringThe description text for the component
textResourceBindings.helpstringThe help text for the component
textResourceBindings.titlestringThe title/label text for the component

required

booleanBoolean or expression indicating if the component is required when filling in the form. Defaults to false.

readOnly

booleanBoolean or expression indicating if the component should be presented as read only. Defaults to false.

autocomplete

stringThe HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
Enum: [on, off, name, honorific-prefix, given-name, additional-name, family-name, honorific-suffix, nickname, email, username, new-password, current-password, one-time-code, organization-title, organization, street-address, address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1, country, country-name, postal-code, cc-name, cc-given-name, cc-additional-name, cc-family-name, cc-number, cc-exp, cc-exp-month, cc-exp-year, cc-csc, cc-type, transaction-currency, transaction-amount, language, bday, bday-day, bday-month, bday-year, sex, tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-extension, url, photo]

formatting

objectSet of options for formatting input fields.
formatting.alignstringThe alignment for Input field (eg. right aligning a series of numbers).
Enum: [left, center, right]
formatting.currencystringEnables currency along with thousand and decimal separators to be language sensitive based on selected app language. They are configured in number property. Note: parts that already exist in number property are not overridden by this prop.
Enum: [AED, AFN, ALL, AMD, ANG, AOA, ARS, AUD, AWG, AZN, BAM, BBD, BDT, BGN, BHD, BIF, BMD, BND, BOB, BOV, BRL, BSD, BTN, BWP, BYN, BZD, CAD, CDF, CHE, CHF, CHW, CLF, CLP, CNY, COP, COU, CRC, CUC, CUP, CVE, CZK, DJF, DKK, DOP, DZD, EGP, ERN, ETB, EUR, FJD, FKP, GBP, GEL, GHS, GIP, GMD, GNF, GTQ, GYD, HKD, HNL, HTG, HUF, IDR, ILS, INR, IQD, IRR, ISK, JMD, JOD, JPY, KES, KGS, KHR, KMF, KPW, KRW, KWD, KYD, KZT, LAK, LBP, LKR, LRD, LSL, LYD, MAD, MDL, MGA, MKD, MMK, MNT, MOP, MRU, MUR, MVR, MWK, MXN, MXV, MYR, MZN, NAD, NGN, NIO, NOK, NPR, NZD, OMR, PAB, PEN, PGK, PHP, PKR, PLN, PYG, QAR, RON, RSD, RUB, RWF, SAR, SBD, SCR, SDG, SEK, SGD, SHP, SLE, SLL, SOS, SRD, SSP, STN, SVC, SYP, SZL, THB, TJS, TMT, TND, TOP, TRY, TTD, TWD, TZS, UAH, UGX, USD, USN, UYI, UYU, UYW, UZS, VED, VES, VND, VUV, WST, XAF, XCD, XDR, XOF, XPF, XSU, XUA, YER, ZAR, ZMW, ZWL]
formatting.positionstringDisplay the unit as prefix or suffix. Default is prefix
Enum: [prefix, suffix]
formatting.unitstringEnables unit along with thousand and decimal separators to be language sensitive based on selected app language. They are configured in number property. Note: parts that already exist in number property are not overridden by this prop.
Enum: [celsius, centimeter, day, degree, foot, gram, hectare, hour, inch, kilogram, kilometer, liter, meter, milliliter, millimeter, millisecond, minute, month, percent, second, week, year]
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.

labelSettings

objectA collection of settings for how the component label should be rendered.
labelSettings.optionalIndicatorbooleanControls whether the text that is indicating that a field is optional should be displayed.

maxLength

numberMaximum length of input field

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

renderAsSummary

booleanBoolean or expression indicating if the component should be rendered as a summary. Defaults to false.

saveWhileTyping

Boolean or number. True = feature on (default), false = feature off (saves on focus blur), number = timeout in milliseconds (400 by default)

triggers

arrayAn array of actions that should be triggered when data connected to this component changes.

variant

stringAn enum to choose if the inputfield it is a normal textfield or a searchbar
Enum: [text, search]

Konfigurering

Vi oppdaterer for øyeblikket Altinn Studio med flere muligheter for innstillinger! Dokumentasjonen oppdateres fortløpende, men det kan være flere innstillinger tilgjengelig enn det som beskrives her og noen innstillinger kan være i betaversjon.

Legg til komponent

    Du kan legge til en komponent i Altinn Studio Designer ved å dra den fra komponent-listen til sideområdet. Når du velger komponenten, vises innstillingspanelet for den.

    Grunnleggende komponent:

    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)
        }
      ]
    }
  }
}

    Eksempler