:
Last modified: Mar 8, 2024

Development

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. »

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. »

React

React React is a library for developing component based applications. It is done by having declared html as xml in javascript code, and that is again transpiled into vanilla javascript for the browser to render into a page. Get started by looking at the Getting started docs or trying the tutorial. Important concepts The 2 most important concepts when working with React components are state and props. State is a collection of properties, controlled by the component, that say what the current state of the component is - this can be used to determine how the component should be rendered. »

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. »

Debug

Debugging Google Chrome has many debugging tools, but most used in altinn.studio is breakpoints in the react-code. This allows for code to run, and pause at the desired codeline, so the developer can then inspect different values that is present when the desired code is ran. Debugging tools Google Chrome React Devtools Google Chrome Redux Devtools »

Tools & Software

Azurite Azurite is an emulator for local Azure Storage development. It sets up a local storage account containing blob, queue, and table. Instructions on downloading and getting started with Azurite. We use Azurite during development of components that interact with Azure Storage. The local emulator enables us to verify that elements are stored and/or pushed correctly to the storage account and that our logic is successful in retrieving data from the storage account. »

App for automated test

Change of name app This is an app which should only be used to run automated tests against. It contains these components: Title Input Textarea Checkbox Radio button Attachment Datepicker Button Rules The rules appends the text from the text feilds for new first, middle and last name and displays in a new field. The relevant code: nyttNavn: (obj) => { obj.fornavn = obj.fornavn ? obj.fornavn + ' ' : ''; obj. »