Module 1

Create app in Studio, set up local development environment and local test

In this module you will, based on the requirements of the municipality of Sogndal, set up the first page of your application for newcomers and verify that everything looks as expected locally.

Topics covered in this module:

  • Create new application
  • Add data model and connect fields
  • Develop app in local developing environment
  • Editing of text resources
  • Test application in local development environment (LocalTest)

Tasks

Create a new application in Altinn Studio, the owner should be an organization that you have access to. If you are only running the application locally you can set yourself as the owner.

Requirements from the municipality

  • The application must have a sensible name that makes it easy to find it again among the large number of repositories Sogndal keeps in Altinn Studio.

  • There are currently no plans for yearly revisions of the app, so the year does not need to be taken into account.

There is a wish that one or more of the words “newcomer” and “Sogndal” is included in the name.

Useful documentation

The municipality of Sogndal has created a data model representing data they wish to collect from future residents.

In some cases you might have to create the data model for a service yourself. This can be done by using the data modelling tool in Altinn Studio (launching Spring 2022), or by using an existing model as a starting point and editing it using a text editor.

  1. Download the xsd-file, open it in a text editing program and take a closer look at the contents.

  2. Upload the data model in Altinn Studio

  3. Push the changes to master and take a closer look at the files in the folder App/models

Knowledge check

  • Which data is it the service owner wishes to collect here?
  • Which effect has <minOccurs> in the data model? You may notice that the field has a different value for Innflytter.Fornavn and Innflytter.Mellomnavn.
  • Which other properties is set on the field Innflytter.Mellomnavn?
  • A .cs, .metadata.json and .schema.json file has been generated in addition to the .xsd file you uploaded. What is the correlation between these files?
  • Some restrictions from the data model are not transferred to the C#-file, which ones? Some new properties have also been added, which ones?

Useful documentation

To make the service user friendly and available to use for those with visual impairments, it is important that all components have descriptive titles and descriptions.

It is possible to connect texts to components in both Altinn Studio and locally.

NOTE: Display name for the application must be changed in both App/config/applicationMetadata.json and in the text resources.

Requirements from the municipality

  • All input fields should have descriptive labels that clarifies what should be filled in.
  • The application must be available in bokmål, nynorsk and english. In a first edition it is sufficient that only one of these languages is available.
  • It is important that the display name of the application sounds good and is descriptive of the service.

Useful documentation

Knowledge check

In Altinn we support three languages: bokmål, nynorsk and english.

  • How do you get english language support in the application?
  • If we one day were to support Ukrainian, which language code would you then need to annotate the file with?
  • If a text key referred to in FormLayout.json does not exist in the text resources, what will appear on the screen?

The fields to be filled out on a form page can be created by using the “drag and drop” function in Altinn Studio or manually in the json-file that describes the appearance of a from page FormLayout.json.

Based on the requirements from the municipality, can you now set up the first form page in Altinn Studio?

Requirments from the municipality

  • Name and age of the person who is a newcomer
    • First name
    • Middle name (optional)
    • Last name
    • Age
  • Address of the person who is a newcomer
    • Street address
    • Postal code
    • Postal city
  • Contact information of the person who is a newcomer
    • Email
    • Phone number

Useful documentation

Knowledge check

In your application repository you will find FormLayout.json in the folder App/ui/layouts. The JSON file describes the form page you have created in Altinn Studio, given that you have pushed your changes to master.

  • Can you locate the component connected to the email-field?
  • What change is required in this file if the email-field is no longer required?
  • By changing one line in FormLayout.json it is possible to change the component attached to the middle name to an input field for a long answer. What change is required?

Some application features are not supported for development in Altinn Studio. These must be developed in a local development environment.

The development itself can be carried out in your preferred development tool, but if you need a recommendation Visual Studio Code is a good option.

Useful documentation

By using a mock that can be spun up locally by Altinn Platform, it is possible to do simple testing and verification of the application in the local development environment.

In this task you will be able to run the application locally with support from LocalTest. When the app is running and you have logged in with a test user, you should have a result resembling this:

&ldquo;Application running locally&rdquo;

A picture of the application running locally

Moving on you will want to test your changes continuously in LocalTest.

  • In the event of changes related to formLayout and other json-files, a refresh (F5) in the browser is sufficient.
  • In the event of changes in prefill, the application must be instantiated again.
  • In the event of changes in cs-files, the application must be stopped and restarted. Alternatively, you may use the dotnet run watch when you start the application for hot reload.

Useful documentation

Summary

In this module you have created an application in Altinn Studio, uploaded a data model and set up a form page that connects components to some of the fields in the data model. Furthermore, you have cloned the repository locally to further develop the application in your local development environment.

The service should be able to run on your local computer with LocalTest and you should be able to fill in the fields.

Remember to push your local changes to make them available in Altinn Studio when you are happy with them.

Solution

If you have not completed all the steps, we have an example solution that you can use as inspiration.

Screenshot of data collecting page

Screenshot of data collecting page