Installationsvejledning til Aktiv Virk-top

Om Aktiv Virk-top

Med aktiv Virk-top er det nemmere at sikre en ensartet og korrekt Virk-top på løsninger integreret

i Virk. Den aktive Virk-top er et JavaScript som leverandører kan placere i

indberetningsløsningerne, så der automatisk dannes en Virk-top der opfylder de gældende krav.

Den aktive Virk-top lægger sig ovenover løsningen og indeholder alle de elementer der pt. skal og

de der kan vises i Vitk-toppen: Virk indberets logo, løsningens titel, Log ind/Log ud link, brugerens

navn og brugerens virksomhed (hvis brugeren er logget ind), myndighedens navn, link til

myndighedens hjemmeside, evt. support telefonnummer og e-mailadresse.

Data i Virk-top

Data Beskrivelse

Virk logo Virk indberet logo med link til https://indberet.virk.dk

Løsningens titel Titel på Introsiden i DIA

Log in Hvis brugeren ikke er logget ind med NemLogin, så vises et link til log

ind

Log ud Hvis brugeren er logget ind med NemLogin, så vises et link til log ud

Brugerens navn Bliver taget fra det certifikat brugeren er logget ind med via

NemLogin

Brugerens virksomhed Hentes fra CVR registret eller tages fra det certifikat bruger er logget

ind med via NemLogin

Myndighedens navn • Myndighedsnavnet tages som udgangspunkt fra

myndighedens side DIA.

Undtagelser:

• Redigerer du i ”Integrationstekniske data” på introsiden i

DIA, bliver myndighedsnavnet taget herfra.

Support telefonnummer • Myndighedens telefonnr. tages som udgangspunkt fra

myndighedens side DIA.

Undtagelser:

• Har du udfyldt ”Kontaktinformation” i ”Fane 3 – Kontakt” på

introsiden i DIA, så bliver telefonnummeret fra den første

linje vist.

• Redigerer du i ”Integrationstekniske data” på introsiden i

DIA, bliver myndighedens telefonnr taget herfra.

E-mailadresse • Myndighedens e-mail tages som udgangspunkt fra

myndighedens side DIA.

Undtagelser:

• Har du udfyldt ”Kontaktinformation” i ”Fane 3 – Kontakt” på

introsiden i DIA, så bliver e-mailen fra den første linje vist.

• Redigerer du i ”Integrationstekniske data” på introsiden i

DIA, bliver myndighedens e-mail taget herfra.

Eksempler:

Virk-top - Ikke logget ind

Virk-top - Logget ind

Hvordan virker Aktiv-top scriptet

Virk-top delen

I eksemplet her over bliver hele den øverste del (den som er markeret med rødt) sat ind via

JavaScript. Det betyder at alle oplysninger som vises i Virk-toppen automatisk er hentet fra Virk

Indberet og ikke fra selve løsningen.

Virk-top JavaScriptet kommer med sin egen CSS og HTML med support- og loginoplysninger.

JavaScriptet er uafhængig af 3.-parts JavaScript biblioteker, og CSS er navngivet så det ikke bør

kollidere med allerede eksisterende CSS i løsningerne.

Løsningen er lavet så JavaScript linket kun skal sætte ind én gang for alle. Virk-top JavaScriptet er

dynamisk – det betyder at det genereres hver gang Virk-top kaldes. Det der bliver sæt ind på

siden, er ’bare’ et link til et JavaScript.

Der er flere versioner af scriptet da det er svært at lave ét Virk-top JavaScript som virker med alle

løsninger. Det bliver valgt i DIA hvilket JavaScript som returneres. Det gør det muligt at vælge det

Virk-top JavaScript som virker med den aktuelle løsning uden at skulle ændre linket til JavaScriptet

i selve løsningen.

Når browseren henter Virk-top scriptet fra Virk Indberet, så sker der følgende:

1. Løsningen findes frem i DIA baseret på ”diaId” paramter og evt. ”presenter” parameter

(Kommunekode).

2. DIA finder det JavaScript og CSS som er valgt for løsningen i DIA

3. HTML genereres ud fra brugerens login oplysninger samt Myndighedens oplysninger i DIA

4. JavaScript med det genererede html og css returneres til brugeren.

Installation af Virk-top scriptet

Virk-top scriptet skal installeres af en udvikler som har rettighed til at installere scriptet på

indberetningsløsningen.

Url til scriptet

Miljø Url Beskrivelse

Produktion https://indberet.virk.dk/aktivtop/js/virk-header.js Modsvarer PROD

fanen i DIA

Test https://indberet.prodtest.virk.dk/aktivtop/js/virk-

header.js

Modsvarer TEST

fanen i DIA

URL parametre:

Parameter Eksempel Påkrævet Beskrivelse

diaId 31380 Ja DiaId som løsningen har i DIA

presenter 165 Ja, for

kommunale

løsninger

Kommunekode for løsninger som er kommunale

og som benyttes af flere kommuner i DIA.

URL parametre som udviklere kan bruge for at overskrive værdier valgt i DIA så det er hurtigere at

teste (MÅ IKKE BRUGES I PRODUKTION): Parameter Eksempel Påkrævet Beskrivelse

version module Nej, må ikke

bruges i

produktion

Overskriv værdi fra dropDown ”Vælg AktivTop

JavaScript som skal bruges af løsningen” i DIA.

Eksempel:

<script src="https://indberet.prodtest.virk.dk/aktivtop/js/virk-

header.js?diaId=31380&version=default"></script>

Måder at generere Virk-top

Dia har pt. primært to måder at generere Virk-toppen på løsningen.

1. Scriptet skriver direkte til DOM træet når scriptet hentes.

2. Scriptet hentes som en JavaScript modul hvor modulet kan kaldes fra leverandørens egen

JavaScript for at aktivere Virk-toppen.

Eksempel på Virk-top som skriver direkte til DOM:

Leverandør indsætter f.eks. følgende HTML på løsningen: <script src="https://indberet.prodtest.virk.dk/aktivtop/js/virk-header.js?diaId=31380

"></script>

Dia returnerer følgende JavaScript: // DEFAULT

var style = document.createElement('style');

style.innerHTML = "#virkHeader{color:#000 ...";

document.head.appendChild(style);

var html = '<header class="virkheader-navbar">...<header>';

document.write('<div id="virkHeader"></div>');

document.getElementById('virkHeader').innerHTML = html;

Eksempel på Virk-top som JavaScript modul:

Leverandør indsætter f.eks. følgende HTML på løsningen: function loadScript(url, callback) {

var script = document.createElement("script")

script.type = "text/javascript";

if (script.readyState) { // IE

script.onreadystatechange = function () {

if (script.readyState == "loaded" || script.readyState == "complete") {

script.onreadystatechange = null;

callback();

}

};

} else { // Others

script.onload = function () {

callback();

};

}

script.src = url;

document.head.appendChild(script);

}

loadScript("https://indberet.prodtest.virk.dk/aktivtop/js/virk-header.js?diaId=31380 ",

function () {

VirkHeader.show(document);

});

Dia returnerer følgende JavaScript:

// MODULE

var VirkHeader = (function () {

var css = "#virkHeader{color:#000 ...";

var html = '<header class="virkheader-navbar">...<header>';

var data = {

"diaId": "31380",

"titel": "Motorregister",

"hjemmeside": "http://www.skat.dk/kontakt",

"myndighedsnavn": "SKAT",

"telefon": "72 22 18 18",

"email": "",

"bruger": "Niels Peter Strandberg",

"virksomhedsnavn": "NINECONSULT A/S",

"virkPortalUrl": "https://indberet.prodtest.virk.dk",

"loggedIn": true,

"loginUrl":

"https://indberet.prodtest.virk.dk/nemlogin/login?f=/integration/SKAT/Motorregister",

"logoutUrl":

"https://indberet.prodtest.virk.dk/api/v1/auth/logout?returnpath=/nemlogin/logout",

"resourceRootUrl": "https://indberet.prodtest.virk.dk/aktivtop",

"preview": false

};

return {

css: css,

html: html,

data: data,

show: function (document) {

this.style(document);

this.markup(document);

},

style: function (document) {

var style = document.createElement('style');

style.innerHTML = css;

document.head.appendChild(style);

},

markup: function (document) {

var virkHeader = document.getElementById('virkHeader');

if (virkHeader === null) {

virkHeader = document.createElement('div');

virkHeader.setAttribute('id', 'virkHeader');

var firstChild = document.body.firstChild;

document.body.insertBefore(virkHeader, firstChild);

}

virkHeader.innerHTML = html;

}

};

})();

Aktivering af Virk-top i DIA

For at aktivere Virk-top for en given løsning, skal man logge ind i DIA og gå til løsningen og åbne

bjælken ”Integrationstekniske data” i enten PROD eller TEST fanen.

• Fra dropdown ”Integrationsteknik” vælger man ”aktiv-top”.

• Angiver URL til løsningen.

• ”URL til AktivTop JavaScript som skal indsættes i løsningen” viser den URL man skal kalde

fra løsningen. Kopier den og indsæt den i løsningen.

• Overskriver evt. myndighedens kontaktoplysninger for denne løsning i Virk-toppen. OBS

Hvis man udfylder bare ét af felterne, så overskrives alle andre myndighedsoplysninger

med data (eller manglende data) fra disse felter.

• Fra dropdown ”Vælg AktivTop JavaScript som skal bruges af løsningen” vælger man det

JavaScript man vil returnere til brugeren.

• Hvis man ikke kan bruge nogle af de standard-JavaScripts som er stillet til rådighed i DIA,

kan man vælge at udfylde checkboksen ”Overskriv valgte AktivTop JavaScript med

JavaScript fra feltet her under” og i tekstfeltet under manuelt indtaste sit egen JavaScript

som skal sendes til brugeren.

• Fra dropdown ”Vælg AktivTop CSS som skal bruges af løsningen” vælger man det CSS man

vil returnere til brugeren.

• Hvis man ikke kan bruge nogle af de standard CSS som er stillet til rådighed i DIA, så kan

man vælge at udfylde checkboksen ”Overskriv valgte AktivTop CSS med CSS fra feltet her

under” og i tekstfeltet under manuelt indtaste sit egen CSS som skal sendes til brugeren.

• Gem og publicer til henholdsvis TEST og PROD