Versions Compared

Version Old Version 2 New Version Current
Changes made by

Daniela Ludwig

Daniela Ludwig

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Description

On this page you will find the technical description for integrating the PDF viewer. The PDF viewer can be used to view PDF documents. Within the PDF viewer, many additional functions such as a download button, a shopping cart, a search function, etc. can be used and added. Below you will find an overview of the content of this page:

Contents

Table of Contents
stylenone

Parameters “xs-pdf-viewer”

This widget opens the PDF document identified by the link ID.

Input

Parameter

Mandatory

Description

Example value

linkID

Yes

External link ID of the upload to be opened in the viewer. The ID can be generated in the info package upload at the time of upload.

b8fd8f7c-d815-41a3-b36b-d7120821d1d1

download

No

Activates the download function of the PDF documents for this channel. If deactivated, the download button will not be displayed.

true

shopcart

No

Enables the shopping cart event that the embedding system can use to open the shopping cart overlay. If disabled, the shopping cart button will not be displayed in the PDF viewer.

true

shopsearch

No

Activates the search event that the embedding system can use for further searches. If deactivated, the search button for the shop will not be displayed..

true

externalsearch

No

true

donwloadinnewtab

No

If the parameter is set to true, a new tab will open when you click on the download button and the file will be downloaded

true

downloadinnewtabtarget

No

To be used in conjunction with “downloadinnewtab”. Only used if “downloadinnewtab” is set to true

Specifies the destination that the download URL should open

By default or if no value is set, “_blank” is used

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

style

No

JSON object to define the primary and secondary color of the widget. The object has two fields:

  • primarycolor: Primary color. A hexadecimal string is expected as the value (Example: "#616161").

  • secondarycolor: Secondary color. A hexadecimal string is expected as the value (Example: "#D3D3D3").

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

Ausgang

status

This event is always issued during initialization.

  • error

  • complete

  • found

shopsearch

This event is only output if this function has been activated for the corresponding channel.

The event contains the following two pieces of information.

  • searchterm

    • String / Can be empty

  • manufacturerid

    • String / Can be empty

  • callback

    • thumbnailurl: String, URL to the thumbnail of the document. When retrieving, the OAuth2 token must be included in the header of the request.

    • uploaddescription: String, Document upload description

    • widgetstate: String, Status of the widget for return. Must be passed to the widget in the parameters when returning to restore the status.

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

This event is only output if this function has been enabled for the corresponding channel.

  • thumbnailurl: String, URL to the thumbnail of the document. When retrieving, the OAuth2 token must be included in the request header.

  • uploaddescription: String, Document upload description

  • widgetstate: String, Status of the widget for return. Must be passed to the widget in the parameters when returning to restore the status.

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

shopcart

This event is output when you click on an external link in a PDF document.

Output of the value specified in the PDF document for the external link as a string

Example image

...

Example parameters

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

Example integration

Embed the following code snippet into the HTML DOM.

Code Block
breakoutModefull-width
<!-- 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>

Example event “shopsearch”

The following code example waits for the return event “shopsearch” from DeepSearch.

Code Block
breakoutModefull-width
<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>

Example event “shopcart”

The following code example waits for the return event “shopcart” from DeepSearch.

Code Block
breakoutModefull-width
<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>

Example event “status”

The following code example waits for the return event “status” from DeepSearch.

Code Block
breakoutModefull-width
<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>

Sample code (PHP)

Code Block
breakoutModefull-width
<?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>

...