App Frontend Application Architecture

Description of the Application architecture for App-Frontend

App Frontend is a Single Page Application based on React.

This application is responsible to present a UI to the end user. The application consist of serveral different features that is responsible for handling the ui for different steps in the workflow.

Each App developed in Altinn Studio will contain their own App Frontend as part of the Docker Container created during the build/deploy process to a Altinn Apps environment. This means that there can be different versions of App Frontend for two different deployed Apps

React Architecture

The React Architecture used for App Frontend is based on using different javascript frameworks together REACT to handle different responsibilties.

The React architecture tries to follow best practice React architecture.

The diagram below show the architecture

Store

A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.

See details

Reducers

Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.

See details

Action Creators

An action creator is, quite simply, a function that creates an action. Do not confuse the two terms—again, an action is a payload of information, and an action creator is a factory that creates an action.

See details

App Frontend Features

The App Frontend SPA is seperated in serveral features that is a collection of components and containers that support a given functional area for a App. Typical a feature is connected to a type of workflow step. Like formfilling, signing, ++.

Support for new types of workflow steps are added

Instansiate

This feature is responsible for presenting the user

UI Render (FormFiller)

The UI rendering component is the one that is responsible for rendering the UI designed in Altinn Studio.

This feature uses the formlayout for an app together with other metdata about the datamodell.

Based on the content of the formlayout file the UI Render, renders the correct components like textbox, fileupload ++

Receipt

This feature is responsible to show the summary of the instance when an app is sent to end state of the process flow.

Configuration files

The App Frontend requires some configuration files to work correctly. These files are loaded through API

FormLayout

The formlayot is used the UI-render feature.

It decides the layout elements. App Frontend have access to form layout through API.

See details about FormLayout.json

Language

Contains all text resources

ServiceMetadata

Contains information about the data model and is used by UI-render to map the fields to the data model.

See details about ServiceMetadata.json