A collection of reusable custom components for Altinn Studio, designed to provide consistent, standardized presentation of various data types in digital public services.
To integrate this package into your Altinn Studio application, follow the steps below.
npm init -ynpm install @arkitektum/altinn-studio-custom-components --saveAdd the following snippet to ensure npm packages are installed and
copied to wwwroot during the build:
<Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
<Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
<Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
<Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
</Target>
<ItemGroup>
<MyAssets Include="node_modules/@arkitektum/altinn-studio-custom-components/**/*.*" />
</ItemGroup>
<Target Name="CopyAssetsToWwwroot" DependsOnTargets="NpmInstall" AfterTargets="Build">
<Message Text="Copying assets to wwwroot..." Importance="High" />
<MakeDir Directories="wwwroot/altinn-studio-custom-components" />
<Copy
SourceFiles="@(MyAssets)"
DestinationFolder="wwwroot/altinn-studio-custom-components"
SkipUnchangedFiles="true" />
</Target>Replace [ORG NAME] and [APP NAME] with the correct values:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/[ORG NAME]/[APP NAME]/altinn-studio-custom-components/main.css" />
</head>
<body>
<script type="module" src="/[ORG NAME]/[APP NAME]/altinn-studio-custom-components/main.js"></script>
</body>
</html>WORKDIR /App
RUN apk add --no-cache npmAfter these steps, npm packages will be installed automatically during
the build, and all assets will be copied into
wwwroot/altinn-studio-custom-components.
Components are grouped by category and tailored to display domain-specific data according to standards from Direktoratet for Byggkvalitet (DiBK) on the Fellestjenester BYGG platform.
- Header -- Displays a header text from a resource.
- Subheader -- Displays a subheader from a resource.
- Paragraph -- Displays a paragraph from a resource.
- Paragraph Text Data -- Combines resource text with data text.
- Data -- Field with label and value.
- Boolean Data -- Displays model values based on boolean.
- Boolean Text -- Displays resource text based on boolean.
- Count Data -- Counts items in an array.
- Feedback -- Single feedback message.
- Adresse -- Full address object.
- Part-navn -- Part name, optionally with org number.
- Kode -- Standardized code value.
- Kommunens saksnummer -- Composite case number (year + sequence).
- Prosjekt -- Composite project number and name.
- Telefonnummer -- All phone numbers for a part object.
- Utfallbesvarelse -- Displays status from an
Utfallbesvarelseobject.
- Data -- Values from an array.
- Planlagte løfteinnretninger -- List of
PlanlagteLoefteinnretningerList. - Vedlegg -- Attachment list.
- Feedback -- List of feedback messages by type.
- ValidationMessages -- Combined validation feedback.
- Data -- Produces a description list from array values.
- Ansvarsområde -- Displays
Ansvarsomraadegroups. - Ettersending -- Displays
Ettersendinggroups. - Sjekklistekrav -- Displays
Sjekklistekravgroups. - Utfall svar -- Displays
Utfallsvargroups.
- Data -- Sums numerical values from an array.
- Arealdisponering -- Sums area allocation values from an
Arealdisponeringobject.
- Data -- Configurable data table.
- Ansvarsområde -- Table displaying responsibility areas.
- Arbeidsplasser -- Table listing workplaces.
- Eiendom -- Table showing property information.
- Områderisiko -- Table for area risk assessments.
- Part -- Table of parties involved.
- Plan -- Table of plans.
-
Clone the repository:
git clone https://github.com/Arkitektum/altinn-studio-custom-components.git
-
Move into the project directory:
cd altinn-studio-custom-components -
Install dependencies:
yarn install
-
Start the development server:
yarn start
-
Start the documentation site (for local docs development):
yarn start-docs
-
Build the documentation site (static output):
yarn build-docs
Run unit tests:
yarn test- Altinn Studio Documentation
- Altinn Studio GitHub Repository
- Altinn Studio Customm Component Documentation
- POC: Use of third party components in apps
The changelog is regularly updated to reflect what's changed in each new release.