This article describes, how to include arbitrary HTML-code in a CHIP, which can be integrated in Page Builder for Web Dynpro ABAP. This technique enables you to embbed typical Mashup content like YouTube Videos, Google Gadgets and many more. To achieve this, the HTML code needs to be located in a Business Server Page (BSP) on the ABAP application server. There is an URL associated with each BSP, and therefore CHIPs pointing to BSPs can be defined using the Web CHIP.
The feature is supported for systems with SAP_BASIS >= 7.02. This is the case for systems on SAP NetWeaver 7.02 or SAP enhancement package 5 for SAP ERP 2005.
Get a HTML snippet
There are many sources of HTML, e.g. the administrative functions of Google Gadgets used in iGoogle. Here's the Link to the Google test environment for the Google maps gadget, where the HTML can be retrieved by pressing 'Get the code'.
Create a BSP application and BSP page.
- In SE80, create a BSP application...
- ... and a BSP page
Insert HTML into BSP
Replace the template code by the snippet code. Here, we insert (and format) the Google Gadget code for Google-Maps got from the Google test environment in the first part. The Code is marked red. Make sure, to change the editor settings in SE80 (Utilities -> Settings -> ABAP Editor) to 'Back-End Editor' or 'Front-End Editor (Old)', because the new Front-End Editor performs word-wraps and will corrupt the value of the 'src' attribute.
Add URL-Parameters for location
Now, we want to add an URL-parameter 'q' to our BSP, so an external caller can specify the location to be displayed. To achieve this, we slightly change the code a bit: the URL attribute used in the script tag is now filled within an inplace ABAP section within the BSP. In the ABAP, the URL parameter 'q' is retrieved by method GET_FORM_FIELD of the BSP standard object REQUEST. The code now looks like this:
Define a CHIP
To use this BSP as a CHIP, we have to create a Page with the Pagebuilder and insert a Web CHIP with the BSP's URL. Creating a Page is documented here, so we start with a blank page called in configuration mode. Here we search for the CHIP 'Web-CHIP' in the CHIP catalog and insert it into the page:
Specify the URL by calling the panel menu entry 'Define URL'. Here, the URL has the following format:
/sap(====)/<ICF-path to BSP application>/<BSP application>/<BSP page>
For instance, the URL of the BSP page 'z_sdn_google_maps' of the BSP application 'z_sdn_example' located in the ICF node '/sap/bc/bsp/sap' would be:
The prefix (====) prevents an additional roundtrip when starting the BSP page.
In addition, we have to define the URL parameter 'q' for the address by calling the panel menu entry 'Define URL parameters':
The CHIP parameter for the location now can either be configured (by calling the panel menu entry 'or wired. If supplied by either way, wiring wins:
Switch on BSP-Caching
As the code of our BSP will not change often in end-user environments, it should be cached as long as possible on the client. This can be achieved by setting the appropriate parameter in the header data of the BSP:
Be aware, that you have to clear the browser cache after each modification of the code.
When creating BSPs, please behold the security aspects. In particular, be aware, that parameters passed by URL from the Pagebuilder have to be escaped according to their current context. This can be achieved by calling the ABAP command escape. An example is delivered in SAP_BASIS 7.02 in BSP application WDR_TEST_CHIP.
HTML-snippet of Google Gadget