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

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. In the app that will be running locally, edit the <path-to-app>/App/views/Home/Index.cshtml file, and replace https://altinncdn.no/toolkits/altinn-app-frontend/<version>/ with http://localhost:8080/. Run the app (from <path-to-app>/App/): »

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. Form components All form components should be presentational components. »

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 »

App for automated test

Rules Conditional rules Prefill 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. »

App template and deps

Process for updating app template and its dependencies Updating app template (Template files + depentent supporting projects) Complete changes in template Get PR approved Push alpha nugets & update reference in Altinn.Apps/AppTemplate Merge to master Complete testing of new feature Once testing is completed and successful Create new branch. Push nugets without alpha based on the branch Duplicate changes in Altinn Studio template Update nuget reference in Altinn Studio template. »

Async programming

The way our solution is built there is a large need for asynchrous functionality. It is important for the development teams to be aware of best practices as well as which antipatterns to avoid. Best Practices Async Antipatterns Keep an eye out for anti-patterns and help the team to maintain a high quality in our code base. Blocking on tasks with .Result When an asynchronous call is needed in a synchronous method, the implementation below is quite common. »

Azure Dev Spaces

This page is a work-in-progress. Currently we don't have azure dev spaces set up for tjeneste 3.0 Azure Dev Spaces Azure dev spaces is an offering from Azure for a rapid, iterative Kubernetes development experience for teams. AZDS gives the opportunity to iteratively run and debug containers directly in Azure Kubernetes Service (AKS) with minimal dev machine setup. You can read more about AZDS, setup and configuration for visualstudio or Visualstudiocode here. »