Example of a Catalog Interface (SAP Library

Example of a Catalog Interface

The following excerpts are examples of the HTML and XML source code generated by a catalog engine after a user has finished selecting items for a shopping cart. You can extract the source code and display the data in a Web browser.

HTML version

In the HTML version, all the line items are placed as name/value pairs in an HTML form as shown below. This can be done as text or hidden fields. The parameter HOOK_URL has to be placed in the action parameter of that form, so that the HTML form can be sent to the SAP Business-to-Business Procurement system.

HTML Form (interface.asp):

<HTML>

<HEAD>

<H1>SAP Open Catalog Interface: HTML - Example</H1>

</HEAD>

<P>This is an example, what needs to be generated by the catalog engine, if the user is done with picking items in his shopping basket.</P>

<P>View the source of this file to see all the text inputs.</P>

<FORM action="<%=Request.QueryString("HOOK_URL")%>" method=post target=_top>

</FORM>

</BODY>

</HTML>

XML version

In the XML version, the data from a shopping cart can be generated into a separate file which is then linked to the HTML form. The XML data is expected to be in the value of an input field with the name ~xmlDocument. It can be set there dynamically using the function SAP_encode_b64(Str) , as shown in the example below. In the input field ~xmlType, you have to specify the type of schema used to generate the XML data. Possible values for this field are: ESAPO (Encoded SAP Object) and ERNO (Encoded RosettaNet Object).To view the SAP XML schema refer to the file pdi_oci.xsd in SAPNet. To access this files, enter the URL http://www.sap.com/, specifying the alias CSP/scenarios/ and choose the menu options SAP B2B Procurement ® B2B-OCI.

HTML Form (interface.asp)

<HTML>

function SAP_encode_b64(Str) {

var encStr = "";

var base64 = [

'A','B','C','D','E','F','G','H','I','J','K','L','M',

'N','O','P','Q','R','S','T','U','V','W','X','Y','Z',

'a','b','c','d','e','f','g','h','i','j','k','l','m',

'n','o','p','q','r','s','t','u','v','w','x','y','z',

'0','1','2','3','4','5','6','7','8','9','+','/' ];

for (var i = 0; i < Str.length; i += 3) {

encStr += base64[(Str.charCodeAt(i) >>> 2)];

if(!Str.charAt(i+1)) {encStr += '=='; break;}

encStr += base64[(((Str.charCodeAt(i) & 0x03) << 4) | Str.charCodeAt(i+1) >>> 4)];

if(!Str.charAt(i+2)) {encStr += '='; break;}

encStr += base64[(((Str.charCodeAt(i+1) & 0x0F) << 2) | Str.charCodeAt(i+2) >>> 6)];

encStr += base64[(Str.charCodeAt(i+2) & 0x3F)];

}

return encStr;

}

</script>

<HEAD>

<H1>SAP Open Catalog Interface: XML - Example</H1>

</HEAD>

<P>This is an example, what needs to be generated by the catalog engine,

if the user is done with picking items in his shopping basket.</P>

<P>View the source of the file 'example1.xml' to see all the items.</P>

<form action="<%=Request.QueryString("HOOK_URL")%>" method="post" name="OrderForm" onSubmit="OrderForm['~xmlDocument'].value = SAP_encode_b64(xmlid.xml)">

</form>

</BODY>

</HTML>

XML data (example1.xml)

<?xml version ="1.0"?>

</CatalogHeader>

<Description Language = "EN">Pen, Easytouch, Medium, Black</Description>

</NetPrice>

<Quote>

</Quote>

The best pen in our program, lightweight and easy to handle

</ItemText>

</ShoppingBasketItem>

</ManufacturerDescription>

</BuyerContract>

</VendorDescription>

</Product>

<Description Language = "EN">Palm Pilot, the second item</Description>

</NetPrice>

<Quote>

</Quote>

The award-winning Palm Computing organizers, designed as companion products to personal computers, enable mobile users to manage their schedules, contacts and other critical personal and business information on their desktops and remotely. Palm Computing organizers automatically synchronize their information with a personal computer locally or over a local or wide area network at the touch of a button. Their most distinguishing features include shirt-pocket size, instant response, an elegant graphical user interface and an innovative desktop docking cradle which facilitates two-way synchronization between the PC and organizer.

</ItemText>

</ShoppingBasketItem>

</ManufacturerDescription>

</BuyerContract>

</VendorDescription>

</Product>

<Description Language = "EN">Palm Pilot, the third item</Description>

</NetPrice>

<Quote>

</Quote>

The award-winning Palm Computing organizers, designed as companion products to personal computers, enable mobile users to manage their schedules, contacts, and other critical personal and business information on their desktops and remotely. Palm Computing organizers automatically synchronize their information with a personal computer locally or over a local or wide area network at the touch of a button. Their most distinguishing features include shirt-pocket size, instant response, an elegant graphical user interface and an innovative desktop docking cradle which facilitates two-way synchronization between the PC and organizer.

</ItemText>

</ShoppingBasketItem>

</ManufacturerDescription>

</BuyerContract>

</VendorDescription>

</Product>

</Catalog>

</BusinessDocument>