Page Comparison

Expand

title	Changelog

01.12.2022 → neuer Status not_found

30.09.2022 → neuen Eingangsparameter “downloadinnewtabtarget” hinzugefügt

26.09.2022 → Einbindung über Widget-Loader V2.0.0 hinzugefügt

09.08.2022 → Eingangsevent closeAllDialogs hinzugefügt

06.07.2022 → Hinzufügen Parameter style und pdfviewer, Loader-Version auf 1.0.1 geändert

04.05.2022 → Screenshots ausgetauscht

02.03.2022 → Umstellen Widget-Loader-Version auf 1.0.1

02.03.2022 → Umstellen URLs von GC nach OpenDatacheck

28.01.2022 → Erstellen der Dokumentation als Einzelseite

...

Beschreibung

Auf dieser Seite finden Sie die technische Dokumentation für die Integration und Abbildung von Artikeldokumenten wie Milieubildern, Datenblätter usw. an den Artikeldaten. Beispiele zur Darstellung nach der Integration finden Sie weiter unten auf der Seite. Hier können auch Video am Artikel mit abgebildet werden wie z.B. Montagevideos, Anwendungsvideos usw. Die Inhaltsübersicht finden Sie im Folgenden:

...

Inhalt

Table of Contents

...

Alle Widgets werden über den “xs-loader” eingebunden. Bitte machen Sie sich mit der Dokumentation https://itek-wissen.atlassian.net/wiki/spaces/SOF/pages/2841313293 vertraut.

...

Parameter “xs-articledocuments“

Dieses Widget stellt die Dokumente & Videos aus den Stammdaten des Lieferanten dar.

Eingang

Parameter

Pflicht

Beschreibung

Beispielwert

manufacturerid

Ja

ID des Herstellers auf dem System

COSMO

manufacturerpid

Ja

Werksartikelnummer

test1234

manufactureridtype

Ja

Der IDTyp der bei einer Anfrage verwendet wird. Das Feld muss nur gesetzt werden, wenn die ManufacturerID von einem anderen System verwendet werden soll.

Diese Funktionalität steht nur zur Verfügung, wenn eine IDHUB Integration beauftragt wurde.

odc

types

Nein

Einschränkung der Bild & Dokumenttypen, die zur Anzeige gebracht werden sollen als “Stringarray”. Werden keine Types angegeben, werden alle referenzierten Bilder, Dokumente & Videos angezeigt.

Bildtypen

B_ = Fotorealistisches Produktbild in Farbe
S_ = Fotorealistisches Schwarz-Weiß-Bild
U_ = Unvermaßtes Bild (Strichzeichnung)
V_ = Vermaßtes Bild (Strichzeichnung)
X_ = Explosionszeichnung
MI = Milieubild, Badszene
DT = Detailbild/-ansicht
KV = Keyvisuals – Leitbilder
LO = Logo
LS = Lifestyle (Emotionsbilder mit Menschen)

Dokumenttypen

2D = 2D-Draufsicht
2F = 2D-Frontale
2S = 2D-Seitenansicht
3C = 3D-Daten
3B = 3D-Daten
3A = 3D-Daten zur Darstellung im Browser
AN = Animation
DB = Datenblatt
GG = Gefahrgut – Datenblatt
IS = Instruktion/Bedienungsanleitung
MA = Montageanleitung
VM = Montagevideo
TI = Technische Info
VT = Tutorial
TZ = Technische Zeichnung
VI = Video
WA = Wartungsanleitung
VP = Produktvideo
PA = Planungsanleitung
PP = Prospekte
ZL = Zulassung
SB = Schaltbild
SF = Schulungsfolie
PF = Pflegeanleitung
LE = Bauproduktenverordnung
EL = ErP-Label
EP = Einzelprospekt
UP = UBA-Positivliste
WL = WELL-Label
BS = Brandschutz
EX = EX-Schut
AS = Arbeitsschutz
KS = Korrisionsschutz
CE = CE-Konformitätserklärung
VD = VDS-Zulassung
SS = Schallschutznachweis
PL = Prüfreport Lithiumbatterie

[“VI”, “VP“]

videodefaultposter

Nein

Im Web verfügbares Bild das beim starten des Videos angezeigt wird, wenn kein Videoposter vorhanden ist.

https://url.png

style

Nein

JSON-Objekt zur Definition der Primär- und Sekundär-Farbe des Widgets. Das Objekt hat zwei Felder:

primarycolor: Primärfarbe. Als Wert wird ein Hexadezimal-String erwartet (Beispiel: "#616161").
secondarycolor: Sekundärfarbe. Als Wert wird ein Hexadezimal-String erwartet (Beispiel: "#D3D3D3").

Code Block
"style":{ "primarycolor": "#616161", "secondarycolor": "#D3D3D3" }

pdfviewer

Das Objekt dient als Konfigurationsobjekt für den PDF-Viewer

Aktuell gibt es nur eine Oberkategorie

position
- top
- right
- bottom
- left

Alle Werte werden als Pixel-Werte implementiert. Eine Einheit muss nicht zwingend angegeben werden.

Code Block
"pdfviewer":{ "position":{ "top": "150px", "right": "20px", "bottom": "50px", "left": "20px" } }

downloadinnewtab

Nein

Wird der Parameter auf true gesetzt, so öffnet sich beim klick auf den Downloadbutton ein neuer Tab und die Datei wird heruntergeladen

Code Block
{ ... "downloadinnewtab": true }

downloadinnewtabtarget

Nein

In Verbindung mit “downloadinnewtab” zu verwenden. Wird nur verwendet, wenn “downloadinnewtab” auf true gesetzt ist

Gibt das Ziel an, das die Download-URL öffnen soll

Im Standard oder wenn kein Wert gesetzt ist, wird “_blank“ verwendet

Code Block
{ ... "downloadinnewtabtarget": "_parent" }

Ausgang

status

ja

Dieses Event wird immer beim Initialisieren ausgegeben.

error
complete
found
not_found

dialogstatus

Nein

Dieses Event wird beim öffnen und schließen eines Dialoges ausgegeben. Werte:

open
close

Eingangsevents

closeAlldialogs

Dieses Event kann an das Widget emittet werden. Das Widget fängt das Event und schließt daraufhin alle zu Zeit geöffneten Dialogfenster.

Beispielaufruf:

Code Block
document.querySelector("xs-articledocuments").dispatchEvent(new Event("closeAllDialogs"))

Beispielabbildung

...

Image Modified

Beispielparameter

Code Block

breakoutMode	wide

{
   "channelid":2,
   "manufacturerpid":"test",
   "manufacturerid":"testid",
   "manufactureridtype":"opendatacheck_shk",
   "types":[
      "VI",
      "VP",
      "VM"
   ],
   "style":{
      "primarycolor": "#616161",
      "secondarycolor": "#D3D3D3"
   },
   "pdfviewer":{
             "position":{
                   "top": "150px",
                   "right": "20px",
                   "bottom": "50px",
                   "left": "20px"
             }
    }
}

Beispielintegration

Folgendes Codesnippet in den HTML DOM einbetten.

Code Block

breakoutMode	wide

<!-- Widget -->
<xs-loader 
    accesstoken="[acccesstoken]" 
    refreshtoken="[refreshtoken]" 
    targeturl="https://2.0.open-datacheck.de" 
    widget="xs-articledocuments" 
    widgetmode="true" 
    language="de" 
    parameter="ewogICAiY2hhbm5lbGlkIjoyLAogICAibWFudWZhY3R1cmVycGlkIjoidGVzdCIsCiAgICJtYW51ZmFjdHVyZXJpZCI6InRlc3RpZCIsCiAgICJtYW51ZmFjdHVyZXJpZHR5cGUiOiJvcGVuZGF0YWNoZWNrX3NoayIsCiAgICJ0eXBlcyI6WwogICAgICAiVkkiLAogICAgICAiVlAiLAogICAgICAiVk0iCiAgIF0KfQ==">
</xs-loader>

<!-- Widget Resourcen -->
<script src="https://widget.itek.de/xs-loader/1.0.1/runtime.js" defer></script>
<script src="https://widget.itek.de/xs-loader/1.0.1/polyfills.js" defer></script>
<script src="https://widget.itek.de/xs-loader/1.0.1/main.js" defer></script>

Code Block

<!-- Widget -->
<xs-loader 
    accesstoken="[acccesstoken]" 
    refreshtoken="[refreshtoken]" 
    targeturl="https://2.0.open-datacheck.de" 
    widget="xs-articledocuments" 
    widgetmode="true" 
    language="de" 
    parameter="ewogICAiY2hhbm5lbGlkIjoyLAogICAibWFudWZhY3R1cmVycGlkIjoidGVzdCIsCiAgICJtYW51ZmFjdHVyZXJpZCI6InRlc3RpZCIsCiAgICJtYW51ZmFjdHVyZXJpZHR5cGUiOiJvcGVuZGF0YWNoZWNrX3NoayIsCiAgICJ0eXBlcyI6WwogICAgICAiVkkiLAogICAgICAiVlAiLAogICAgICAiVk0iCiAgIF0KfQ==">
</xs-loader>

<!-- Widget Resourcen -->
<link rel="stylesheet" href="https://widget.itek.de/xs-loader/2.0.0/styles.css">
<noscript><link rel="stylesheet" href="https://widget.itek.de/xs-loader/2.0.0/styles.css"></noscript>
<script src="https://widget.itek.de/xs-loader/2.0.0/xs-loader.js" defer></script>

Beispielevent “status”

Folgendes Codebeispiel wartet auf das Rückgabevent “status” von dem “articledocuments” Widget.

Code Block

breakoutMode	wide
language	php

<script defer>
      // Auf ein Event vom Widget "xs-loader" warten. 
      //Wenn das Event "true" ist, kann ein Eventlistener für die DeepSearch registriert werden
      const loader_element = document.querySelector('xs-loader');
      loader_element.addEventListener('loadfinished', (loadEvent) => {
        console.log("Load finished: " +  loadEvent.detail);
        
        // Auf ein Event vom Widget warten.
        const widget_status = document.querySelector('xs-articledocuments');
        widget_status.addEventListener('status', (statusEvent) => {
          console.log('"status" emitted: ' + statusEvent.detail)
        });
      });
</script>

Beispielcode (PHP)

Expand

title	Beispieleinbindung

Widget-Loader V1.x.x

Code Block

<?php
    $systemURL = "https://2.0.open-datacheck.de"; // URL der Anlage, von der das Widget eingebunden werden soll
    $systemUsername  = ""; // Benutzer auf der Anlage
    $systemPassword = ""; // Passwort des Anlagen-Benutzeres
    $xsloaderVersion = "1.0.1"; // Version des XS-Loader Widgets
    $phpDebug = true; // Debugmode für den PHP Teil
    $phpDisableSSLVerify = true;

    $params = array(
        'grant_type' => 'password',
        'client_id' => 'article_search_client',
        'username'=> $systemUsername,                
        'password' => $systemPassword,
        'scope' => 'customer_portal_view_article_data_30',
    );
    
    try{
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $systemURL . "/oauth2/token");
        curl_setopt($ch, CURLOPT_POST, TRUE);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        
        if( $phpDisableSSLVerify) {
            //Disable CURLOPT_SSL_VERIFYHOST and CURLOPT_SSL_VERIFYPEER by
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        }
       
        $result = curl_exec($ch);
        if(curl_exec($ch) === false && $phpDebug) 
        {
            echo 'Curl-Fehler: ' . curl_error($ch);
        }
        $json_deepsearch = json_decode($result, true);

        // Widget Parameter konfigurieren
        $parameters = [
            'manufacturerid' => "test_id",
            'manufacturerpid' => "test_product_id",
            'manufactureridtype' => "opendatacheck_shk",
			'types' => ['VP','VM','VI']
			
        ];
        $jsonParameters = json_encode($parameters);
        $base64Parameters = base64_encode($jsonParameters);
    }catch (Exception $e) {
        if( $phpDebug)
        {
            echo 'Exception abgefangen: ',  $e->getMessage(), "\n";
        }
    }
    
    curl_close($ch);
?>

<html>
    <head>
        <title>Widget Integration Test</title>
    </head>

    <body>
        <noscript>
            Documents funktioniert nur mit aktiviertem Javascript.
        </noscript>

        <!-- Widgetcontainer an die Stelle kopieren, wo das Widget angezeugt werden soll --> 
        <div id="widget-container" class="widget-container" >
            <!-- vor das widget-->
            <noscript>Articledocuments funktioniert nur mit aktiviertem Javascript.</noscript>
            <link rel="stylesheet" href="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/styles.css">
            <noscript><link rel="stylesheet" href="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/styles.css"></noscript>
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/runtime.js" defer></script>
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/polyfills.js" defer></script>
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/main.js" defer></script>

            <!-- Widget -->
            <xs-loader widget="xs-articledocuments" accesstoken="<?php echo $json_deepsearch['access_token'];?>" refreshtoken="<?php echo $json_deepsearch['refresh_token'];?>" targeturl="<?php echo $systemURL ?>" language="de" widgetmode=true parameter="<?php echo $base64Parameters; ?>"></xs-loader>
			<script defer>
            // Auf ein Event vom Widget "xs-loader" warten. 
            //Wenn das Event "true" ist, kann ein Eventlistener für die DeepSearch registriert werden
            const loader_element = document.querySelector('xs-loader');
            loader_element.addEventListener('loadfinished', (loadEvent) => {
              console.log("Load finished: " +  loadEvent.detail);
              
              // Auf ein Event vom Widget warten.
              const widget_status = document.querySelector('xs-articledocuments');
              widget_status.addEventListener('status', (statusEvent) => {
                console.log('"status" emitted: ' + statusEvent.detail)
              });
            });
            </script>
        </div>
    </body> 
</html>

Widget-Loader V2.x.x

Code Block

<?php
    $systemURL = "https://2.0.open-datacheck.de"; // URL der Anlage, von der das Widget eingebunden werden soll
    $systemUsername  = ""; // Benutzer auf der Anlage
    $systemPassword = ""; // Passwort des Anlagen-Benutzeres
    $xsloaderVersion = "2.0.1"; // Version des XS-Loader Widgets
    $phpDebug = true; // Debugmode für den PHP Teil
    $phpDisableSSLVerify = true;

    $params = array(
        'grant_type' => 'password',
        'client_id' => 'article_search_client',
        'username'=> $systemUsername,                
        'password' => $systemPassword,
        'scope' => 'customer_portal_view_article_data_30',
    );
    
    try{
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $systemURL . "/oauth2/token");
        curl_setopt($ch, CURLOPT_POST, TRUE);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        
        if( $phpDisableSSLVerify) {
            //Disable CURLOPT_SSL_VERIFYHOST and CURLOPT_SSL_VERIFYPEER by
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        }
       
        $result = curl_exec($ch);
        if(curl_exec($ch) === false && $phpDebug) 
        {
            echo 'Curl-Fehler: ' . curl_error($ch);
        }
        $json_deepsearch = json_decode($result, true);

        // Widget Parameter konfigurieren
        $parameters = [
            'manufacturerid' => "test_id",
            'manufacturerpid' => "test_product_id",
            'manufactureridtype' => "opendatacheck_shk",
			'types' => ['VP','VM','VI']
			
        ];
        $jsonParameters = json_encode($parameters);
        $base64Parameters = base64_encode($jsonParameters);
    }catch (Exception $e) {
        if( $phpDebug)
        {
            echo 'Exception abgefangen: ',  $e->getMessage(), "\n";
        }
    }
    
    curl_close($ch);
?>

<html>
    <head>
        <title>Widget Integration Test</title>
    </head>

    <body>
        <noscript>
            Documents funktioniert nur mit aktiviertem Javascript.
        </noscript>

        <!-- Widgetcontainer an die Stelle kopieren, wo das Widget angezeugt werden soll --> 
        <div id="widget-container" class="widget-container" >
            <!-- vor das widget-->
            <noscript>Articledocuments funktioniert nur mit aktiviertem Javascript.</noscript>
            <link rel="stylesheet" href="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion;?>/styles.css">
            <script src="https://widget.itek.de/xs-loader/<?php echo $xsloaderVersion ?>/xs-loader.js" defer></script>

            <!-- Widget -->
            <xs-loader widget="xs-articledocuments" accesstoken="<?php echo $json_deepsearch['access_token'];?>" refreshtoken="<?php echo $json_deepsearch['refresh_token'];?>" targeturl="<?php echo $systemURL ?>" language="de" widgetmode=true parameter="<?php echo $base64Parameters; ?>"></xs-loader>
			<script defer>
            // Auf ein Event vom Widget "xs-loader" warten. 
            //Wenn das Event "true" ist, kann ein Eventlistener für die DeepSearch registriert werden
            const loader_element = document.querySelector('xs-loader');
            loader_element.addEventListener('loadfinished', (loadEvent) => {
              console.log("Load finished: " +  loadEvent.detail);
              
              // Auf ein Event vom Widget warten.
              const widget_status = document.querySelector('xs-articledocuments');
              widget_status.addEventListener('status', (statusEvent) => {
                console.log('"status" emitted: ' + statusEvent.detail)
              });
            });
            </script>
        </div>
    </body> 
</html>

...

Version	Old Version 2	New Version Current
Changes made by	Anna Janzen	Anna Janzen
Saved on	29.04.2024	29.04.2024

Versions Compared

Key

Beschreibung

Inhalt

Integration per “xs-loader” Widget

Parameter “xs-articledocuments“

Beispielabbildung

Beispielparameter

Beispielintegration

Widget-Loader V1.x.x

Widget-Loader V2.x.x

Beispielevent “status”

Beispielcode (PHP)