Description

On this page you will find the technical documentation for the integration and display of article documents such as environment images, data sheets, etc. in the article data. Examples of the display after integration can be found further down the page. Videos can also be displayed on the article here, such as assembly videos, application videos, etc. The table of contents can be found below:

1 Description
2 Contents
3 Integration via “xs-loader” widget
4 Parameter “xs-articledocuments”
5 Example image
- - 5.1.1 Example parameters
  - 5.1.2 Example integration
    - 5.1.2.1 Widget-Loader V1.x.x
    - 5.1.2.2 Widget-Loader V2.x.x
    - 5.1.2.3 Example event “status”
- 5.2 Sample code (PHP)

Integration via “xs-loader” widget

All widgets are integrated via the “xs-loader”.

Parameter “xs-articledocuments”

This widget displays the documents & videos from the supplier's master data.

Input

Input
Parameter	Mandatory	Description	Example value
manufacturerid	Yes	ID of the manufacturer on the system	COSMO
manufacturerpid	Yes	Factory article number	test1234
manufactureridtype	Yes	The ID type that is used for a request. The field only needs to be set if the ManufacturerID is to be used by another system. This functionality is only available if an IDHUB integration has been ordered.	odc
types	No	Restriction of the image & document types to be displayed as a “string array”. If no types are specified, all referenced images, documents & videos are displayed. Image types B_ = Photorealistic product image in color S_ = Photorealistic black and white image U_ = Unsized image (line drawing) V_ = Dimensioned image (line drawing) X_ = Exploded drawing MI = Milieu image, bathroom scene DT = Detail picture/view KV = Key visuals - guiding principles LO = Logo LS = Lifestyle (emotional images with people) Document types 2D = 2D top view 2F = 2D front view 2S = 2D side view 3C = 3D data 3B = 3D data 3A = 3D data for display in the browser AN = Animation DB = Data sheet GG = Dangerous goods data sheet IS = Instruction/operating manual MA = Assembly instructions VM = Assembly video TI = Technical information VT = Tutorial TZ = Technical drawing VI = Video WA = Maintenance instructions VP = Product video PA = Planning instructions PP = Brochures ZL = Approval SB = Circuit diagram SF = Training film PF = Maintenance instructions LE = Construction Products Regulation EL = ErP label EP = Individual brochure UP = UBA positive list WL = WELL label BS = Fire protection EX = EX protection AS = Occupational safety KS = Corrosion protection CE = CE declaration of conformity VD = VDS approval SS = Sound insulation certificate PL = Lithium battery test report	[“VI”, “VP“]
videodefaultposter	No	Image available on the web that is displayed when the video is started if no video poster is available.	https://url.png
style	No	JSON object for defining 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"`).	`"style":{ "primarycolor": "#616161", "secondarycolor": "#D3D3D3" }`
pdfviewer		The object serves as a configuration object for the PDF viewer There is currently only one top category position top right bottom left All values are implemented as pixel values. A unit does not necessarily have to be specified.	`"pdfviewer":{ "position":{ "top": "150px", "right": "20px", "bottom": "50px", "left": "20px" } }`
downloadinnewtab	No	If the parameter is set to true, a new tab opens when the download button is clicked and the file is downloaded	`{ ... "downloadinnewtab": true }`
downloadinnewtabtarget	No	To be used in conjunction with “downloadinnewtab”. Only used if “downloadinnewtab” is set to true Specifies the target that the download URL should open By default or if no value is set, “_blank” is used	`{ ... "downloadinnewtabtarget": "_parent" }`
Ausgang
status	Yes	This event is always output during initialization. error complete found not_found
dialogstatus	No	This event is output when a dialog is opened and closed. Values: open close
Eingangsevents
closeAlldialogs		This event can be emitted to the widget. The widget catches the event and then closes all dialog windows that are currently open.	Example call: `document.querySelector("xs-articledocuments").dispatchEvent(new Event("closeAllDialogs"))`

Example image

Video player

Document preview (video)

Example parameters

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

Example integration

Embed the following code snippet into the HTML DOM.

Widget-Loader V1.x.x

<!-- 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-Loader V2.x.x

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

Example event “status”

The following code example waits for the return event “status” from the “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>

Sample code (PHP)

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>

DGH Knowledge Base

Technical documentation of documents on the article