web interface builder - archive · 2019. 11. 12. · sap ag2004, t itl eof p rsen aon / spe k n m /...

Olaf FischerSAP NetWeaver RIG BI, SAP AG

Web Interface Builder

Adding Custom JavaScript

Web Interface Extension

Overview


SAP AG 2004, Title of Presentation / Speaker Name / 3

Learning Objectives

As a result of this know how network call, you will be able to:n Explain the concepts and basic functionalities of the Web Interface

Buildern Describe examples for extending the Web Interfacen Extend a Web Interface using JavaScript and the Web Interface

Extension


General Information – Web Interfaces

Web based planning applications use the Business-Server-Page technology (BSP).

Based on Web Interface Builder (WIB) customizing the system generates ABAP, HTML and JavaScript source code establishing an executable BSP application.

Web based planning applications can run standalone or within theportal environment.

In SAP BW 3.5 reporting and planning use different design tools:nWeb Application Designer (WAD)nWeb Interface Builder (WIB)


Features of a Web Based Planning Application

Several types of planning functions allow automatic creation, change and deletion of transaction data.

Changes of transaction data are performed on the plan data buffer. The update of SAP BW is done on save only.

All records that are changed / created are validated againstnmaster datan combination rules (characteristic relationships)

Variables make the selections andparametrisations flexible

Manual planning is doneusing so called planning layouts


Features of the Web Interface Builder

The Web Interface Builder creates planning applications based on planning objects created in the planning workbench (e.g. layouts, functions).

Main features:n Arrange planning objectsn Define User Interface (UI) based interactionn Provide set of UI representations for variables, functions and layouts

Main options for arranging web page layout:n HTML-Tablesn Tabstripsn Container

è Very flexible user interface design possible.



Overview



Screenshot of the Web Interface Builder


Screenshot of a Delivered Planning Application 1


Screenshot of a Delivered Planning Application 2



Overview



Adding Java Script

HTML and JavaScript is added using the text component.n It will not be overwritten on regenerationn They reside in the <body> section of the html pagen The position in the HTML page is determined by the location in the component

tree.n Hint: Place text component (containing JavaScript) below component to be

accessed.

What is a component in the context of the WIB? Some examples:


How to Add Java Script – Part 1 - Demo

1. Start the Web Interface Builder using transaction BPS_WB.

2. Open the Web Interface to be enhanced.

3. Right click on the page node to add a new subcomponent.

4. Choose the text component

5. Give the component a name. In the example we use HTMLContent.


How to Add Java Script – Part 2 - Demo

6. Set the value for property HTML to True.Press F4 on the value for the property Text.

7. Choose the option Edit Long Text.

8. Enter the HTML-fragments


Example: Runtime of Last Server Roundtrip

By pressing the button Response Time a popup shows the time of the last Roundtrip. This is very helpful for performance analysis.

<script language="JavaScript" type="text/javascript">function ShowResponseTime() {var bspForm = document['bspform'];alert („Response time of last server roundtrip: "

+ bspForm.elements["bps-stat_roundtrip"].value + " ms");

}</SCRIPT><input class ="sapBtnStd"

type ="button" value = "Response Time" onClick= "ShowResponseTime()">


Motivation: Embed BEx Web Application

A Web Interface contains more or less a complete set of elementsand information to perform a certain planning task.

Typically there are also BEx Web Applications or BW Queries involved for e.g. display the plan data in a different context or to display more details

But how to integrate them?è Adding an IFRAME to the

planning applicationè Let the URL point to a BEx

Web Applicationè Propagate BPS variable settings

to the BEx Web Application byadding parameters to the URL.


Example: Embed BEx Web Application – Part 1

1. Create an iframe containing the BEx Web Application

<iframe id =„myWebAppl" src="/sap/bw/BEx?cmd=ldoc&TEMPLATE_ID=MYTEMPLATE" style="width:800;height:150"/>

2. Create function that extracts the key value from BPS variable

<script language="JavaScript" type="text/javascript">function varValueConvert(dispValue){// Expected format of variable selector: Text(Key) or Key

var keySection = dispValue.match(/\(.*?\)/);if (keySection){

var keyValue = keySection[0].replace(/\(|\)/g,"");return keyValue;

} else { return dispValue;

}}


Example: Embed BEx Web Application – Part 2

3. Setup constants for URL parameters

var frame = document.getElementById(‚myWebAppl');var url = '/sap/bw/BEx?cmd=ldoc&TEMPLATE_ID=';var queryVar1 = '&VAR_NAME_1=VARNAME&VAR_VALUE_EXT_1=';var appl = 'MYTEMPLATE';var bpsVarvl1 = '<%=descr(VarvlSel_Product/value)%>';

4. Construct the new URLbpsVarvl1 = varValueConvert(bpsVarvl1);

url = url + appl + queryVar1 + bpsVarvl1;

// remove possible white spacesurl = url.replace(/ /,"");

// set source attribute of iframe to new URLframe.src = url;</script>


Screenshot of an Embedded BEx Web Application

Web based Planning Application

BEx Web Application



Overview



Technical background information

When creating a Web Interface using the Web Interface Builder the system generates a BSP page based on the customizing.

The BSP event handlers for OnInitialisation and OnInputprocessingare implemented in the class cl_upwb_bsp_appl.

By creating subclasses and using the redefinition capability of ABAP OO, the standard behavior can be changed and/or new functionalities added.

Methods for redefinition (technical name):n Loadn Dispatchn Initialisationn Inputprocessingn FilterMessages


Example: Starting a Web Interface

When starting a Web Interface the followings method are called:

Launch URL in Web Browser:1. Load

For adding a task that should be performed only once on initial execution. There is access to all components possible. As an example you can switch the layouts to display mode.

2. InitialisationIt is called once for each server response.

3. DispatchEach action on a component is routed via the dispatch method. Hence it is called at least once for each component that is involved in the current web interface.

4. MessagefilterAllows filtering/changing of messages, e.g. show warnings and error only.

The response page is shown in the Web Browser.


Example: Refresh of Web Interface

When refreshing a Web Interface the following methods are called:

Transfer content to application server:1. Input Processing

It is called once for each input processing.2. Dispatch

Each action on a component is routed via the dispatch method. Hence it is called at least once for each component that is involved in the current web interface.

The preparation of the response page is started.


Example: Key Figure Validation of Manual Input

METHOD dispatch.* 1. Call standard processingCALL METHOD super->dispatch

* 2. Check if dispatcher calls a layout ready to validate

* 3. Add your own rule to determine if data of this specific layout should be validated.

* 4. Specify the set of cells that should bevalidated and apply the validation rule.

* 4a. Add your own validation rule.ENDMETHOD.Note: The how to guide How to… Validate Key Figure Values in Manual Planning describes all details for a full implementation example.


Further Information

NetWeaver How to guides:http://service.sap.com/nw-howtoguides => Business IntelligencenWIB and JavaScript:

How to… Integrate BEx Web Applications into BPS Web InterfacenWeb Interface Extension:

How to… Run Planning Sequences on Save and other events (WEB) How to… Validate Key Figure Values in Manual Planning

SAP Developer Networkwww.sdn.sap.com => Business Intelligence => Forums

http://service.sap.com/nw-howtoguides

http://www.sdn.sap.com


Questions?

Q&A


nNo part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.nSome software products marketed by SAP AG and its distributors contain proprietary software components of other

software vendors.nMicrosoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. n IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries,

pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or registered trademarks of IBM Corporation in the United States and/or other countries.nOracle is a registered trademark of Oracle Corporation.nUNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.nCitrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered

trademarks of Citrix Systems, Inc.nHTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium,

Massachusetts Institute of Technology. n Java is a registered trademark of Sun Microsystems, Inc.n JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and

implemented by Netscape. nMaxDB is a trademark of MySQL AB, Sweden.nSAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver and other SAP products and services mentioned herein

as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in 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 document serves informational purposes only. National product specifications may vary.nThese materials are subject to change without notice. These materials are provided by SAP AG and its affiliated

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 with respect 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 and services, if any. Nothing herein should be construed as constituting an additional warranty.

Copyright 2004 SAP AG. All Rights Reserved

web interface builder - archive · 2019. 11. 12. · sap ag2004, t itl eof p rsen aon / spe k n m /...

Documents