Dette er et demo-site lavet med Umbraco for at vise Septima Widget. Læs mere om sitet

Visning på hjemmesiden

Sådan vises kortene på den offentlige hjemmeside.

Visning på hjemmesiden (front-end)

En widget gemmes i teksten som:

<div class="septima-widget"
     data-widget-url="https://septima.dk/widgetadmin3-data/config/kommunekort.json"
     style="height:400px"></div>

For at kortet vises, skal Septima Widget-scriptet (WidgetScriptUrl) indlæses på siden. Scriptet finder selv alle elementer med data-widget-url og indlæser kortene – også når der er flere widgets på samme side.

Automatisk (standard)

Med AutoInjectScript: true indsætter pluginnet automatisk scriptet lige før </body> på alle sider, der indeholder data-widget-url. Det kræver, at layoutets <body> renderes af Razor, og at MVC's tag helpers er importeret i Views/_ViewImports.cshtml (det er de som standard i Umbraco):

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Mangler linjen, indsættes scriptet ikke, selv om AutoInjectScript er true. Ellers skal der ikke ændres noget i skabelonerne.

Manuelt

Sæt AutoInjectScript til false, hvis I vil styre placeringen selv, og indsæt scriptet i layoutet lige før </body> – enten med TagHelperen:

@addTagHelper *, Septima.Umbraco.Widget

<septima-widget-script />

eller med HTML-helperen, der ligger i navnerummet Septima.Umbraco.Widget.Rendering (tilføj @using i layoutet eller én gang i Views/_ViewImports.cshtml):

@using Septima.Umbraco.Widget.Rendering

@Html.SeptimaWidgetScript()

Widget direkte i en skabelon

En widget kan også indsættes direkte i en Razor-skabelon uden at gå via editoren:

@addTagHelper *, Septima.Umbraco.Widget

<septima-widget name="kommunekort" height="500px" />

Styling

Elementerne har klassen septima-widget, og højden sættes inline ud fra dialogens Højde (standard DefaultHeight). Bredden følger containeren. Ekstra styling kan fx være:

.septima-widget { width: 100%; margin: 1.5rem 0; }

Avanceret brug: Septima Widget kan også styres via JavaScript (WidgetAPI), fx til at lytte på events eller tilføje data. Se Septima Widgets API-dokumentation.

Content Security Policy

Bruger sitet en Content Security Policy, skal følgende tillades:

  • script-src: domænet for WidgetScriptUrl (fx https://septima.dk) og https://widget.cdn.septima.dk
  • connect-src: domænet for ConfigBaseUrl samt de korttjenester, widgetten bruger
  • img-src: korttjenesterne (https: er ofte det simpleste)