Digitaliser.dk

Dette er en lille vejledning til hvordan du selv kan teste visuel integration med Borger.dk, sådan at det med sikkerhed vil virke korrekt når løsningen bliver registreret i OPIS til visning på Borger.dk.

Det vigtigste princip i den offentlige integrationsmodel (OIM) er den løse kobling imellem de forskellige dele der indgår i den samlede løsning, som brugeren oplever som et sammenhængende hele.

Konkret i forhold til visuel integration med iframe gør det at du kan teste det selv med hjælp fra en simpel html-mockup. Med det nye Borger.dk (Borgerguide version 3) vises iframe-løsninger i eget browser-vindue (med en template kaldet Borger.dk-minimal). Nedenfor er vedhæftet Borger_dk_iframe_mock.zip som indeholder to html-filer. Den ene fil modsvarer en handlingsside (der beskriver bedst muligt en given selvbetjeningsløsning for borgeren) som indeholder en  start-knap midt på siden. Når start-knappen (HTML-teknisk et link) aktiveres så åbnes et nyt browser vindue med JQuery plugin popupWindow. I zip-filen er der en fil "simpleLauncher.html" som indeholder start-knap svarende til den på en handlingsside. Hvor den centrale markup er:

<p>
 <a href="./portalservicesiden.html"
 class="uiActionButton"> <img class="actionImage" alt=""
 src="https://www.borger.dk/_layouts/BorgerDk.SharePoint.Opis/images/action.png" />
 <br /> Start
 </a>
</p>
<script type="text/javascript">
 jQuery('.uiActionButton').popupWindow({
 windowName : 'portalServiceWindow',
 width : 1024,
 height : 768,
 centerScreen : 1,
 resizable : 1,
 scrollbars : 0
 });
</script>

Selve integrationssiden portalservicesiden.html er en simpel HTML-side hvor din løsning iframes. Her er den centrale del:

<!-- 
Insert URL in @src here and adjust height to your needs in @style
 -->
<iframe src="[YOUR SERVICE URL]" 
            class="PortalServiceContentIframe" 
            frameborder="0" 
            style="height:500px">
</iframe>

I forhold til opbygning og styling af din selvbetjeningsløsning skal du følge  Borger.dk's HTML-guide som anviser hvilken markup/css-klasser du skal bruge.