@prokomssp/edoc-viewer
v10.204.0
Published
Client for viewing and posting forms.
Keywords
Readme
viewer.js
Pakken inneholder koden for vise skjema.
Installasjon
Legg inn viewer.min.js nederst på HTML siden før body slutt tag.
<body>
...
<script src="viewer.min.js"></script>
</body>Dersom du ønsker å benytte samme stilsett som på skjema.no, kan du legge inn styles.css i head taggen.
<head>
...
<link rel='stylesheet' href='styles.css' type='text/css' />
</head>Opprett et tomt element der skjemaet skal rendres. Du bestemmer elementets id og oppgir denne i kall til viewer.init() (beskrevet nedenfor).
<body>
<div id="skjema"></div>
</body>For å vise skjema, kalles .init() og deretter .form(). Koden nedenfor viser strukturen for oppsett av viewer.js for visning av et skjema.
document.addEventListener("DOMContentLoaded", function(){
viewer
.init({
apiUrl: "<api url>",
customerId: "<customer id>",
})
.form({
divId: "<id til div der skjema skal rendres>",
formId: "<id til skjema som skal vises>"
});
});API
init()
.init() initialiserer viewer.js og må være det første kallet til viewer.js.
viewer.init({...})init object:
viewer.init({
apiUrl : "<api url>",
customerId: "<customer id>",
hide : {
title: true,
buttons: true,
}
})|Egenskap|Eksempel|Obligatorisk|Beskrivelse| |--------|--------|------------|-----------| |apiUrl |https://api.skjema.no|Ja|Url til API-et| |customerId|9998|Ja|Kunde-id| |hide.title|true|Nei|Oppgi true dersom det er ønskelig å skjule tittel| |hide.buttons|true|Nei|Oppgi true dersom det er ønskelig å skjule knappene for "avbryt", "lagre" og til "kontroll"|
form()
.form() forteller viewer.js hvilket skjema som skal vises. .init() må kalles før .form().
viewer
.init({...})
.form({...})form object:
viewer
.init({...})
.form({
divId: "<id til div>",
formId: "<id til skjema som skal vises eller function() som returnerer denne>",
refId: "<id til mellomlagret utkast som skal vises eller function() som returnerer denne>",
previewId: "<id til forhåndsvisning eller function() som returnerer denne>",
onAborting: function(proceed) {},
onAborted: function() {},
onSaving: function(proceed) {},
onSaved: function() {},
onSubmitted: function() {}
});divId er obligatorisk og må oppgis.
Angi skjema
viewer.js trenger én av følgende for å vise et skjema: formId, refId eller previewId.
formIdbenyttes når et nytt, tomt skjema skal vises. For å se hvilkeformId-er som er tilgjengelig, kan du gjøre et kall tilviewer.getForms()(beskrevet nedenfor).refIdbenyttes når et mellomlagret utkast skal gjenopptas. For å se hvilkerefId-er som er tilgjengelig, kan du gjøre et kall tilviewer.getCases()(beskrevet nedenfor).previewIdvil bli sendt med når edoc-designer åpner URL for forhåndsvisning av skjema.
Det 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.
viewer
.init({...})
.form({
...
formId: function() {
return viewer.util.getQuery("formId");
},
refId: function() {
return viewer.util.getQuery("refId");
},
previewId: function() {
return viewer.util.getQuery("previewId");
}
});Verdien for formId, refId eller previewId kan alternativt "hardkodes" slik:
viewer
.init({...})
.form({
...
formId: "701660",
});Merk at viewer.js vil hive en exception dersom mer enn én av formId, refId eller previewId er satt.
Event-handling
Nå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.
Koden nedenfor viser et eksempel på hvordan disse event-handlerne kan implementeres.
viewer
.init({...})
.form({
...
onAborting: function(proceed) {
proceed();
},
onAborted: function() {
window.location = "index.html";
},
onSaved: function(saveInfo) {
if(saveInfo.isAuthenticated) {
window.location = "cases.html";
} else {
window.location = "saveReceipt.html?refId=" + saveInfo.externalRefId;
}
},
onSubmitted: function(receipt) {
window.location = "submitReceipt.html?refId=" + receipt.refId;
}
});onAborting
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).
Eksempelet 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.
viewer
.init({...})
.form({
...
onAborting: function(proceed) {
showAbortConfirmationDialog() //må implementeres av deg
.on("click", "#yes",
function() {
proceed(true);
})
.on("click", "#no",
function() {
proceed(false);
});
},
});onAborted
onAborted blir kalt etter at avbrytelsen er fullført. Her har du eksempelvis mulighet for å laste en ny URL i nettleseren.
viewer
.init({...})
.form({
...
onAborted: function() {
window.location = "index.html";
},
});onSaved
onSaved blir kalt etter at en mellomlagrring er fullført. Her har du eksempelvis mulighet for å laste en ny URL i nettleseren.
viewer
.init({...})
.form({
...
onSaved: function() {
window.location = "cases.html";
}
});onSubmitted
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.
Eksempelet nedenfor laster en ny side med referanse id i querystring.
viewer
.init({...})
.form({
...
onSubmitted: function(receipt) {
window.location = "submitReceipt.html?refId=" + receipt.refId;
}
});getCaseInfo() - uthenting av info for kvittering
Etter 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.
Eksempelet nedenfor viser hvordan referanse id, skjemaets navn og tidspunkt for innsendelse hentes.
<script>
document.addEventListener("DOMContentLoaded", () => {
const refId = viewer.util.getQuery("refId");
viewer
.init(...)
.getCaseInfo(refId)
.then(info => {
document.getElementById("receipt").innerHTML =
`
refId: ${info.refId} <br/>
name: ${info.name} <br/>
updatedOn: ${info.updatedOn} <br/>
`;
}).catch((error) => {
console.log(error);
});
});
</script>
<div id="receipt"></div>session()
viewer.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().
viewer
.init({...})
.session({...})session object:
Eksempelet 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.
viewer
.init({...})
.session({
idleTimeoutMinutes: 20,
warningTimeoutMinutes: 5,
onIdleTimeoutWarning: function(extendSession, endSession, sessionOptions) {
showTimeoutWarning(sessionOptions.warningTimeoutMinutes) //må implementeres av deg
.on("click", "#yes", function () {
extendSession();
})
.on("click", "#no", function () {
endSession();
});
},
onIdleTimeout: function() {
document.location = "idleTimeout.html";
}
})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.
|Egenskap|Eksempel|Obligatorisk|Beskrivelse| |--------|--------|------------|-----------| |idleTimeoutMinutes |60|Nei, default er 20|Antall minutter med inaktivitet før skjemadata fjernes.| |warningTimeoutMinutes|5|Nei|Utfyller blir gitt en advarsel om at sesjonen vil tømmes dette antall minutter i forveien.|
Brukerhåndtering
Dersom 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å.
Eksempelet nedenfor viser hvordan du kan få tak i informasjon om bruker som blir logget på av viewer.js:
viewer
.init({...})
.session({
...
onAuthenticated: (getUser) => {
getUser() //if you need to get the user's id, invoke getUser.
.then((user) => {
alert(`You are logged in as ${user.id}!`); //do something with user.id
});
}
})Dersom 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.
viewer.logIn();For å logge bruker ut fra edoc-api, kaller du viewer.logOut().
viewer.logOut()
.then(() => {
alert("Your session has ended.");
window.location = "index.html";
});getForms()
viewer.getForms() returnerer tilgjengelige skjema for kunden. Eksempelet nedenfor viser hvordan skjema kan hentes og listes ut på en HTML-side.
<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener("DOMContentLoaded", () => {
setLoaderVisibility(true);
viewer
.init(...)
.getForms()
.then(forms => {
const createFormLink = (form) => {
var fragment = document.createDocumentFragment();
const formLink = document.createElement("a");
formLink.setAttribute("href", `form.html?formId=${form.formId}`);
formLink.text = `${form.name}`;
fragment.appendChild(formLink);
const br = document.createElement("br");
fragment.appendChild(br);
return fragment;
}
const formsElement = document.getElementById("forms");
if(forms) {
forms.forEach(function(form) {
formsElement.appendChild(createFormLink(form));
});
} else {
formsElement.appendChild(document.createTextNode("No forms"));
}
});
});
</script>
<div id="forms"></div>
<script src="viewer.min.js"></script>
</body>
</html>getCases() og deleteCase()
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().
<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener("DOMContentLoaded", () => {
viewer.init(...);
const renderCases = () =>
viewer.getCases().then(cases => {
document.getElementById("content").style.display = "block";
const createCaseLink = (c, isSaved) => {
var fragment = document.createElement("div");
fragment.setAttribute("id", c.refId);
const caseLink = document.createElement("a");
if(isSaved) {
caseLink.setAttribute("href", `form.html?refId=${c.refId}`);
}
caseLink.text = `${c.name}`;
fragment.appendChild(caseLink);
const deleteLink = document.createElement("a");
deleteLink.setAttribute("href", "#");
deleteLink.text = " delete";
deleteLink.onclick = function(event) {
viewer.deleteCase(c.refId)
.then(() => {
document.getElementById(c.refId).remove();
}).catch((error) => {
alert(JSON.stringify(error));
});
};
fragment.appendChild(deleteLink);
const br = document.createElement("br");
fragment.appendChild(br);
return fragment;
}
const savedCasesElement = document.getElementById("savedCases");
savedCasesElement.innerHTML = "";
if(cases.saved) {
cases.saved.forEach(function(c) {
savedCasesElement.appendChild(createCaseLink(c, true));
});
} else {
savedCasesElement.appendChild(document.createTextNode("No saved cases"));
}
const submittedCasesElement = document.getElementById("submittedCases");
submittedCasesElement.innerHTML = "";
if(cases.submitted) {
cases.submitted.forEach( (c) => {
submittedCasesElement.appendChild(createCaseLink(c, false));
});
} else {
submittedCasesElement.appendChild(document.createTextNode("No submitted cases"));
}
});
renderCases();
});
</script>
<div id="content">
<h2>Saved cases</h1>
<div id="savedCases"></div>
<h2>Submitted cases</h1>
<div id="submittedCases"></div>
</div>
<script src="viewer.min.js"></script>
</body>
</html>getPdf()
PDF for innsendte saker kan lastes ned via viewer.getPdf(refId). PDF-en genereres on the fly av edoc-api. Edoc-api sjekker at innlogget bruker har rettighet på saken det blir forsøkt lastet ned PDF for
Progresjonsvisning og feilhåndtering
Alle 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.
<!DOCTYPE html>
<html>
<body>
<script>
function setLoaderVisibility (isVisible) {
const loader = document.getElementById("loader");
if(loader) {
loader.style.display = isVisible ? "block" : "none";
}
};
document.addEventListener("DOMContentLoaded", () => {
setLoaderVisibility(true);
viewer
.init(...)
.form(...)
.then(() => {
setLoaderVisibility(false);
}).catch((error) => {
alert(error);
}).finally(() => {
setLoaderVisibility(false);
});
});
</script>
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div id="viewer"></div>
<div id="loader" class="loader"></div>
<script src="viewer.min.js"></script>
</body>
</html>Innhold
Viewer
- Babel Polyfill
- Handlebars
- jQuery
- jQuery UI
- DropZone
- i18next
- mathjs
- moment.js
- opn
- urijs
Styles
- Bootstrap 3.3.7
- Budicons