Webbpublicering av rapporter

Webbpublicering av rapporter

Webbpublicerade rapporter, Nyckeltalspublicering, Jämförelsetjänsten och Kolada är en del av Medborgarportalen. I denna artikel beskriver vi hur webbpublicerade rapporter fungerar.

💡Använder ni inte Webbpublicering av rapporter idag, vänligen kontakta er kundansvarig på Stratsys för vidare dialog då det är en Enterprise-/tilläggstjänst.

 

För att kunna följa samtliga steg i denna manualartikel krävs följande två kompetenser:

Stratsys-administratör med utvecklarbehörighet i Stratsys plattform för att ändra rapporter och rapportmallar, samt skapa en klient som har rätt att konsumera Stratsys Webbpublicerade rapporter.

Webbredaktör/webbutvecklare/HTML/CSS-kunnig person som kan lägga upp och ändra sidor på den webbplats där innehållet ska bäddas in.

Snabblänkar

Uppsättning

Publicering av rapporter

Vanliga frågor (FAQ)

Teknisk konfiguration

Webbpublicering av rapporter innebär möjligheten att publicera utvalda rapporter från Stratsys på en webbplats, antingen internt på ett intranät eller på en publik webbplats. Rapporterna blir interaktiva men behåller självklart sitt ursprungliga utseende och innehåll. ​Med hjälp av integrationen har ni möjlighet att låta fler ta del av era rapporter och ni väljer själva vilka rapporter från Stratsys som ska publiceras.

De interaktiva rapporterna är lättillgängliga och mycket enklare att ta till sig än exempelvis en platt PDF. Ni slipper även manuell handpåläggning vid publicering av rapporter genom direkt synkronisering till Stratsys.

Det finns flera tekniska fördelar med webbpublicerade rapporter:

  • Plug and play - lägg in Stratsys script-taggar i valfri sidmall på er hemsida och ni är igång!
  • Möjlighet att anpassa utseende med hjälp av CSS för att passa in på er hemsida​
  • Stöd för att visa utvalda enheters rapporter på specifika delar av er hemsida​
  • Enkelt att styra vilka rapporter ni vill publicera​
  • Tillgänglighetsanpassad enligt nivå AA. Detta kräver dock att ert innehåll i rapporten är tillgänglighetsanpassat.

De rapporter som publiceras från Stratsys är interaktiva och har en direkt koppling mot Stratsys, om det är något ni vill justera i rapporten kan ni alltså klicka er in till Stratsys genom den publicerade rapporten. Ni har möjlighet att justera designen för att anpassa den till er hemsida men innehållet förblir oförändrat.

Uppsättning

Steg 1. Skapa en klient som har rätt att konsumera de publicerade rapporterna 

För att utföra detta steg, se artikeln om hur ni skapar en klient av typen "Stratsys Report Client".


Steg 2. Publicering av rapporter i Stratsys

Rapporter kan endast publiceras om de är klarmarkerade. Detta är för att säkerställa att inget ofärdigt publiceras på er hemsida. För att välja ut vilka rapporter som ska publiceras på er hemsida går ni till rapportens inställningar (kugghjulet) och väljer .

Därefter bockar ni i "Publicera klarmarkerade rapporter" för att markera rapporter som tillängliga i webbpubliceringen.



Steg 3. Lägg in scripttaggar på er webbplats enligt den tekniska konfigurationen

Bädda in ett av de tre kodblocken som visas under teknisk konfiguration på er hemsida och konfigurerar även stylingen så att den passar er grafiska profil om ni så önskar.

Exempel på enklast möjliga uppsättning (där company och client-id ersätts med er egen konfiguration)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <script src="https://stratsys-runtime.svc.stratsys.com"></script>
        <stratsys-public-runtime company="democompany" client-id="0000-1111-2222-33">
            <stratsys-public-reports show-overview="true" responsive="auto" custom-styling="false"></stratsys-public-reports>
        </stratsys-public-runtime>
    </div>
</body>
</html>​

Vanliga frågor (FAQ)

  • Bygger lösningen på inbäddning i en IFrame?​
    • Nej, lösningen bygger inte på IFrames​
  • Finns det CSS-mallar att tillgå?​
    • Ja, det finns två stycken CSS-filer längst ner i denna manualartikel som ni kan använda för att styla om rapporterna.​
  • Stödjer ni skärmuppläsningsverktyg ”X”?​
    • Vi har allmänt stöd för och följer standarder för skärmuppläsning, så det bör fungera, förutsatt att det verktyg ni använder också använder sig av dessa standarder. Vi ämnar följa WCAG 2.1, samt det som regleras av LoU (EN 301 549 V2.1.2)​
  • Går det att ha olika utseende/mallar för olika delar av organisationen?​
    • Ja, det förutsätter dock att ni använder er av olika publiceringsplatser/sajter och specificerar vilka rapporter/enheter som ska visas på respektive ställe för att respektive sajts CSS ska användas.​
  • Kan alla rapporter publiceras?​
    • De flesta rapporter kan publiceras men de behöver vara klarmarkerade för att kunna publiceras.
  • Finns det några kända begränsningar i webbpublieringsfunktionaliteten gällande rapporternas innehåll?
    • Ja. De funktioner som i dagsläget inte finns tillgängliga för webbpublicerade rapporter och därmed inte presenteras i det publicerade gränssnittet är som följer:
      • Uppladdade bilagor
      • 'Indikatorgrupper' i tabeller
  • Jag har ändrat rubriken men det uppdateras inte i webbpubliceringen
    • Detta beror på att du ändrat rubriken efter att en klarmarkering gjorts. Ändringen av rubriken behöver sparas inne i den gemensamma mallen.

  • Hur gör jag för att lägga till att enbart en rapport skall visas?
    • Ange 'report-id"="XXXX"' som attribut i scriptet för sidan där ni vill publicera rapporterna. Addera 'show-overview="false"' för att inte få med översikten.

Exempelkod:

<stratsys-public-reports
show-overview="false"
responsive="auto"
custom-styling="false"
report-id="24485"
</stratsys-public-reports>
  • Hur gör jag för att begränsa vilka enheter som visas?
    • Ange allowed-department-ids ="2, 5" för att visa enheterna 2 och 5  respektive rapporter.
<stratsys-public-reports
show-overview="true"
responsive="auto"
custom-styling="false"
allowed-department-ids="2, 5"
</stratsys-public-reports>

 

 

Teknisk konfiguration

Konfigurerbara attribut för elementet <stratsys-public-runtime>

Attribut 

Beskrivning 

Tillåtna värden 

company 

Kundkod 

Textsträng i gemener. Denna textsträng ska vara densamma som det som visas i Location då ni loggar in i Stratsys (delen innan .app.stratsys.com).

client-id 

Client ID 

Textsträng som genereras i Utvecklarportalen (Steg 1 i avsnittet Uppsättning ovan)

 

Konfigurerbara attribut för elementet <stratsys-public-reports>

Attribut 

Beskrivning 

Tillåtna värden 

report-id 

Id för vilken rapport som ska visas initialt. Kan kombineras med show-overview="false" om bara den aktuella rapporten ska vara tillgänglig.

Använd inte detta attribut om landningssidan ska vara listan över publicerade rapporter (kräver show-overview ="true") 

heltal 

show-navigation 

Slå på eller av möjlighet att navigera till översikt över rapporter samt andra enheter 

true / false 

custom-styling 

Om egen styling ska användas istället ["true" | "false" (standard)] 

true / false 

show-departments-in-report 

Om man ska kunna välja mellan de olika rapporterande enheter inne i en rapport ["true" (standard) | "false"]  

true / false 

show-overview 

Om översiktssidan ska finnas tillgänglig ["true" (standard) | "false"] 

true / false 

max-table-of-contents-depth 

Maxantal av rubriksnivåer som visas i innehållsförteckningen (minst en nivå visas alltid). Standardvärdet är 2. Sätter man värdet 0 så kommer samtliga rubriknivåer alltid visas.

heltal 

allowed-department-ids 

Om satt, visas endast enheter som har matchande id från översiktssidan och enhetsväljaren inne i rapporten 

komma-separerad lista av heltal 

responsive 

Styr det responsiva läget av applikationen. Vid värdet “auto” så kommer den automatiskt bryta vid en viss brytpunkt (i nuläget vid 1024 pixlar i skärmbredd). Vill man ha andra brytpunkter, så får man sköta detta genom eget skript som dynamiskt sätter värdet “true” vid korrekta tillfällen. 

true / false / auto 

debug 

Visar teknisk information för att underlätta felsökning och uppsättning. ["true" | "false" (standard)]  

true / false 

 

 

Script och HTML-taggar

Följande script-tagg ska alltid ligga med först i samtliga uppsättningar för att inbäddningen ska fungera

<script src="https://stratsys-runtime.svc.stratsys.com"></script> 


Därefter väljer man vilka eventuella attribut man vill använda för att styra inbäddningens valmöjligheter och utseende

Minsta möjliga konfiguration med enbart HTML

<stratsys-public-runtime  
  company="Lägg in company" 
  client-id="Lägg in client-id">
  <stratsys-public-reports></stratsys-public-reports>
</stratsys-public-runtime>

 

Utökad konfiguration med enbart HTML

<stratsys-public-runtime  
  company="Lägg in company" 
  client-id="Lägg in client-id">
  <stratsys-public-reports 
    custom-styling="false"
    responsive="auto" 
    show-overview="true" 
    show-departments-in-report="true" 
    allowed-department-ids="1,8"
    report-id="10471" > 
  </stratsys-public-reports> 
</stratsys-public-runtime> 

 

Exempel på konfiguration med HTML och JavaScript

<div id="target-element-for-stratsys-public-reports"></div> 

<script> 
    !function () { 
        var $runtime = document.createElement('stratsys-public-runtime') 
        $runtime.setAttribute('client-id', 'Lägg in company')
        $runtime.setAttribute('company', ' Lägg in client-id ')
        var $reports = document.createElement('stratsys-public-reports') 
        // VALFRITT ATT LÄGGA TILL: 
        // $reports.setAttribute('custom-styling', 'false') 
        // $reports.setAttribute(‘responsive', 'auto') 
        // $reports.setAttribute('show-overview', 'true') 
        // $reports.setAttribute('show-departments-in-report', 'true') 
        // $reports.setAttribute('allowed-department-ids', '1,8')
        // $reports.setAttribute('report-id', '10471') 

        $runtime.appendChild($reports) 
        document.querySelector('#target-element-for-stratsys-public-reports').appendChild($runtime) 
    }() 
</script> 

    Möjlighet att anpassa styling via CSS classer 

    • Rot-elementet, utgångspunkt för all styling
      stratsys-public-reports {} 
    • ​Översiktssidan
      stratsys-public-reports .stratsys-reports-overview {} 
    • Navigationsytan till vänster (bas-klass)
      stratsys-public-reports .stratsys-report-navigation {} 

    ⚠️OBS! Styling av navigationsytans bas-klass kan försämra sticky-funktionaliten. Använd primärt ".stratsys-report-navigation-content" nedan.

    • Innehållet i navigationsytan till vänster som ligger inuti sticky-funktionaliteten.
    stratsys-public-reports .stratsys-report-navigation-content {}  
    • Sektionen som innehåller allt rapportinnehåll. Kan även användas för att styra maxbredden på innehållet.
      stratsys-public-reports .stratsys-report-content {}  
    • Förskjuta innehållsförteckningen och navigering till rubrik så att dessa inte  hamnar under ett fixerad sidhuvud eller sidfot som redan existerar på sidan. T.ex. finns det ett befintligt sidhuvud som är 60 pixlar hög, så kan man sätta värdet på “top” till “-60px” 
      stratsys-public-reports dynamic-layout-sticky-screen-offsets, 

      stratsys-public-reports .stratsys-report-heading-scroll-offset  

      { top: -0px; bottom: -0px; }

      CSS-exempel:

    stratsys-public-reports .stratsys-report-navigation { 

      background: red; 



    stratsys-public-reports .stratsys-report-navigation-content a { 

      color: blue; 

    }     

    stratsys-public-reports .stratsys-report-content h1 { 

      color: green; 



    stratsys-public-reports .stratsys-report-content th:not(:nth-child(1)):not(:nth-child(2)), 

    stratsys-public-reports .stratsys-report-content td:not(:nth-child(1)):not(:nth-child(2)) { 

      text-align: right !important; 

    CSS-filer för att overrida basfunktionalitet

    För att använda sig av CSS-override-filerna ska attributet custom-styling vara satt till FALSE ovan.

    Om ni vill använda er av CSS-filerna nedan så behöver båda finnas inlästa på sidan där Stratsys-rapporten ska bäddas in. Variabelfilen innehåller de variabler som går att styla och Implementationsfilen innehåller stylingen för elementen.

     

    CSS-variabler

    CSS-implementation