PRINT FROM SAP HELP PORTALDocument:HTML Integration

File name:saphelp_nw73ehp1_en_2d_4004d446ee49b181c64e750481e982_content.pdf

URL:http://help.sap.com/saphelp_nw73ehp1/helpdata/en/2d/4004d446ee49b181c64e750481e982/content.htm

Date created:November 02, 2012

© 2012 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. Theinformation contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components ofother software vendors. Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System ads,System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400,AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes,BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity,Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Adobe, theAdobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Oracle is aregistered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame,WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks ofW3C ®, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of SunMicrosystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAPBusiness ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany andin several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this documentserves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and itsaffiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions withrespect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products andservices, if any. Nothing herein should be construed as constituting an additional warranty.

PUBLIC© 2012 SAP AG. All rights reserved.

Page 1 of 3

HTML Integration

The following UI elements are provided for integrating HTML into Web Dynpro applications:

HTMLIsland

HTMLContainer

IFrame

The table below summarizes the essential differences between the UI elements for HTML integration:

HTMLIsland HTMLContainer IFrame

ApplicationCases

You can embed interactive,stateful content (forexample, charts) into yourWeb Dynpro applications.

You can integrate HTML or JavaScript-based UI controls into yourWeb Dynpro application (for example, an enhanced UI control forprocessing formatted text). You can enhance Web Dynpro UIelements with HTML (for example, add a background image to aTable ).

You can display stateless content(images, documents, etc.) usingyour own source URI. JavaScriptand CSS sources cannot beembedded.

Creating HTML HTML is created on theclient side. This means theHTMLIsland contentremains stable on theclient.

HTML is created on the server side. As a result theHTMLContainer content is rebuilt with each server roundtrip.

The content of the IFrameremains stable on the client.

Communicationbetween WebDynpro and UIElements forHTML Integration

Events are fired to the WebDynpro back end withJavaScript.For more information, see:Communication betweenWeb Dynpro and UIElements for HTMLIntegration

Events are fired to the Web Dynpro back end with JavaScript.For more information, see: Communication between Web Dynproand UI Elements for HTML Integration

Communication between WebDynpro and IFrame takes placeindirectly using Portal Eventing .

Type of Integration HTML is embedded in theDOM.

HTML is embedded in the DOM. HTML is integrated indirectly, it isnot embedded in the DOM.

Communication between Web Dynpro and UI Elements for HTMLIntegration

Web Dynpro communicates with HTMLIsland and HTMLContainer using JavaScript calls, which you can create with interface IF_WD_HTML_SCRIPT_CALL.You can create an instance of this interface with static method NEW_CALL of class CL_WD_HTML_SCRIPT_CALL .

With method ADD_SCRIPT_CALL you can add a JavaScript call reference to a Web Dynpro UI element of type HTMLIsland or HTMLContainer( CL_WD_ABSTRACT_HTML_ELEMENT ):

1. {HTMLIslandReferenz}->add_script_call( {scriptCall Typ IF_WD_HTML_SCRIPT_CALL} ).

With method SET_DESTROY_SCRIPT_CALL you can set a call on HTMLIsland or HTMLContainer , which is executed if the instance of HTMLIsland orHTMLContainer is closed on the browser:

1. {HTMLElement}->set_destroy_script_call( {scriptCall Typ IF_WD_HTML_SCRIPT_CALL} )

You can create a reference to a JavaScript call with method CL_WD_HTML_SCRIPT_CALL=>NEW_CALL

Example

Firing JavaScript Calls from the Back End

In the browser is a JavaScript object myJSVariable that has the function greet with a string parameter. To formulate the callmyJSVariable.greet('Hello World') using API IF_WD_HTML_SCRIPT_CALL , you can use the following statement:

1. cl_wd_html_script_call=>new_call( )->function( `greet`2. )->variable( `myJSVariable`3. )->add_string( `Hello World` ).

Triggering Web Dynpro Events in the Browser

Syntax

Syntax

Syntax

PUBLIC© 2012 SAP AG. All rights reserved.

Page 2 of 3

Web Dynpro UI element HTMLIsland contains event myEvent . To call this event on the client, a reference to the callback API must first be passed as aparameter of a JavaScript call.

1. {HTMLIslandReferenz}->add_script_call( cl_wd_html_script_call=>new_call( )->variable( ` MyHTMLIsland ` )->function( `setCallbackAPI` )->add_callback_api( ) )

The client-side JavaScript object must contain a setCallbackAPI function with a parameter. This parameter contains the reference to the callback API. Totrigger a Web Dynpro action, you can use the following reference:

1. {callbackAPIReferenz}.fireEvent('myEvent',dataString);

Syntax

Syntax

PUBLIC© 2012 SAP AG. All rights reserved.

Page 3 of 3