:
Last modified: Feb 26, 2024

Front-End

Getting started

The frontend is made up of several React applications. Each application covers a functional area. Structure The applications are grouped by the 3 solutions: Altinn Studio (Designer) Altinn Apps Altinn Platform (Receipt) Altinn Studio Designer Altinn Apps & Platform Technologies and frameworks https://reactjs.org/ https://redux.js.org/ https://redux-saga.js.org/ https://material-ui.com/ Architecture Each frontend runs within a .NET web application, where the transpiled javascript & CSS are referenced. For Altinn Studio Designer and Altinn.Platform.Receipt, these files are deployed as part of the application itself. »

User Interface

For digital services targeting API consumers strictly, there is no need for the front end. The application developer configures the UI in Altinn Studio UI-designer. The configuration files are deployed together with the application. UI rendering The UI-Render functionality in App Frontend renders the UI based on the configuration set in Altinn Studio when users access the digital service. Process views The App template front end has default support for the supported task types in the application. »

Adding components to Studio

This guide will explain how to add a new component to the Altinn Studio forms builder. Pre-requisites: The new component must be implemented in app-frontend. Studio must be set up to run locally to test your changes. Add the component to the toolbar All components that can be added to a form from Altinn Studio are shown in the toolbar on the left-hand side of the window: Forms builder To add your component to the toolbar, do the following steps: »

Developing locally

App frontend Follow the instructions here to set up an app to run locally, up to step 5 (do not do step 6 yet.) Make sure Altinn Studio is not running. If it is, run docker-compose down from altinn-studio/src/studio before proceeding with the instructions linked above. Follow the steps in app-frontend-react repository for how to serve app-frontend locally. Run the app (from <path-to-app>/App/): dotnet run or run it directly from VS Code. »

Routines for development

When selecting an issue from the backlog, assign yourself to the issue and set it to the Developing pipeline in the Altinn Tjenester 3.0 - DevOps Team board App frontend Create a new branch from main. Naming convention for branches is bug/<issue number>-<short description> or feature/<issue number>-<short description>, depending on the issue type. Code your changes and test them by running an app locally. Run unit tests Update any failing tests Add new tests when needed Make sure you update the version in altinn-app-frontend/package. »

Creating components

App structure When an instance is in a data step, the form defined in the JSON form layout file(s) for that task is rendered. Below you can see a simplified overview of the layers of components that are used to render the form, including some of the most important inputs. A detailed overview of the app frontend structure and architecture is available here. Adding a new form component Form components are defined in src/layout. »

Redux

Redux is used to manage the states of the applications. The components update the states in the Redux store, instead of keeping state only within the component. This allows components to easily react to state changes from other components. Redux Toolkit As of 2021, we have started using Redux Toolkit rather than the traditional Redux setup. This allows us to get rid of a lot of boilerplate code. Read more about Redux Toolkit here. »

Best practices

Altinn.studio best practices will be updated with more and better practices ;) Best practices Simple lists should be sorted alphabetically Form components (app-frontend) Form components (src/components) should, whenever possible, be “dumb” components that receive all their input from props. They should not have a direct connection to the store, and should not know anything about the store. Sagas All logic used in a saga should be an exported function in the utils-folder. »

Front-end

Getting startedGet started working with the frontend Adding components to StudioGet started making a new component available to the forms builder in Altinn Studio Developing locallyRunning the frontends locally for development Routines for developmentDescribes routines for developing frontend code for resources in the DevOps team. Creating componentsGet started creating new form components for the apps ReactGuidelines for using React in Altinn Studio ReduxGuidelines for using Redux in Altinn Studio »