Technische Dokumentation von Dokumenten am Artikel

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. Hier können auch Video am Artikel mit abgebildet werden wie z.B. Montagevideos, Anwendungsvideos usw. Die Vorschau für den Videoplayer finden Sie weiter unten.

Inhalt

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"`).	"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.	"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	{ ... "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	{ ... "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: document.querySelector("xs-articledocuments").dispatchEvent(new Event("closeAllDialogs"))

Beispielparameter

{
   "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.

<!-- 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>

<!-- 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.

<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)

Beispieleinbindung

Widget-Loader V1.x.x

<?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

<?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>