@arkitektum/altinn-studio-custom-components

v16.7.0

Published

25 days ago

Custom components for Altinn Studio

0High
0Medium
0Low

benjamindehli

tor.anders

dagolav

altinn-studio-custom-components

npm version

A collection of reusable custom components for Altinn Studio, designed to provide consistent, standardized presentation of various data types in digital public services.

📦 Installation

To integrate this package into your Altinn Studio application, follow the steps below.

1. Initialize npm

npm init -y

2. Install the package

npm install @arkitektum/altinn-studio-custom-components --save

3. Configure asset handling in `/App/App.csproj`

Add 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>

4. Include the scripts and styles in `/views/Home/index.cshtml`

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>

5. Add npm support in your Dockerfile

WORKDIR /App

RUN apk add --no-cache npm

After these steps, npm packages will be installed automatically during the build, and all assets will be copied into wwwroot/altinn-studio-custom-components.

🧩 Available 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.

For a full list of available components and examples, see the documentation site:

Component Documentation & Gallery

🧪 Development & Testing

For a deeper look at how the package is structured and how it fits into the wider ecosystem, see ARCHITECTURE.md. For contribution guidelines (adding components, resources, releases), see CONTRIBUTING.md.

Prerequisites

Node.js 24
Yarn 4 (managed via Corepack). Enable it once with:
```
corepack enable
```
The correct Yarn version is then activated automatically from the packageManager field in package.json.

Development

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
```
Create a local environment file from the sample:
```
cp .env.sample .env
```
The dev server reads this file via dotenv-webpack. PORT sets the dev server port (default 9000), while API_PORT and GITEA_TOKEN are only needed for the Statistics dashboard (see below).
Start the development server:
```
yarn start
```
Then open http://localhost:9000. The local playground links to a component tester, the Developer tools page, and a Statistics page.

Building

Produce a production build in dist/:

yarn build

Testing

Run unit tests:

yarn test

Linting

Check code style and lint rules:

yarn lint

🛠️ DevTools Mode

DevTools mode adds inspection overlays to all custom components on the page, making it easier to debug and inspect component properties during development.

Activating DevTools Mode

Add ?devtools=true to the URL of your Altinn Studio app:

http://local.altinn.cloud/[ORG NAME]/[APP NAME]?devtools=true/#/instance/.../PdfLayout

What It Shows

Each custom component gets a small badge button in its top-right corner. Clicking it opens an inspection panel showing the component's tag name, id, and all non-empty properties.

Components are color-coded by category:

| Badge | Category | Description | |-------|----------|----------------------------| | B | Base | Base components (blue) | | D | Data | Data components (green) | | L | Layout | Layout components (purple) |

Components that are conditionally hidden are rendered as a visible placeholder (dashed border) with a hidden label instead of being invisible, so you can still inspect their properties.

Clicking anywhere outside a panel closes it.

🔗 Resources

📝 Changelog

The changelog is regularly updated to reflect what's changed in each new release.