Page Comparison

Expand

title	Changelog

30.09.2022 → Eingangsparameter “downloadinnewtabtarget“ hinzugefügt
26.09.2022: Widget-Dokumentation angelegt

...

Auf dieser Seite finden Sie die technische Beschreibung zur Integration des PDF-Viewers. Mit dem PDF Viewer können PDF-Dokumente gesichtet werden. Innerhalb des PDF-Viewers können viele Zusatzfunktionen wie ein Downloadbutton, ein Warenkorb, eine Suche etc. nutzen und ergänzen. Im Folgenden finden Sie den Überblick über den Inhalt dieser Seite:

...

Table of Contents

minLevel	1
maxLevel	6
outline	false
style	default
type	list
printable	true

Dieses Widget öffnet das über die Link-Id identifizierte PDF-Dokument.

Eingang

Parameter

Pflicht

Beschriebung

Beispielwert

linkID

Ja

Externe Link-ID des Uploads, der im Viewer geöffnet werden soll. Die ID kann im Infopaket-Upload am Upload erzeugt werden.

b8fd8f7c-d815-41a3-b36b-d7120821d1d1

download

Nein

Aktiviert die Downloadfunktion der PDF-Dokumente für diesen Kanal. Wenn deaktiviert, wird der Downloadbutton nicht angezeigt.

true

shopcart

Nein

Aktiviert das Warenkorbevent, dass das einbindende System zum Öffnen des Warenkorboverlays verwenden kann. Wenn deaktiviert, wird der Warenkorbbutton im PDF-Viewer nicht angezeigt.

true

shopsearch

Nein

Aktiviert das Suchevent, dass das einbindende System zur weiteren Suche verwenden kann. Wenn deaktiviert, wird der Suchbutton für den Shop nicht angezeigt.

true

externalsearch

Nein

true

donwloadinnewtab

Nein

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

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" }

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" }

Ausgang

status

Dieses Event wird immer beim Initialisieren ausgegeben.

error
complete
found

shopsearch

Dieses Event wird nur ausgegeben, wenn diese Funktion für den entsprechenden Kanal angeschaltet wurde.

Das Event beinhaltet folgende zwei Informationen.

searchterm
- String / Kann leer sein
manufacturerid
- String / Kann leer sein
callback
- thumbnailurl: String, URL zum Thumbnail des Dokumentes. Bei Abruf muss der OAuth2 Token im Header der Anfrage mitgegeben werden.
- uploaddescription: String, Uploadbeschreibung des Dokumentes
- widgetstate: String, Status des Widgets für Rücksprung. Muss dem Widget beim Rücksprung in den Parametern übergeben werden um den Status wiederherzustellen.

Code Block

{
   "searchterm":"test",
   "manufacturerid":"testid"
   "callback": {
      "searchterm":"test",
      "manufacturerid":"testid",
      "thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn"
      "uploaddescription": "Installation 2021"
   }
}

shopcart

Dieses Event wird nur ausgegeben, wenn diese Funktion für den entsprechenden Kanal angeschaltet wurde.

thumbnailurl: String, URL zum Thumbnail des Dokumentes. Bei Abruf muss der OAuth2 Token im Header der Anfrage mitgegeben werden.
uploaddescription: String, Uploadbeschreibung des Dokumentes
widgetstate: String, Status des Widgets für Rücksprung. Muss dem Widget beim Rücksprung in den Parametern übergeben werden um den Status wiederherzustellen.

Code Block

{
  "searchterm":"test",
  "manufacturerid":"testid"
  "thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn"
  "uploaddescription": "Installation 2021""
}

shopcart

Dieses Event wird bei einem Klick auf einen externen Link in einem PDF Dokument ausgegeben.

Ausgabe des im PDF Dokument angegebene Wert für den externen Link als String

...

Code Block

{
    "linkID" : "b8fd8f7c-d815-41a3-b36b-d7120821d1d1",
    "download" : false,
    "shopcart" : false,
    "shopsearch" : true,
    "externalsearch" : true,
    "donwloadinnewtab" : true,
    "style":{
        "primarycolor": "#616161",
        "secondarycolor": "#D3D3D3"
    }
}

Folgendes Codesnippet in den HTML DOM einbetten.

Code Block

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

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

Folgendes Codebeispiel wartet auf das Rückgabevent “shopsearch” von der DeepSearch.

Code Block

breakoutMode	wide

<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-pdf-viewer');
        widget_status.addEventListener('shopsearch', (statusEvent) => {
          console.log('"shopsearch" emitted: ' + statusEvent.detail)
        });
      });
</script>

Folgendes Codebeispiel wartet auf das Rückgabevent “shopcart” von der DeepSearch.

Code Block

breakoutMode	wide

<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-pdf-viewer');
        widget_status.addEventListener('shopcart', (statusEvent) => {
          console.log('"shopcart" emitted: ' + statusEvent.detail)
        });
      });
</script>

Folgendes Codebeispiel wartet auf das Rückgabevent “status” von der DeepSearch.

Code Block

breakoutMode	wide

<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-pdf-viewer');
        widget_status.addEventListener('status', (statusEvent) => {
          console.log('"status" emitted: ' + statusEvent.detail)
        });
      });
</script>

...

Expand

title	Beispielintegration "PDFViewer"

Code Block

<?php
    $systemURL = "https://real.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_pdfviewer = json_decode($result, true);

        // Widget Parameter konfigurieren
        $parameters = [
            "linkID" => "b8fd8f7c-d815-41a3-b36b-d7120821d1d1",
            "download" => true,
            "shopcart" => true,
            "shopsearch" => true,
            "externalsearch" => true,
            "donwloadinnewtab" => false,
            "style" => [
                "primarycolor" => "#b8e4f9",
                "secondarycolor" => "#D3D3D3"
            ]
        ];
        $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>PDF-Viewer-Widget funktioniert nur mit aktiviertem Javascript.</noscript>

            <!-- Widget Resourcen -->
            <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-pdf-viewer" accesstoken="<?php echo $json_pdfviewer['access_token'];?>" refreshtoken="<?php echo $json_pdfviewer['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-pdf-viewer');

                    widget_status.addEventListener('shopsearch', (statusEvent) => {
                        console.log('"shopsearch" emitted: ' + statusEvent.detail)
                    });

                    widget_status.addEventListener('shopcart', (statusEvent) => {
                        console.log('"shopcart" emitted: ' + statusEvent.detail)
                    });
                    
                    widget_status.addEventListener('status', (statusEvent) => {
                        console.log('"status" emitted: ' + statusEvent.detail)
                    });

                    widget_status.addEventListener('pdflink', (statusEvent) => {
                        console.log('"pdflink" emitted: ' + statusEvent.detail)
                    });
                });

                const body_element = document.querySelector('body');
                body_element.addEventListener('shopsearch', (statusEvent) => {
                    console.log('"shopsearch" emitted @body: ' + statusEvent.detail)
                });

                body_element.addEventListener('shopcart', (statusEvent) => {
                    console.log('"shopcart" emitted @body: ' + statusEvent.detail)
                });
                    
                body_element.addEventListener('status', (statusEvent) => {
                    console.log('"status" emitted @body: ' + statusEvent.detail)
                });

                body_element.addEventListener('pdflink', (statusEvent) => {
                    console.log('"pdflink" emitted @body: ' + statusEvent.detail)
                });
            </script>
        </div>
    </body> 
</html>

Version	Old Version 1	New Version Current
Changes made by	Florian Pieper	Anna Janzen
Saved on	06.03.2024	29.04.2024

Versions Compared

Key

Beschreibung

Inhalt

Parameter “xs-pdf-viewer”

Beispielabbildung

Beispielparameter

Beispielintegration

Beispielevent “shopsearch”

Beispielevent “shopcart”

Beispielevent “status”

Beispielcode (PHP)