Technical documentation of documents on the article

Owned by Daniela Ludwig
Last updated: 17.09.2024
6 min read

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:

Contents

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

 

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:

Example image

1bb4a2aa-f4f0-4ba9-bd15-236cf96f59db.png
Video player

 

57f58dcf-5346-4810-acad-e8dcfad92f77.png
Document preview (video)

Example parameters

Example integration

Embed the following code snippet into the HTML DOM.

Widget-Loader V1.x.x

Widget-Loader V2.x.x

Example event “status”

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

Sample code (PHP)

Widget-Loader V1.x.x

Widget-Loader V2.x.x