\",\r\n onAborting: function(proceed) {},\r\n onAborted: function() {},\r\n onSaving: function(proceed) {},\r\n onSaved: function() {},\r\n onSubmitted: function() {} \r\n });\r\n```\r\n\r\n`divId` er obligatorisk og må oppgis.\r\n\r\n##### Angi skjema\r\nviewer.js trenger én av følgende for å vise et skjema: `formId`, `refId` eller `previewId`. \r\n\r\n* `formId` benyttes når et nytt, tomt skjema skal vises. For å se hvilke `formId`-er som er tilgjengelig, kan du gjøre et kall til `viewer.getForms()` (beskrevet nedenfor).\r\n* `refId` benyttes når et mellomlagret utkast skal gjenopptas. For å se hvilke `refId`-er som er tilgjengelig, kan du gjøre et kall til `viewer.getCases()` (beskrevet nedenfor).\r\n* `previewId` vil bli sendt med når edoc-designer åpner URL for forhåndsvisning av skjema.\r\n\r\nDet er vanlig at `formId`, `refId` eller `previewId` sendes med som querystring-parametre til HTML-siden. viewer.js har en utility-metode for uthenting av parameter fra querystring: `viewer.util.getQuery(paramName)`. Eksempelet nedenfor henter parametre med navn \"formId\", \"refId\" og \"previewId\" fra querystring. Dersom parameteren ikke finnes, returnerer funksjonen `null`. \r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .form({\r\n ...\r\n formId: function() {\r\n return viewer.util.getQuery(\"formId\");\r\n },\r\n refId: function() {\r\n return viewer.util.getQuery(\"refId\");\r\n }, \r\n previewId: function() {\r\n return viewer.util.getQuery(\"previewId\");\r\n }\t\t\t\t\t\r\n });\r\n```\r\n\r\nVerdien for `formId`, `refId` eller `previewId` kan alternativt \"hardkodes\" slik:\r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .form({\r\n ...\r\n formId: \"701660\",\r\n });\r\n```\r\n\r\nMerk at viewer.js vil kaste en exception dersom mer enn én av `formId`, `refId` eller `previewId` er satt. \r\n\r\n##### Event-handling\r\nNår et skjema er startet, kan utfyller avbryte, lagre eller sende inn skjemaet. viewer.js tilbyr event-handlere som gjør det mulig å hooke seg på disse hendelsene.\r\n\r\nKoden nedenfor viser et eksempel på hvordan disse event-handlerne kan implementeres.\r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .form({\r\n ...\r\n onAborting: function(proceed) {\r\n proceed();\r\n },\r\n onAborted: function() {\r\n window.location = \"/\";\r\n },\r\n onSaved: function(saveInfo) {\r\n if(saveInfo.isAuthenticated) {\r\n window.location = \"/cases\";\r\n } else {\r\n window.location = \"/saveReceipt?refId=\" + saveInfo.externalRefId;\r\n }\r\n },\r\n onSubmitted: function(receipt) {\r\n window.location = \"/submitReceipt?refId=\" + receipt.refId;\r\n }\r\n });\r\n```\r\n\r\n###### `onAborting`\r\n`onAborting` blir kalt når utfyller trykker avbryt og før selve avbrytelsen blir utført. Det er valgfritt å registrere en eventhandler til dette eventet. Du kan bruke eventet til å vise en \"vil du virkelig avbryte\"-dialog. Dersom utfyller bekrefter avbryting, kaller du `proceed()` eller `proceed(true)`. Dersom utfyller ikke ønsker å avbryte, kaller du `proceed(false)`. \r\n\r\nEksempelet nedenfor tar utgangspunkt i at du har laget en funksjon `showAbortDialog()` som viser et bekreftelses-vindu. Avhengig av om utfyller klikker ja eller nei, kalles `proceed()` med true eller false.\r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .form({\r\n ...\r\n onAborting: function(proceed) {\r\n showAbortConfirmationDialog() //må implementeres av deg\r\n .on(\"click\", \"#yes\",\r\n function() {\r\n proceed(true);\r\n })\r\n .on(\"click\", \"#no\",\r\n function() {\r\n proceed(false);\r\n }); \r\n }, \r\n });\r\n```\r\n\r\n###### `onAborted`\r\n`onAborted` blir kalt etter at avbrytelsen er fullført. Her har du eksempelvis mulighet for å laste en ny URL i nettleseren. \r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .form({\r\n ...\r\n onAborted: function() {\r\n window.location = \"index.html\";\r\n }, \r\n });\r\n```\r\n\r\n###### `onSaved`\r\n`onSaved` blir kalt etter at en mellomlagrring er fullført. Her har du eksempelvis mulighet for å laste en ny URL i nettleseren. \r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .form({\r\n ...\r\n onSaved: function() {\r\n window.location = \"cases.html\";\r\n }\r\n });\r\n```\r\n\r\n###### `onSubmitted`\r\n`onSubmitted` blir kalt etter at en innsending er fullført. Her har du eksempelvis mulighet for å laste en ny URL i nettleseren. Funksjonen får et `receipt`-objekt. Dette objektet inneholder referanse id for innsendingen i `receipt.refId`. Dette kan du eksempelvis bruke for å laste en side som viser info om innsendelsen. Se avsnittet for `getCaseInfo()` nedenfor.\r\n\r\nEksempelet nedenfor laster en ny side med referanse id i querystring. \r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .form({\r\n ...\r\n onSubmitted: function(receipt) {\r\n window.location = \"submitReceipt.html?refId=\" + receipt.refId;\r\n }\r\n });\r\n```\r\n\r\n### `getCaseInfo()` - uthenting av info for kvittering\r\nEtter innsending av skjema er det vanlig å vise en side som viser skjemaets navn, tidspunkt for innsendelse og referanse id. Denne informasjonen hentes via kall til `viewer.getCaseInfo(refId)`. `refId` får du fra `onSubmitted()`-eventet når skjemaet sendes inn. \r\n\r\nEksempelet nedenfor viser hvordan referanse id, skjemaets navn og tidspunkt for innsendelse hentes.\r\n\r\n```javascript\r\n\r\n\r\n\r\n```\r\n\r\n### `session()`\r\nviewer.js benytter HTML 5 sessionStorage for lagring av skjemadata under utfylling. `.session()` gjør det mulig å fortelle viewer.js etter hvor lang inaktivitet disse skal fjernes fra sessionStorage. `.init()` må kalles før `.session()`.\r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .session({...})\r\n```\r\n\r\n#### session object:\r\nEksempelet nedenfor setter opp 20 minutter som inaktiv periode, med varsling 5 minutter før disse 20 minuttene nåes. `onIdleTimeoutWarning()` blir da kalt et gitt antall minutter før sesjonen utgår. Eventet gjør det mulig å vise en dialog der bruker kan forlenge eller avslutte sesjonen sin. Kall `extendSession()` dersom sesjonen skal forlenges, eller `endSession()` dersom sesjonen skal avsluttes. Det er valgfritt å registrere en handler på `onIdleTimeoutWarning`. Dersom 20 minutter med inaktivitet passerer, eller utfyller i `onIdleTimeoutWarning` velger å avslutte sesjonen, blir `onIdleTimeout` kalt.\r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .session({\r\n idleTimeoutMinutes: 20,\r\n warningTimeoutMinutes: 5,\r\n onIdleTimeoutWarning: function(extendSession, endSession, sessionOptions) {\r\n showTimeoutWarning(sessionOptions.warningTimeoutMinutes) //må implementeres av deg\r\n .on(\"click\", \"#yes\", function () { \r\n extendSession();\r\n })\r\n .on(\"click\", \"#no\", function () {\r\n endSession();\r\n });\r\n },\r\n onIdleTimeout: function() {\r\n document.location = \"idleTimeout.html\";\r\n }\r\n })\r\n```\r\n\r\n`sessionOptions.warningTimeoutMinutes` viser hvor mange minutter det er igjen til sesjonen avsluttes på det tidspunktet da funksjonen ble kalt. Dersom du skal lage en nedtellingsfunksjon, kan du ta utgangspunkt i denne verdien.\r\n\r\n\r\n|Egenskap|Eksempel|Obligatorisk|Beskrivelse|\r\n|--------|--------|------------|-----------|\r\n|idleTimeoutMinutes |60|Nei, default er 20|Antall minutter med inaktivitet før skjemadata fjernes.|\r\n|warningTimeoutMinutes|5|Nei|Utfyller blir gitt en advarsel om at sesjonen vil tømmes dette antall minutter i forveien.|\r\n\r\n##### Brukerhåndtering\r\nDersom utfyller ikke er pålogget, men gjør en handling i viewer.js som krever pålogging, vil edoc-api sende brukeren til en identity-provider for pålogging. Handlinger i viewer.js som krever pålogging er mellomlagring av utkast og gjenopptaking av utkast, samt oppstart av skjema der det er satt krav til sikkerhetsnivå. \r\n\r\nEksempelet nedenfor viser hvordan du kan få tak i informasjon om bruker som blir logget på av viewer.js:\r\n\r\n```javascript\r\nviewer\r\n .init({...})\r\n .session({\r\n ...\r\n onAuthenticated: (getUser) => {\r\n getUser() //if you need to get the user's id, invoke getUser.\r\n .then((user) => {\r\n alert(`You are logged in as ${user.id}!`); //do something with user.id\r\n });\r\n } \r\n })\r\n```\r\n\r\nDersom du eksplisitt ønsker å logge en bruker inn via edoc-api, kan du kalle `viewer.logIn()`. Du vil motta eventet som vist ovenfor etter at pålogging er fullført. \r\n\r\n```javascript\r\nviewer.logIn();\r\n```\r\n\r\nFor å logge bruker ut fra edoc-api, kaller du `viewer.logOut()`. \r\n\r\n```javascript\r\nviewer.logOut()\r\n .then(() => {\r\n alert(\"Your session has ended.\");\r\n window.location = \"index.html\"; \r\n });\r\n```\r\n\r\n### `getForms()`\r\n`viewer.getForms()` returnerer tilgjengelige skjema for kunden. Eksempelet nedenfor viser hvordan skjema kan hentes og listes ut på en HTML-side.\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n```\r\n\r\n### `getCases()` og `deleteCase()`\r\n\r\n`viewer.getCases()` returnerer mellomlagrede utkast for en utfyller. Eksempelet nedenfor viser hvordan utkast kan hentes og listes ut på en HTML-side. Eksempelet viser også hvordan utkastene kan slettes via `viewer.deleteCase()`.\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n \r\n
Saved cases\r\n
\r\n\r\n Submitted cases\r\n
\r\n About the enterprise
\\r\\nThe data controller is ....
\"\r\n}\r\n```\r\n\r\n### renderPrivacy()\r\nI tillegg til getPrivacy så har viewer.js også muligheten ti å rendre personvernerklæringen som en ferdig side. Til det brukes renderPrivacy-metoden.\r\nDen tar to parametre: En selector for elementet den skal rendres til, og et objekt med innstillinger (options):\r\n```javascript\r\nviewer.renderPrivacy(\"#privacyContainer\", {...});\r\n```\r\n\r\n###### Options\r\n|Property|Eksempel|Obligatorisk|Beskrivelse|Default|\r\n|--------|--------|------------|---------|-------------|\r\n|culture |\"en\"|Nei|Angir hvilken språk som skal vises|Språket som er valgt i Viewer.js|\r\n|privacy|\"{ \"Privacy_Title\": \"...\", \"Privacy_Ingress\": \"...\", \"Privacy_Body\": \"...\" }\"|Nei|Personvernerklæring som skal vises|Hentes fra api|\r\n|onClose|`() => location.href = '/'`|Nei|Funksjon som skal kjøre når lukkeknappen klikkes|Hvis udefinert vil lukkeknappen ikke vises.|\r\n|error|`Error('Ikke funnet')`|Nei|Error-object med eventuell feilmelding som skal vises|Udefinert|\r\n\r\n### renderFooter()\r\nDu har muligheten til å bruke viewer.js sin egen footer. Den vil inneholde informasjon om viewer og link til personvernerklæring og/eller tilgjengelighetserklæring. RenderFooter tar to parametre: En selector som angir hvilket element footeren skal rendres til, og et objekt med innstillinger (options).\r\n\r\n```javascript\r\nviewer.renderFooter(\"#footerContainer\", {...});\r\n```\r\n\r\n###### Options\r\n|Property|Eksempel|Obligatorisk|Beskrivelse|Default|\r\n|--------|--------|------------|---------|-------------|\r\n|accessibilityStatement |\"/tilgjengelighet\"|Nei|Link til tilgjengelighetserklæring|Link vises ikke hvis denne er udefinert|\r\n|privacyLink|\"/personvern\"|Nei|Link til personvernerklæring|Link vises ikke om denne og \"privacyClick\" er udefinert|\r\n|privacyClick|`() => location.href = '/privacy'`|Nei|Funksjon som skal kjøre når personvern-linken klikkes|Link vises ikke om denne og \"privacyLink\" er udefinert|\r\n|className|`footer`|Nei|Egendefinert css-klasse|Udefinert|\r\n\r\n\r\n### renderReceipt()\r\nNår et skjema sendes inn returneres et objekt med informasjon om innsendingen. Dette kan brukes til å lage en egen kvitteringsside. Alternativt kan du rendre Viewer.js sin egen kvitteringsside med denne metoden. renderReceipt tar et parameter som er et objekt med innstillinger (options).\r\n```javascript\r\nviewer.renderReceipt({...});\r\n```\r\n\r\n###### Options\r\n|Property|Eksempel|Obligatorisk|Beskrivelse|Default|\r\n|--------|--------|------------|---------|-------------|\r\n|selector |\"#receiptContainer\"|Ja|Selector for elementet som skal holde kvitteringen|Påkrevd|\r\n|refId|\"VMBXUP\"|Ja|Ref-id for innsendt skjema|Påkrevd|\r\n|button|{title: \"Gå tilbake\",onClick: `() => location.href = '/'`}|Nei|Et objekt som angir tittel og onClick-funksjon for knappen på kvitteringssiden|Knapp vises ikke om denne er udefinert|\r\n\r\n###### Implementasjon\r\nKvitteringssiden brukes sammen med form.onSubmitted.\r\nKvitteringssiden kan settes opp som en egen side, f.eksempel med url \"/kvittering/:refid\". OnSubmitted returnerer et objekt som inneholder en refId. Da kan man videresende brukeren i onSubmitted slik:\r\n\r\n```javascript\r\nviewer.form({\r\n\tonSubmitted(receipt) {\r\n\t\tlocation.href = '/kvittering/' + receipt.refId;\r\n\t}\r\n});\r\n```\r\nMan kan også bruke renderReceipt direkte i onSubmitted-metoden:\r\n\r\n```javascript\r\nviewer.form({\r\n\tonSubmitted(receipt) {\r\n\t\tviewer.renderReceipt({\r\n\t\t\tselector: \"#receiptContainer\",\r\n\t\t\trefId: receipt.refId,\r\n\t\t\t\r\n\t\t})\r\n\t}\r\n});\r\n```\r\n\r\n\r\n### Progresjonsvisning og feilhåndtering\r\nAlle viewer metoder som gjør et kall til edoc-api returnerer et `Promise`-objekt. Fra det tidspunktet metoden blir kalt, og til operasjonen er fullført, kan det være lurt å vise en progresjons-indikator. Eksempelet nedenfor viser hvordan det kan gjøres.\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n\r\n```\r\n\r\n## Innhold\r\n\r\n### Viewer\r\n\r\n- Babel Polyfill\r\n- Handlebars\r\n- jQuery\r\n- jQuery UI\r\n- DropZone\r\n- i18next\r\n- mathjs\r\n- moment.js\r\n- opn\r\n- urijs \r\n\r\n### Styles\r\n\r\n- Bootstrap 3.3.7\r\n- Budicons","readmeFilename":"README.md"}