diff --git a/content/app/app-dev-course/modul1/_index.en.md b/content/app/app-dev-course/modul1/_index.en.md index 5d3f80571e5..8f6e6515579 100644 --- a/content/app/app-dev-course/modul1/_index.en.md +++ b/content/app/app-dev-course/modul1/_index.en.md @@ -39,6 +39,19 @@ If you want to test the app in a [test environment](/app/testing/deploy/) (descr You must have [access to the organization](/app/getting-started/create-user/#join-an-organization), and the organization must have access to a test environment. {{% /notice %}} +### Tasks + +1. [Create an application in Altinn Studio](/app/getting-started/create-app/new-app/) + +### Useful Documentation + +- [Navigating Altinn Studio](/app/getting-started/navigation) +- [Altinn Studio Dashboard](/app/getting-started/navigation/dashboard/) + +{{% /expandlarge %}} + +{{% expandlarge id="adding-a-data-model" header="Adding a Data Model" %}} + The data model defines the type and format of data that can be submitted through an app. With Altinn Studio's [Data Modeling tool](/app/development/data/data-modeling/), @@ -112,10 +125,10 @@ The mentioned files are all generated from the `.xsd` description of the data mo {{% expandlarge id="edit-texts" header="Create and Edit Texts" %}} [Texts in Altinn Studio](/app/development/ux/texts/) are stored in separate language files (also called resource files) and can be linked to form components using a text key. -The texts can be [created and edited in Altinn Studio Designer](/app/development/ux/texts/#altinn-studio-text-editor) or [directly in the file](/app/development/ux/texts/#changing-texts-directly-in-the-repository). +The texts can be [created and edited in Altinn Studio Designer](/app/development/ux/texts/#using-altinn-studio) or [directly in the file](/app/development/ux/texts/#changing-texts-directly-in-the-repository). {{% notice warning %}} -**NOTE**: The display name for the application must be changed both in `App/config/applicationMetadata.json` and in the language files. +**NOTE**: The display name for the application must be changed both in `App/config/applicationmetadata.json` and in the language files. {{% /notice %}} ### Requirements from the Municipality @@ -129,7 +142,7 @@ All components must have suitable descriptive labels to make the service user-fr 3. [Add translation(s) for the texts](/app/development/ux/texts/#add-and-change-texts-in-an-application). The application must be available in Norwegian Bokmål, Norwegian Nynorsk, and English. In the initial version, supporting only one of these languages is sufficient. -Remember to upload changes when working in Designer to update the repository. +Remember to upload your changes when working in Designer so that the repository will reflect these changes. In the next step, you will create components and link them to the text resources. ### Useful Documentation @@ -201,12 +214,13 @@ The fields should be mandatory unless indicated otherwise. 1. Set up the first form page with components based on the requirements of the Municipality. 2. Add labels by connecting text resources to each of the components. -Remember to upload changes when working in Designer to update the repository. +Remember to upload your changes when working in Designer so that the repository will reflect these changes. ### Useful Documentation -- [Building a Form with the UI Editor in Altinn Studio](/app/getting-started/) -- [Available components in Altinn Studio Library](/app/guides/design/guidelines/components/) +- [Building a Form with the UI Editor in Altinn Studio](/app/getting-started/create-app/ui-editor/)s +- [Available components in Altinn Studio Library](/altinn-studio/designer/build-app/ui-designer/components/) +- [Guidelines for the use of components](/app/guides/design/guidelines/components/) ### Knowledge Check @@ -214,7 +228,7 @@ In your application repository, you will find the `.json` file in the You can find `.json` in your application repository in the folder `App/ui/layouts`. The JSON file describes the data page you have set up in Altinn Studio, assuming you have uploaded the changes (`` is replaced with the page's name, for example, `data.json`). -{{% expandsmall id="m1t3q1" header="Do you find the component connected to the email field?" %}} +{{% expandsmall id="m1t3q1" header="Can you find the component connected to the email field?" %}} To locate the component connected to the email field, you can search for 'epost' (email). You will find the field name connected to the component under `dataModelBindings.simpleBinding` (highlighted). @@ -282,12 +296,235 @@ The application should be runnable on your local machine with LocalTest, and you ## Solution -[Source code Module 1](https://altinn.studio/repos/testdep/flyttemelding-sogndal/src/branch/modul1)
+[Module 1 source code](https://altinn.studio/repos/testdep/flyttemelding-sogndal/src/branch/modul1)
+ +{{}} + +{{% markdown %}} +Below you can find what the added texts look like in Altinn Studio and, in the *Code* tab, how this is reflected in the `resources.nb.json` file in the repository. + +{{% /markdown %}} + +{{}} +{{}} + +### Texts in Altinn Studio + +![The texts shown in Altinn Studio. Image](module1-add-texts-screenshot.png "The texts shown in Altinn Studio") + +{{}} +{{}} + +### Texts in the repository + +{{< code-title >}} +App/config/texts/resource.nb.json +{{< /code-title >}} + +```json +{ + "language": "nb", + "resources": [ + { + "id": "appName", + "value": "Flyttemelding Sogndal" + }, + { + "id": "firstName", + "value": "Fornavn" + }, + { + "id": "middleName", + "value": "Mellomnavn" + }, + { + "id": "lastName", + "value": "Etternavn" + }, + { + "id": "age", + "value": "Alder" + }, + { + "id": "streetName", + "value": "Gatenavn" + }, + { + "id": "postalCode", + "value": "Postnummer" + }, + { + "id": "postalLocation", + "value": "Sted" + }, + { + "id": "email", + "value": "E-post" + }, + { + "id": "phone", + "value": "Telefonnummer" + } + ] +} +``` +{{}} +{{}} +{{}} + +{{}} + +{{% markdown %}} +Below you can find the form we created and the components used. + +![Screenshot of the form.](module1-add-components-form-screenshot.png "The first form page") +{{% /markdown %}} + +{{}} +{{}} + +### Components {{% notice info %}} -A worked solution is underway. +See *Code* to see how the layout and configurations of the form is reflected in the code. {{% /notice %}} +![The components used in the form. Image.](module1-add-components-components-screenshot.png "The components used in the form") + +### Component - Configuration + +{{% markdown %}} +For the components we have set the component-ID, linked the component with the correct field in the data model and set the label by supplying the ID to the text resource we defined in the previous task. + +In the example below, the setup for the "Mellomnavn"-Component is shown. + +![Configuration of the \"Mellomnavn\"-Component in Altinn Studio. Image.](module1-add-components-setup-screenshot.png "Configuration of the \"Mellomnavn\"-Component in Altinn Studio") +{{% /markdown %}} + +### Settings - "Required" + +{{% markdown %}} +Toggle the 'Det skal være påkrevd for brukeren å svare'-switch on the fields that are mandatory for the user to fill (which are all fields, with the exception of "Mellomnavn"): + +![Required setting. Image.](module1-add-components-required-screenshot.png "Required setting") +{{% /markdown %}} + +{{}} +{{}} + +### Form page + +The code for the first form page, which can be found in the repository in `App/ui/layouts/`, is as follows: + +{{< code-title >}} +App/ui/layouts/innflytterPersonalia.json +{{< /code-title >}} + +```json +{ + "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "firstName", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Fornavn" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "firstName" + } + }, + { + "id": "middleName", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Mellomnavn" + }, + "required": false, + "readOnly": false, + "textResourceBindings": { + "title": "middleName" + } + }, + { + "id": "lastName", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Etternavn" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "lastName" + } + }, + { + "id": "age", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Alder" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "age" + } + }, + { + "id": "addressComponent", + "type": "AddressComponent", + "dataModelBindings": { + "address": "Innflytter.Adresse.Gateadresse", + "zipCode": "Innflytter.Adresse.Postnr", + "postPlace": "Innflytter.Adresse.Poststed" + }, + "simplified": true, + "readOnly": false, + "required": true + }, + { + "id": "email", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Kontaktinformasjon.Epost" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "email" + } + }, + { + "id": "phoneNumber", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Kontaktinformasjon.Telefonnummer" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "phone" + } + }, + { + "id": "NavigationButtons-yxdxMR", + "type": "NavigationButtons", + "componentType": "NavigationButtons", + "dataModelBindings": {}, + "showBackButton": true, + "textResourceBindings": {} + } + ] + } +} +``` +{{}} +{{}} +{{}} +

{{% center %}} diff --git a/content/app/app-dev-course/modul1/_index.nb.md b/content/app/app-dev-course/modul1/_index.nb.md index 47812cc34bb..59e3e3b6140 100644 --- a/content/app/app-dev-course/modul1/_index.nb.md +++ b/content/app/app-dev-course/modul1/_index.nb.md @@ -42,7 +42,7 @@ Dersom du skal teste appen i et [testmiljø](/nb/app/testing/deploy/) (beskrevet ### Oppgaver -1. [Opprett applikasjon i Altinn Studio](/nb/app/getting-started/create-app/) +1. [Opprett applikasjon i Altinn Studio](/nb/app/getting-started/create-app/new-app/) ### Nyttig dokumentasjon @@ -53,7 +53,7 @@ Dersom du skal teste appen i et [testmiljø](/nb/app/testing/deploy/) (beskrevet {{% expandlarge id="legge-til-datamodell" header="Legge til datamodell" %}} -Datamodellen definerer type of format for data som kan sendes inn via en app. +Datamodellen definerer type og format for data som kan sendes inn via en app. Med Altinn Studios [verktøy for datamodellering](/nb/app/development/data/data-modeling/) kan du legge til en datamodell ved å [laste opp en _xsd_-fil](/nb/app/development/data/data-modeling/#laste-opp-og-vise-datamodell) @@ -97,7 +97,7 @@ Dette elementet består igjen av en del underobjekter som _Fornavn_, _Etternavn_ `minOccurs` sier noe om hvor mange ganger objektet minst må være nevnt. - `minOccurs=0` vil si at feltet ikke er påkrevd. -- `minOccurs=1` vil si at man forventer at det dukker opp minumum én gang i modellen. +- `minOccurs=1` vil si at man forventer at det dukker opp minimum én gang i modellen. {{% /expandsmall %}} {{% expandsmall id="m1t1q3" header="Hvilke andre egenskaper er satt på feltet `Innflytter.Mellomnavn`?" %}} @@ -130,7 +130,7 @@ De nevnte filene er alle generert ut ifra xsd-beskrivelsen av datamodellen. De b Tekstene kan [opprettes og redigeres i Altinn Studio Designer](/nb/app/development/ux/texts/#altinn-studio-designer) eller [direkte i filen](/nb/app/development/ux/texts/#legge-til-og-endre-tekster-i-repository). {{% notice warning %}} -**MERK**: Visningsnavn for applikasjonen må endres både i `App/config/applicationMetadata.json` og i språkfilene. +**MERK**: Visningsnavn for applikasjonen må endres både i `App/config/applicationmetadata.json` og i språkfilene. {{% /notice %}} ### Krav fra kommunen @@ -155,7 +155,7 @@ I neste steg skal du opprette komponenter og knytte tekstene du har opprettet ti ### Forståelsessjekk -I Altinn i dag støtter vi tre skriftspråk: Bokmål, nynorsk og engelsk. +I Altinn i dag støtter vi tre skriftspråk: bokmål, nynorsk og engelsk. {{% expandsmall id="m1t2q1" header="Hvordan kan du manuelt legge inn engelsk språkstøtte i applikasjonen?" %}} @@ -180,7 +180,7 @@ App/config/texts/resources.en.json Ifølge [listen over ISO 639-1 koder](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) så er koden for ukrainsk `uk`. {{% /expandsmall %}} -{{% expandsmall id="m1t2q3" header="Hvis en tekstnøkkel refert til i `.json` ikke finnes i tekstressursene, hva vil vises da?" %}} +{{% expandsmall id="m1t2q3" header="Hvis en tekstnøkkel referert til i `.json` ikke finnes i tekstressursene, hva vil vises da?" %}} Hvis nevnte tekstnøkkel ikke finnes i tekstressursfilen, vil tekstnøkkelen vises i stedet. {{% /expandsmall %}} @@ -219,7 +219,7 @@ Husk å laste opp endringer når du jobber i Designer så de reflekteres i repoe ### Nyttig dokumentasjon -- [Hvordan bygge et skjema med UI editor i Altinn Studio](/nb/app/getting-started/) +- [Hvordan bygge et skjema med UI editor i Altinn Studio](/nb/app/getting-started/create-app/ui-editor/) - [Tilgjengelige komponenter i Altinn Studio](/altinn-studio/designer/build-app/ui-designer/components/) - [Retningslinjer for bruk av komponenter](/nb/app/guides/design/guidelines/components/) @@ -291,17 +291,239 @@ App/ui/layouts/{page}.json I denne modulen har du opprettet en applikasjon i Altinn Studio, lagt til en datamodell og satt opp en skjemaside som kobler komponenter til noen av feltene i datamodellen. -Dersom du har klargjort for lokal utvikling har du i tillegg klonet applikasjonen for å kunne videreutvikle den i ditt lokale utvilkingsmiljø. +Dersom du har klargjort for lokal utvikling har du i tillegg klonet applikasjonen for å kunne videreutvikle den i ditt lokale utviklingsmiljø. Applikasjonen skal kunne kjøres på din lokale maskin med LocalTest og du skal kunne fylle inn feltene. ## Løsningsforslag [Kildekode Modul 1](https://altinn.studio/repos/testdep/flyttemelding-sogndal/src/branch/modul1)
+{{}} + +{{% markdown %}} + +Nedenfor kan du se hvordan tekstene vi har lagt til ser ut i Altinn Studio og hvordan dette reflekteres i `resources.nb.json` filen i repoet. + +{{% /markdown %}} + +{{}} +{{}} + +### Tekster i Altinn Studio + +![Tekstene vist i Altinn Studio. Bilde](module1-add-texts-screenshot.png "Tekstene vist i Altinn Studio") + +{{}} +{{}} + +### Tekster i repository + +{{< code-title >}} +App/config/texts/resource.nb.json +{{< /code-title >}} + +```json +{ + "language": "nb", + "resources": [ + { + "id": "appName", + "value": "Flyttemelding Sogndal" + }, + { + "id": "firstName", + "value": "Fornavn" + }, + { + "id": "middleName", + "value": "Mellomnavn" + }, + { + "id": "lastName", + "value": "Etternavn" + }, + { + "id": "age", + "value": "Alder" + }, + { + "id": "streetName", + "value": "Gatenavn" + }, + { + "id": "postalCode", + "value": "Postnummer" + }, + { + "id": "postalLocation", + "value": "Sted" + }, + { + "id": "email", + "value": "E-post" + }, + { + "id": "phone", + "value": "Telefonnummer" + } + ] +} +``` +{{}} +{{}} +{{}} + +{{}} + +{{% markdown %}} +Nedenfor kan du se hvordan den første skjemasiden ser ut og hvilke komponenter vi har brukt. + +![Skjermbilde av første skjemaside](module1-add-components-form-screenshot.png "Første skjemaside") +{{% /markdown %}} + +{{}} +{{}} + +### Komponenter + {{% notice info %}} -Løsningsforslag kommer +Se *Kode* for å se hvordan oppsettet av skjemasiden reflekteres i koden. {{% /notice %}} +![Komponenter på første skjemaside. Bilde.](module1-add-components-components-screenshot.png "Komponenter på første skjemaside") + +### Komponentinnhold + +{{% markdown %}} +Under kan du se innholdet til "Mellomnavn"-komponenten. +Her har vi satt komponent-ID, feltet i datamodellen komponenten er knyttet til og angitt nøkkelen til tekstressursen som vi definerte i forrige steg. + +![Innholdet til \"Mellomnavn\"-komponenten i Altinn Studio. Bilde.](module1-add-components-setup-screenshot.png "Innholdet til \"Mellomnavn\"-komponenten i Altinn Studio") +{{% /markdown %}} + +### Innstillinger - "Påkrevd" + +{{% markdown %}} +Huk av for 'Det skal være påkrevd for brukeren å svare' for felt som er obligatoriske for brukeren (alle felt med unntak av "Mellomnavn"): + +![Påkrevd instilling. Bilde.](module1-add-components-required-screenshot.png "Påkrevd instilling") +{{% /markdown %}} + +{{}} +{{}} + +### Skjemaside + +Under finner du koden for den første skjemasiden som ligger i repoet under `App/ui/layouts/`. + +{{< code-title >}} +App/ui/layouts/innflytterPersonalia.json +{{< /code-title >}} + +```json +{ + "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json", + "data": { + "layout": [ + { + "id": "firstName", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Fornavn" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "firstName" + } + }, + { + "id": "middleName", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Mellomnavn" + }, + "required": false, + "readOnly": false, + "textResourceBindings": { + "title": "middleName" + } + }, + { + "id": "lastName", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Etternavn" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "lastName" + } + }, + { + "id": "age", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Alder" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "age" + } + }, + { + "id": "addressComponent", + "type": "AddressComponent", + "dataModelBindings": { + "address": "Innflytter.Adresse.Gateadresse", + "zipCode": "Innflytter.Adresse.Postnr", + "postPlace": "Innflytter.Adresse.Poststed" + }, + "simplified": true, + "readOnly": false, + "required": true + }, + { + "id": "email", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Kontaktinformasjon.Epost" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "email" + } + }, + { + "id": "phoneNumber", + "type": "Input", + "dataModelBindings": { + "simpleBinding": "Innflytter.Kontaktinformasjon.Telefonnummer" + }, + "required": true, + "readOnly": false, + "textResourceBindings": { + "title": "phone" + } + }, + { + "id": "NavigationButtons-yxdxMR", + "type": "NavigationButtons", + "componentType": "NavigationButtons", + "dataModelBindings": {}, + "showBackButton": true, + "textResourceBindings": {} + } + ] + } +} +``` +{{}} +{{}} +{{}}

diff --git a/content/app/app-dev-course/modul1/module1-add-components-components-screenshot.png b/content/app/app-dev-course/modul1/module1-add-components-components-screenshot.png new file mode 100644 index 00000000000..fc0f75547e7 Binary files /dev/null and b/content/app/app-dev-course/modul1/module1-add-components-components-screenshot.png differ diff --git a/content/app/app-dev-course/modul1/module1-add-components-form-screenshot.png b/content/app/app-dev-course/modul1/module1-add-components-form-screenshot.png new file mode 100644 index 00000000000..d86c03062ad Binary files /dev/null and b/content/app/app-dev-course/modul1/module1-add-components-form-screenshot.png differ diff --git a/content/app/app-dev-course/modul1/module1-add-components-required-screenshot.png b/content/app/app-dev-course/modul1/module1-add-components-required-screenshot.png new file mode 100644 index 00000000000..b753108f5e7 Binary files /dev/null and b/content/app/app-dev-course/modul1/module1-add-components-required-screenshot.png differ diff --git a/content/app/app-dev-course/modul1/module1-add-components-setup-screenshot.png b/content/app/app-dev-course/modul1/module1-add-components-setup-screenshot.png new file mode 100644 index 00000000000..8895d980ca9 Binary files /dev/null and b/content/app/app-dev-course/modul1/module1-add-components-setup-screenshot.png differ diff --git a/content/app/app-dev-course/modul1/module1-add-texts-screenshot.png b/content/app/app-dev-course/modul1/module1-add-texts-screenshot.png new file mode 100644 index 00000000000..a2d77a943b9 Binary files /dev/null and b/content/app/app-dev-course/modul1/module1-add-texts-screenshot.png differ diff --git a/content/app/app-dev-course/modul2/_index.en.md b/content/app/app-dev-course/modul2/_index.en.md index 680091341a9..2158b11910d 100644 --- a/content/app/app-dev-course/modul2/_index.en.md +++ b/content/app/app-dev-course/modul2/_index.en.md @@ -336,12 +336,13 @@ and confirm that the correct fields are prefilled. {{}} +{{% markdown %}} In this step, we have added a simple info page with an image and text. -![Screenshot info page. Image](screenshot-info-page-1.png "Info page") +![Screenshot of the info page. Image](screenshot-info-page-1.png "Info page") +{{% /markdown %}} {{}} - {{}} ### Components @@ -482,6 +483,7 @@ App/config/texts/resource.nb.json {{}} +{{% markdown %}} In this solution, we have chosen radio buttons for the info page where users must specify whether they meet the requirements to use the form. The option 'No' has been pre-selected, so users must actively choose to use the form. You can use checkboxes or dropdown menus as an alternative to radio buttons. @@ -491,6 +493,7 @@ You can use checkboxes or dropdown menus as an alternative to radio buttons. We have added a new page to show users who don't meet the service requirements (track 1). ![Screenshot of alternative workflow: this form is not for you](side-ikke-for-deg-screenshot.png "New page: This form is not for you") +{{% /markdown %}} {{}} {{}} @@ -499,13 +502,13 @@ We have added a new page to show users who don't meet the service requirements ( See *Code* for dynamic tracks logic. {{% /notice %}} -#### Radio buttons +### Radio buttons ![Components on the info page. Image](screenshot-info-page-layout-2.png "New radio buttons component on the info page") ![Radio button settings. Image](screenshot-radio-buttons-settings.png "Radio buttons settings") -#### New Page +### New Page New page for *Track 1*. @@ -519,7 +522,7 @@ New page for *Track 1*.
-#### Radio buttons +### Radio buttons {{< code-title >}} App/ui/layouts/info.json @@ -559,7 +562,7 @@ App/ui/layouts/info.json } ``` -#### New page 'Not for You' and dynamic tracks logic +### New page 'Not for You' and dynamic tracks logic We have added a new page to show users who don't meet the service requirements. One way to achieve this is by hiding the page if the user confirms that they *can* use the service. @@ -628,9 +631,12 @@ App/ui/layouts/innflytterPersonalia.json ], "layout": [ ... + ] + } +} ``` -#### Exclude page from PDF +### Exclude page from PDF We do not want to include the 'Not for You' page when generating a PDF file. Configure the `excludeFromPdf` property in `Settings.json` to exclude pages from pdf. @@ -653,7 +659,7 @@ App/Settings.json } ``` -#### Text resources (nb) +### Text resources (nb) New text resources: @@ -722,7 +728,7 @@ New button: {{}} {{}} -#### Updated Data Page +### Updated Data Page * The components for name and age have been set to `readOnly`. * Some components are aligned side by side. @@ -794,7 +800,7 @@ App/ui/layouts/innflytterPersonalia.json } ``` -#### Prefilling +### Prefilling We have created a prefill file, `datamodel.prefill.json`, and configured prefilling of personal information (except age): @@ -820,7 +826,7 @@ App/models/datamodel.prefill.json } ``` -#### Age Calculation and Prefilling +### Age Calculation and Prefilling For custom prefilling of age, we created the file `InstantiationProcessor.cs` in the `logic/Instantiation` directory (we also created the optional `Instantiation` directory). The `DataCreation` method retrieves the personal identification number from the instance passed to it. It then uses the number to calculate the age using the `CalculateAge` method (omitted, refer to code assistance under [Prefilling](#prefill) in the task description). diff --git a/content/app/app-dev-course/modul2/_index.nb.md b/content/app/app-dev-course/modul2/_index.nb.md index 9d4c3729cf6..813b28b8858 100644 --- a/content/app/app-dev-course/modul2/_index.nb.md +++ b/content/app/app-dev-course/modul2/_index.nb.md @@ -349,7 +349,6 @@ I dette steget har vi lagt til en enkel infoside med bilde og tekst. {{% /markdown %}} {{}} - {{}} ### Komponenter @@ -493,9 +492,9 @@ App/config/texts/resource.nb.json {{}} {{% markdown %}} I denne løsningen har vi valgt å legge til en komponent for radioknapper på info-siden hvor brukeren skal angi om de oppfyller kravene for å bruke skjemaet. - Det er valgt å forhåndsmarkere alternativet 'Nei' så brukeren må gjøre et aktivt valg for å bruke skjemaet. - - Du kan bruke avkrysningsboks eller nedrekksfelt som alternativ til radioknapper. +Det er valgt å forhåndsmarkere alternativet 'Nei' så brukeren må gjøre et aktivt valg for å bruke skjemaet. + +Du kan bruke avkrysningsbokser eller nedtrekksliste som alternativ til radioknapper. ![Skjermbilde av oppdatert infoside. Bilde](infoside-screenshot.png "Oppdatert infoside") @@ -638,6 +637,9 @@ App/ui/layouts/innflytterPersonalia.json ], "layout": [ ... + ] + } +} ``` ### Ekskludere side fra pdf @@ -732,7 +734,7 @@ Ny knapp: {{}} {{}} -#### Oppdatert dataside +### Oppdatert dataside * Komponentene for navn og alder er satt til `readOnly`. * Noen komponenter er sidestilt. @@ -804,7 +806,7 @@ App/ui/layouts/innflytterPersonalia.json } ``` -#### Forhåndsutfylling +### Forhåndsutfylling Vi har opprettet filen `datamodel.prefill.json` og konfigurert forhåndsutfylling av personlig informasjon (unntatt alder): @@ -830,7 +832,7 @@ App/models/datamodel.prefill.json } ``` -#### Beregning og forhåndsutfylling av alder +### Beregning og forhåndsutfylling av alder For egendefinert forhåndsutfylling av alder har vi opprettet en fil `InstantiationProcessor.cs` i mappen `logic/Instantiation` (vi har også opprettet den valgfrie mappen `Instantiation`). Metoden `DataCreation` henter personnummeret fra instansen som blir sendt til den. Deretter bruker den nummeret til å beregne alderen ved hjelp av metoden `CalculateAge` (utelatt, se kodehjelp under [Forhåndsutfylling](#prefill) i oppgavebeskrivelsen). diff --git a/content/app/development/ux/texts/_index.en.md b/content/app/development/ux/texts/_index.en.md index bf2cee512af..8bdd7738be5 100644 --- a/content/app/development/ux/texts/_index.en.md +++ b/content/app/development/ux/texts/_index.en.md @@ -12,16 +12,10 @@ The text resources are available when you edit UI components in the schema via A end user when the form is loaded in a browser. Texts are stored in JSON-format and one file per language. The filename format for texts should -be `resource.[language].json` f.ex: _resource.nb.json_. +be `resource.[language].json` e.g: _resource.nb.json_. Texts can be edited locally, directly in the JSON-files, or via the Altinn Studio text editor. -## Altinn Studio text editor - -When editing an app in Altinn Studio, select the `Text` tab from the top menu. - -![Text editor in Altinn Studio](./) - ## Formatting of texts All texts can be formatted with markdown. Below you can see the most commonly used syntax. @@ -74,7 +68,7 @@ link, but the current state of the form is maintained in the instance data shoul ## Add and change texts in an application -You have two options when you want to modify texts in an application, either via Altinn Studio, changing it directly in the repository. +You have two options when you want to modify texts in an application, either via Altinn Studio or directly in the repository. ### Using Altinn Studio @@ -82,7 +76,7 @@ You have two options when you want to modify texts in an application, either via In the top navigation bar in Altinn Studio, select _Text_ to be able to edit texts. An overview of the texts that already exist in the application are listed. -On this page you can edit the existing texts and add new ones. New texts can be added by clikcing the _New text_ button, and fill in the fields. +On this page you can edit the existing texts and add new ones. New texts can be added by clicking the _New text_ button. A unique key is automatically generated, this can be changed by clicking the pencil-icon next to the key. Texts are automatically saved when changed. @@ -109,28 +103,27 @@ Add an existing text to your component by clicking the search-icon and select th This is the recommended way to update texts if there are many changes you want to make. The texts can be changed directly in the repository, or by cloning the repository and using your preferred text editor. -The texts are stored in `App/config/texts` +The texts are stored in `App/config/texts`. ![Altinn Studio Repos](edit-texts-in-repos.png "Change texts in Altinn Studio Repos") -## Change dafault texts and error messages in an application +## Change default texts and error messages in an application -It is possible to change default texts and error messages that is displayed in the app. +It is possible to change the default texts and error messages that are displayed in the app. Here are the keys with its default value in [English](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/en.ts), -[Norwegian Bokmål](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nb.ts) and [Nynorsk](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nn.ts) +[Norwegian Bokmål](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nb.ts) and [Norwegian Nynorsk](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nn.ts) -Those default texts that has a number needs to be handled in a different way. For example `file_uploader_validation_error` displays an error message if it is required to add one attachment. +Default texts that have a number need to be handled in a different way. For example `file_uploader_validation_error` displays an error message if it is required to add at least one attachment. This default error message will be displayed as "You need to upload 1 attachement(s) to continue'. ![Tekster i appen](defaultErrorMessageEN.png "Default text displayed in application") -These default text is devided in two strings, one before -the number: `You need to upload` and one text resource after the number: `attachement(s) to continue`. The number is for the -moment not possible to edit since it is connected to max and min number of attachements, in this case. but the text surrounding the number is possible to change. +These default texts consist of two strings, one before the number: `You need to upload` and one text resource after the number: `attachment(s) to continue`. +Currently, it is only possible to edit the text surrounding the number, not the number itself. ![Tekster i appen](defaultTextsEN.png "Default texts and keys") -Add the text key and the new value in `App/configuration/texts/resouce`. Note that the key needs to reffer to the superior group and then the text key separated with a `.` +Add the text key and the new value in `App/configuration/texts/resource`. Note that the key needs to refer to the superior group and then the text key separated with a `.` ```json { @@ -146,6 +139,7 @@ Add the text key and the new value in `App/configuration/texts/resouce`. Note th This will result in an error message displaying this: ![Tekster i appen](newErrorMessageEN.png "the new error message displayed") + {{% notice warning %}} If you would like to find more information about how to change default texts you can go to [Customize Views of Steps](https://docs.altinn.studio/app/development/configuration/process/customize/) @@ -180,32 +174,30 @@ Variables in texts can be included by following the syntax below. It is importan It is currently possible to fetch values from 3 different data sources. -1. Data model - By defining `dataModel.` as the data source you can fetch values from the fields in the form that the - user is filling out. Data can be fetched from fields regardless if they are visible or not. If the user changes data +1. Data model + By defining `dataModel.` as the data source you can fetch values from the fields in the form that the user is filling out. Data can be fetched from fields regardless if they are visible or not. If the user changes data in a field referenced in a variable, the text will be updated when the user stops typing in the field. 2. Application Settings By defining `applicationSettings` as the data source you can fetch values from a specific section in `appsettings.{environment}.json` files with the key `FrontEndSettings`. This is a dynamic list you can extend - without making changes to the code. This makes it possible to have different values in different environments. Be - aware of the difference on first letter casing in the keys `FrontEndSettings` and `applicationSettings`. + without making changes to the code. This makes it possible to have different values in different environments. Keep in mind the difference in capitalization of the first letter in the keys `FrontEndSettings` and `applicationSettings`. ```json "FrontEndSettings": { "HomeBaseUrl": "https://www.testdirektoratet.no" }, ``` -3. Instance - This datasource is based on the instance and will contain some values from the active instance. We cannot access the entire instance object. The list of available properties is currently: - 1. `instanceOwnerPartyId` inneholder avgiver sin party id. - 2. `instanceId` inneholder id'en til den aktive instansen. - 3. `appId` inneholder id'en til appen instansen er knyttet til. - +3. Instance + By defining `instanceContext` as the data source you will be able to access certain properties from the active instance. The properties that are currently available are: + 1. `instanceOwnerPartyId` contains the party ID of the instance owner. + 2. `instanceId` contains the ID of the active instance. + 3. `appId` contains the ID of the application, which the active instance belongs to. + ### Default value -If a variable is not found in the data source, the path to that field in the data source is displayed. If you however want to display something other than this path, +If a variable is not found in the data source, the path to that field in the data source is displayed. However, if you want to display something other than this path, you can add a `defaultValue` option to each variable. -If you want the text to not be displayed at all if the field in the data source cannot be found, you can set the `defaultValue` to an empty string. +Setting the `defaultValue` to an empty string will ensure that no text is displayed if the field in the data source cannot be found. ```json { @@ -253,8 +245,7 @@ If you want the text to not be displayed at all if the field in the data source To make variables in text work with repeating groups, you need to make a slight modification to the example above. -This is achieved by adding `[{0}]` _after_ the repeating groups when you specify a field in the data model in the `key`.parameter -Example: +This is achieved by adding `[{0}]` _after_ the repeating group when you specify a field in the data model in the `key`-parameter. E.g: ```json {hl_lines=[6,10]} { @@ -273,11 +264,11 @@ Example: } ``` -It is possible to combine variables from fields in repeating groups with variables from fields that are _not_ in repeating groups. It is not recommended to combine variables from fields in _different_ repeating groups, unless you are sure that the order of the items in the groups will be identical. +It is possible to combine variables from fields in repeating groups with variables from fields that are _not_ in repeating groups. However, it is not recommended to combine variables from fields in _different_ repeating groups, unless you are sure that the order of the items in the groups will be identical. ## Adding help texts -Help texts are short texts that gives a concrete description of what the end user is expected to fill in the field which the help text is connected to. +Help texts are short texts that give a concrete description of what the end user is expected to fill in the field which the help text is connected to. The keys that define the help texts are defined in `FormLayout.json`. In the repository this file is located in `App/ui/`. @@ -363,21 +354,20 @@ This is how the file looks after adding help texts: ## Change application title -When you create an application you have a text resource with he label `appName`. -This it the title of the application that will be displayed in several places in our solution, f.ex when an end user is -filling out a form and when elements are displayed in the messagebox in altinn.no. +When you create an application you have a text resource with the label `appName`. +This it the title of the application that will be displayed in several places in our solution, e.g. when an end user is +filling out a form or when elements are displayed in the message box in altinn.no. The title of the application is located in two places in the application repository: - 1. In the text resource with the key `appName`. 2. In `applicationmetadata.json` in the `title` property. This file is located at `App/config/`. -App owners are encouraged to add titles in bokmål, nynorsk and english. If a title is missing in the text resources the +App owners are encouraged to add titles in Norwegian Bokmål, Norwegian Nynorsk and English. If a title is missing in the text resources the repository name will be used as a fallback, and may be shown to the end user. -If you change `appName` from an IDE (f.ex Visual Studio Code), it is important to also update the title -in `applicationmetadata.json`. If the title is changed from Altinn Studio on the "about" page or "languages" page, -the `applicationmetadata.json` file is updated automatically. +If you change `appName` from an IDE (e.g. Visual Studio Code), it is important to also update the title +in `applicationmetadata.json`. If the title is changed from Altinn Studio on the "About" page or "Languages" page, +the `applicationmetadata.json` file is automatically updated. ### Application title configuration example @@ -421,7 +411,7 @@ In `App/config/texts/resource.nn.json`: . . . - ] + ] } ``` @@ -446,7 +436,7 @@ I `App/config/texts/resource.en.json`: The application name and app owner is displayed at the top in the application. -![Tekster i appen](app-name-app-owner.png "Appnavn og appeier tekster") +![Tekster i appen](app-name-app-owner.png "Application name and application owner texts") The application owner is fetched by default from the texts defined in [altinn-orgs.json](https://github.com/Altinn/altinn-cdn/blob/master/orgs/altinn-orgs.json). @@ -472,16 +462,16 @@ Example: ## Change texts on the archive receipt page -The texts on the receipt page can be overridden by the application by specifying the texts in the applications `config/texts/resource.xx.json` file. +The texts on the receipt page can be overridden by specifying the texts in the application's `config/texts/resource.[language].json` file(s). {{%notice info%}} -Overriding any text in the receipt will have an effect on any receipt for the given application. -This means that forms that are already submitted will also get the updated texts on the receipt page. The generated PDF will not be affected by this. +Overriding any of the texts in the receipt will affect all the receipts for the given application. +This means that forms that are already submitted will also get the updated texts on their receipt page. The generated PDF will not be affected by this. {{% /notice%}} -You can also use markdown and variables in the receipt. Currently you can only fetch variables from `Instance` (See [Data Sources](#data-sources) for details) +You can also use markdown and variables in the receipt texts. Currently, you can only fetch variables from `Instance` (See [Data Sources](#data-sources) for details) -These are the text id's that can be used to override the default platform texts: +These are the text IDs that can be used to override the default texts for archived receipt: ```json receipt_platform.attachments @@ -496,7 +486,7 @@ receipt_platform.sent_content ``` -For example if you want to change the help text, you can add this to the `config/texts/resource.en.json` file in your application: +If you, for example, want to change the help text, you can add the following to the `config/texts/resource.en.json` file in your application: ```json { @@ -515,8 +505,8 @@ The image below shows which key controls which text in the UI ![Texts and text keys](archive-receipt-texts.png "Texts and text keys") **Note:** These text changes will **not** be visible in your local test environment, they will only be visible in the test environment **TT02**. -To see the changes you must navigate from the Archive and press the "See submitted form". -These modified texts are only applicable to the platform receipt and will not have any effect on the receipt that is presented to a user after he or she has annswered a form. See [receipt](../../configuration/process/customize/#receipt) for information on how to customize both texts and the layout of this receipt. +To view the changes, navigate to the "Archive" page and press the "See submitted form" button. +These modified texts are only applicable to the platform receipt and will not have any effect on the receipt that is presented to a user after they have completed a form. See [receipt](../../configuration/process/customize/#receipt) for information on how to customize both texts and the layout of this receipt. ![image](https://user-images.githubusercontent.com/42466346/159927471-088aab00-3e82-4851-b94f-712bdc4094c9.png) diff --git a/content/app/development/ux/texts/_index.nb.md b/content/app/development/ux/texts/_index.nb.md index 9680e85c6a4..9deb61d28c0 100644 --- a/content/app/development/ux/texts/_index.nb.md +++ b/content/app/development/ux/texts/_index.nb.md @@ -1,6 +1,6 @@ --- title: Tekster -description: Hvordan editere og formatere tekster, bruke variabler og legge til hjelpetekster. +description: Hvordan redigere og formatere tekster, bruke variabler og legge til hjelpetekster. toc: true weight: 40 --- @@ -11,6 +11,8 @@ Tekstressursene er tilgjengelig når man redigerer UI komponenter i skjemaet via Tekster lagres i JSON-format og det er én fil pr språk. Format på filnavn for tekster er `resource.[språk].json` f.eks: _resource.nb.json_. +Tekster kan redigeres lokalt, dirkete i JSON-filene, eller via teksteditoren i Altinn Studio. + ## Formatering av tekster Alle tekster kan formateres med markdown. Nedenfor er de mest benyttede formateringene beskrevet. @@ -70,7 +72,8 @@ Man har to alternativer når man skal endre tekster i en app, enten gjøres det #### Teksteditor I den øverste navigeringsmenyen i Altinn Studio, velg _Tekst_ for å kunne redigere tekster. En oversikt over tekstene som allerede er tilgjengelige for applikasjonen listes opp. -På denne siden kan man redigere eksisterende tekster samt legge til nye teksressurser. Nye tekster legges til ved å trykke på _Ny tekst_. + +På denne siden kan man redigere eksisterende tekster samt legge til nye tekstressurser. Nye tekster legges til ved å trykke på _Ny tekst_. En unik tekstnøkkel genereres automatisk, og kan endres ved å trykke på blyant-ikonet ved siden av nøkkelen. Tekster som endres lagres automatisk og fortløpende. @@ -93,17 +96,54 @@ Rediger en tekst på komponenten ved å trykke på blyant-ikonet for den teksten Legg til en eksisterende tekst til komponenten ved å trykke på søke-ikonet og velg blant tilgjengelige tekster. ![Bruk eksisterende tekst for komponent](component-text-search.png "Bruk eksisterende tekst for komponent") -![Altinn Studio Designer](edit-texts-in-designer.png "Endre tekster i Altinn Studio Designer") - ### Legge til og endre tekster i repository -Dersom det er mange tekster som skal endres på en gang kan det være praktisk å redigere tekstene -i JSON-struturen direkte i repoet. Enten via Altinn Studio Repos eller i en lokal klone i selvvalgt kodeeditor. +Dersom det er mange tekster som skal endres på en gang anbefales det å redigere tekstene direkte i repoet. Enten via Altinn Studio Repos eller i en lokal klone i selvvalgt kodeeditor. -Tekstene ligger lagret i `App/config/texts` +Tekstene ligger lagret i `App/config/texts`. ![Altinn Studio Repos](edit-texts-in-repos.png "Endre tekster i Altinn Studio Repos") +## Endre standardtekster og feilmeldinger i en applikasjon + +Det er mulig å endre standardtekster og feilmeldinger som vises i appen. +Her er nøklene med deres standardverdi på [Engelsk](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/en.ts), +[Norsk Bokmål](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nb.ts) og [Nynorsk](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nn.ts) + +Standardtekster som inkluderer tall må behandles på en annen måte. For eksempel vil `file_uploader_validation_error` vise en feilmelding +hvis det er påkrevd å legge til minst et vedlegg. +Denne standardfeilmeldingen vil vises som "For å fortsette må du laste opp 1 vedlegg". + +![Tekster i appen](defaultErrorMessageNB.png "Standardtekst i Applikasjon") + +Denne standardteksten er delt inn i to strenger, en før tallet: `For å fortsette må du laste opp`, og en tekstressurs etter tallet: `vedlegg`. +Tallet er for øyeblikket ikke mulig å redigere, siden det, i dette tilfellet, er knyttet til maksimum og minimum antall vedlegg. +Men teksten rundt tallet kan endres." + +![Tekster i appen](defaultTextsEN.png "Standardtekst og nøkler") + +Legg til tekst nøkkelen og den nye verdien i `App/configuration/texts/resource`. Merk at nøkkelen må henvise til den overordnede gruppen, og deretter tekstnøkkelen separert med `.`" + +```json + { + "id": "form_filler.file_uploader_validation_error_file_number_1", + "value": "For å fortsette må du laste opp" + }, + { + "id": "form_filler.file_uploader_validation_error_file_number_2", + "value": "zip-fil som inneholder alle nødvendige filer." + } +``` + +Dette vil resultere i visning av en feilmelding som dette: +![Tekster i appen](newErrorMessageNB.png "Den nye feilmeldingen") + + +{{% notice warning %}} +Hvis du vil finne mer informasjon om hvordan du endrer standardtekster, kan du gå til +[Tilpasse visninger av steg](https://docs.altinn.studio/nb/app/development/configuration/process/customize/) +{{% /notice %}} + ## Variabler i tekster Variabler i tekster kan inkluderes ved å følge oppsettet nedenfor. Det er viktig at rekkefølgen på variablene er den samme som parameterne i teksten. @@ -133,9 +173,9 @@ Variabler i tekster kan inkluderes ved å følge oppsettet nedenfor. Det er vikt Det er per nå mulig å hente verdier fra 3 ulike datakilder. -1. Datamodel +1. Datamodell Ved å angi `dataModel.` som datakilde kan man hente ut verdier fra felter i skjema som brukeren fyller ut. Data kan hentes fra felter uavhengig av om de er synlige eller ikke. Hvis bruker endrer på data i et felt referert i en variabel så vil teksten bli oppdatert når brukeren stopper å skrive i feltet. -2. Instillinger +2. Innstillinger Ved å angi `applicationSettings` som datakilde kan man hente ut verdier fra en spesiell seksjon i `appsettings.{miljø}.json` filen(e) med navn `FrontEndSettings`. Dette er en dynamisk liste man kan utvide uten å måtte gjøre endringer i kode. Dette gjør det mulig å ha ulike verdier fra miljø til miljø ved å ha andre verdier i de ulike `appsettings.{miljø}.json` filene. Vær obs på ulik bruk av stor bokstav i starten av nøkkel mellom `FrontEndSettings` og `applicationSettings`. ```json "FrontEndSettings": { @@ -143,16 +183,16 @@ Det er per nå mulig å hente verdier fra 3 ulike datakilder. }, ``` 3. Instans - Ved å angi `instanceContext` som datakilde kan man hente ut enkelte verdier fra den aktive instansen. Vi har altså ikke gitt tilgang til hele instanse objektet. Listen med egenskaper så langt er: + Ved å angi `instanceContext` som datakilde kan man hente ut enkelte verdier fra den aktive instansen. Vi har altså ikke gitt tilgang til hele instans objektet. Listen med egenskaper så langt er: 1. `instanceOwnerPartyId` inneholder avgiver sin party id. 2. `instanceId` inneholder id'en til den aktive instansen. 3. `appId` inneholder id'en til appen instansen er knyttet til. - + ### Standardverdi Hvis en variabel ikke finnes i datakilden, vises stien til det feltet i datakilden. Hvis du imidlertid ønsker å vise noe annet enn denne stien, kan du legge til en standardverdi-alternativ til hver variabel. -Hvis du ønsker at teksten ikke skal vises i det hele tatt hvis feltet i datakilden ikke kan bli funnet, kan du sette standardverdien til en tom streng. +Hvis du ønsker at teksten ikke skal vises i det hele tatt hvis feltet i datakilden ikke kan bli funnet, kan du sette `defaultValue` til en tom streng. ```json { @@ -195,44 +235,6 @@ Hvis du ønsker at teksten ikke skal vises i det hele tatt hvis feltet i datakil ] } ``` -## Endre standardtekster og feilmeldinger i en applikasjon - -Det er mulig å endre standardtekster og feilmeldinger som vises i appen. -Her er nøklene med deres standardverdi på [Engelsk](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/en.ts), -[Norsk Bokmål](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nb.ts) og [Nynorsk](https://github.com/Altinn/app-frontend-react/blob/main/src/language/texts/nn.ts) - -Standardtekster som inkluderer tall må behandles på en annen måte. For eksempel vil `file_uploader_validation_error` en feilmelding -hvis det er påkrevd å legge til minst et vedlegg. Denne standardfeilmeldingen vil vises som "For å fortsette må du laste opp 1 vedlegg". - -![Tekster i appen](defaultErrorMessageNB.png "Standardtekst i Applikasjon") - -Denne standardteksten er delt inn i to strenger, en før tallet: `For å fortsette må du laste opp`, og en tekstressurs etter tallet: `vedlegg`. -Tallet er for øyeblikket ikke mulig å redigere, siden det er knyttet til maksimum og minimum antall vedlegg, i dette tilfellet. -Men teksten rundt tallet kan endres." - -![Tekster i appen](defaultTextsEN.png "Standardtekst og nøkler") - -Legg til tekst nøkkelen og den nye verdien i `App/configuration/texts/resouce`. Merk at nøkkelen må henvise til den overordnede -gruppen, og deretter tekstenøkkelen separert med `.`" -```json - { - "id": "form_filler.file_uploader_validation_error_file_number_1", - "value": "For å fortsette må du laste opp" - }, - { - "id": "form_filler.file_uploader_validation_error_file_number_2", - "value": "zip-fil som inneholder alle nødvendige filer." - } -``` - -Dette vil resultere i visning av en feilmelding som dette: -![Tekster i appen](newErrorMessageNB.png "Den nye feilmeldingen") - - -{{% notice warning %}} -Hvis du vil finne mer informasjon om hvordan du endrer standardtekster, kan du gå til -[Tilpasse visninger av steg](https://docs.altinn.studio/nb/app/development/configuration/process/customize/) -{{% /notice %}} ### Variabler i tekst - repeterende grupper @@ -263,8 +265,7 @@ Det er fullt mulig å kombinere variabler fra felter i repeterende gruppe med va ## Legge til hjelpetekst -Hjelpetekster er små tekstsnutter som gir en kort og konsis beskrivelse av hva sluttbrukeren -er forventet å fylle ut i feltet som teksten er tilknyttet. +Hjelpetekster er små tekstsnutter som gir en kort og konsis beskrivelse av hva sluttbrukeren er forventet å fylle ut i feltet som teksten er tilknyttet. Språknøklene som peker på hjelpeteksten er definert i `FormLayout.json`. I app repoet finner du filen under `App/ui/`. @@ -355,14 +356,13 @@ Dette er tittelen på applikasjonen som vil gjenspeiles flere steder i løsninge Blant annet når en sluttbruker fyller ut skjema, og når elementer skal vises i meldingsboksen på altinn.no. Tittelen på applikasjonen skal ligge to steder i applikasjonsrepoet: - 1. I tekstressurser med nøkkelen `appName`. - Tjenesteeiere oppfordres til å legge inn tittel på bokmål, nynorsk og engelsk. Dersom tittel mangler i tekstressursene vil lagringsnavnet (navnet på repoet) vises til sluttbrukeren. - 2. I `applicationmetadata.json` under property `title`. Denne filen ligger under `App/config/`. -Dersom man gjør endrer `appName` på applikasjonen sin lokalt er det viktig at også legge til den oppdatere tittelen i -`applicationmetadata.json` også. Dersom tittel på applikasjonen endres i Altinn Studio enten på "Om" eller "Språk"-siden bli applicationmetadata.json oppdatert automatisk. +Tjenesteeiere oppfordres til å legge inn tittel på bokmål, nynorsk og engelsk. Dersom tittel mangler i tekstressursene vil lagringsnavnet (navnet på repoet) vises til sluttbrukeren. + +Dersom man endrer `appName` på applikasjonen lokalt er det viktig å legge til den oppdatere tittelen i +`applicationmetadata.json` også. Dersom tittelen på applikasjonen endres i Altinn Studio enten på "Om"- eller "Språk"-siden blir `applicationmetadata.json` oppdatert automatisk. ### Eksempel på korrekt konfigurasjon for applikasjonstittel @@ -406,7 +406,7 @@ I `App/config/texts/resource.nn.json`: . . . - ] + ] } ``` @@ -429,11 +429,11 @@ I `App/config/texts/resource.en.json`: ## Endre applikasjonseier tekst -I applikasjonen så vises applikasjonsnavn og applikasjonseier-tekstene øverst i skjema. +I applikasjonen så vises applikasjonsnavn- og applikasjonseier-tekstene øverst i skjema. ![Tekster i appen](app-name-app-owner.png "Appnavn og appeier tekster") -Applikasjonsnavn hentes som standard ut fra tekstene som er definert i [altinn-orgs.json](https://github.com/Altinn/altinn-cdn/blob/master/orgs/altinn-orgs.json). +Applikasjonseier hentes som standard ut fra tekstene som er definert i [altinn-orgs.json](https://github.com/Altinn/altinn-cdn/blob/master/orgs/altinn-orgs.json). Om det er ønskelig å endre på dette navnet kan det gjøres ved å legge til nøkkelen `appOwner` i tekstressursene. Denne vil da overstyre det som ligger på CDN. Eksempel: @@ -455,11 +455,11 @@ Eksempel: ## Endre tekster på kvitteringssiden for arkiv -Tekster på kvitteringssiden kan overstyres av applikasjonen ved å spesifisere tekster i applikasjonens `config/texts/resource.xx.json` fil. +Tekster på kvitteringssiden kan overstyres av applikasjonen ved å spesifisere tekster i applikasjonens `config/texts/resource.[språk].json` fil(er). {{%notice info%}} Overstyring av tekster i kvitteringen vil ha påvirkning for alle kvitteringer for den gitte applikasjonen. -Dette betyr at alle skjemaer som allerede er insendt vil også få det oppdaterte tekstene på kvitteringssiden. PDF filen som er generert vil ikke påvirkes av dette. +Dette betyr at alle skjemaer som allerede er innsendt vil også få de oppdaterte tekstene på kvitteringssiden. PDF filen som er generert vil ikke påvirkes av dette. {{% /notice%}} Markdown og variabler kan benyttes i kvitteringstekstene. Det er kun mulig å hente variabler fra `Instance` (Se [Data Sources](#datakilder) for detaljer) @@ -479,7 +479,7 @@ receipt_platform.sent_content ``` -Hvis du for eksempel vil overstyre hjelpeteksten, kan du legge dette til i `config/texts/resource.nb.json` filen i applikasjonen: +Hvis du, for eksempel, vil overstyre hjelpeteksten, kan du legge dette til i `config/texts/resource.nb.json` filen i applikasjonen: ```json { @@ -497,8 +497,8 @@ Bildet nedenfor viser hvilke tekstnøkler som styrer hvilken del av brukergrense ![Tekster og tekstnøkler](archive-receipt-texts.png "Tekster og tekstnøkler") -**Merk!** Disse tekstendringene vil **ikke** være synlige når du tester appen din lokalt, de synes kun i eksternt testmiljø, f.eks.**TT02**. -Du vil se endringene når du åpner et allerede arkivert skjema fra Arkivet ved å trykke på knappen "Se innsendt skjema". +**Merk!** Disse tekstendringene vil **ikke** være synlige når du tester appen din lokalt, de synes kun i eksternt testmiljø, f.eks. **TT02**. +Du vil se endringene når du åpner et allerede arkivert skjema fra Arkivet ved å trykke på knappen "Se innsendt skjema". Disse modifiserte tekstene gjelder kun kvittering i arkiv og vil ikke ha noen effekt på kvitteringen som brukeren ser etter et skjema er ferdig utfylt. Se [kvittering](../../configuration/process/customize/#kvittering-receipt) for informasjon om hvordan du kan tilpasse både tekstene og layouten for denne kvitteringen. ![image](https://user-images.githubusercontent.com/42466346/159928882-e3268bd4-6057-4ca5-aaf2-f417cffcc0f9.png)