BW-BPS Web Interface

7182019 BW-BPS Web Interface

httpslidepdfcomreaderfullbw-bps-web-interface 127

Olaf Fischer

SAP NetWeaver RIG BI SAP AG

Web InterfaceBuilder



Adding Custom JavaScript

Web Interface Extension

Overview

Web Interface Builder



983209 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

Builder

n Describe examples for extending the Web Interface

n Extend a Web Interface using JavaScript and the Web Interface

Extension




General Information ndash 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 35 reporting and planning use different design tools

n Web Application Designer (WAD)

n Web 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 against

n master data

n combination rules (characteristic relationships)

Variables make the selections and

parametrisations 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 (eg layoutsfunctions)

Main features

n Arrange planning objects

nDefine User Interface (UI) based interaction

n Provide set of UI representations for variables functions and layouts

Main options for arranging web page layout

n HTML-Tables

n Tabstrips

n Container

egrave Very flexible user interface design possible





Overview





Screenshot of the Web Interface Builder




Screenshot of a Delivered Planning Application 1









Overview





Adding Java Script

HTML and JavaScript is added using the text component

n It will not be overwritten on regeneration

n They reside in the ltbodygt section of the html page

n The position in the HTML page is determined by the location in the componenttree

n Hint Place text component (containing JavaScript) below component to beaccessed

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




How to Add Java Script ndash 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 nodeto add a new subcomponent

4 Choose the text component

5 Give the component a name

In the example we use HTMLContent





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

7 Choose the option Edi t Long Text

8 Enter the HTML-fragments




Example Runtime of Last Server Roundtrip

By pressing the button Respons e Time a popup shows the time of

the last Roundtrip This is very helpful for performance analysis

ltscript language=JavaScript type=textjavascriptgt

function ShowResponseTime() var bspForm = document[bspform]alert (bdquoResponse time of last server roundtrip

+ bspFormelements[ bps-stat_roundtrip]value+ ms)

ltSCRIPTgt

ltinput class =sapBtnStdtype =buttonvalue = Response TimeonClick= ShowResponseTime()gt




Motivation Embed BEx Web Application

A Web Interface contains more or less a complete set of elements

and information to perform a certain planning task

Typically there are also BEx Web Applications or BW Queries

involved for eg display the plan data in a different context or to

display more details

But how to integrate themegrave Adding an IFRAME to the

planning application

egrave Let the URL point to a BEx

Web Application

egrave Propagate BPS variable settings

to the BEx Web Application by

adding parameters to the URL




Example Embed BEx Web Application ndash Part 1

1 Create an iframe containing the BEx Web Application

ltiframe id =bdquomyWebApplsrc=sapbwBExcmd=ldocampTEMPLATE_ID= MYTEMPLATEstyle=width800height150gt

2 Create function that extracts the key value from BPS variable


function varValueConvert(dispValue)

Expected format of variable selector Text(Key) or Keyvar keySection = dispValuematch(())

if (keySection)var keyValue = keySection[0]replace((|)g)

return keyValue

else return dispValue





3 Setup constants for URL parameters

var frame = documentgetElementById(sbquomyWebAppl)var url = sapbwBExcmd=ldocampTEMPLATE_ID=var queryVar1 = ampVAR_NAME_1=VARNAMEampVAR_VALUE_EXT_1=var appl = MYTEMPLATEvar bpsVarvl1 = lt=descr(VarvlSel_Productvalue)gt

4 Construct the new URL

bpsVarvl1 = varValueConvert(bpsVarvl1)

url = url + appl + queryVar1 + bpsVarvl1

remove possible white spaces

url = urlreplace( )

set source attribute of iframe to new URLframesrc = url

ltscriptgt




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 OnInit ial isation and OnInputprocessing

are 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 andor newfunctionalities added

Methods for redefinition (technical name)

n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages




Example Starting a Web Interface

When starting a Web Interface the followings method are called

Launch URL in Web Browser

1 LoadFor adding a task that should be per formed only once on ini t ial

execut ion There is access to al l components po ssible As an example

you can swi tch the layouts to disp lay mo de

2 InitialisationIt is cal led once for each server respon se

3 DispatchEach act ion on a com pon ent is rou ted via the dispatch metho d Hence

i t is cal led at least on ce for each c omponent that is involved in th e

cu rrent web interface

4 Messagefilter

Al low s f i l ter ingchanging o f messages eg show warning s and erroron ly

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 cal led once for each input pro cessing

2 Dispatch

Each act ion on a com pon ent is rou ted via the dispatch metho d Hence



The preparation of the response page is started




Example Key Figure Validation of Manual Input

METHOD dispatch

1 Call standard processing

CALL METHOD super-gtdispatch

2 Check if dispatcher calls a layoutready to validate

3 Add your own rule to determine if dataof 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 tohellip Val idate Key Figure Values in Manual

Planning describes all details for a full implementation example




Further Information

NetWeaver How to guides

httpservicesapcomnw-howtoguides =gt Business Intelligence

n WIB and JavaScript

How tohellip Integrate BEx Web Applications into BPS Web Interface

n Web Interface Extension

How tohellip Run Planning Sequences on Save and other events (WEB)

How tohellip Validate Key Figure Values in Manual Planning

SAP Developer Network

wwwsdnsapcom =gt Business Intelligence =gt Forums




Questions

Q amp A




n No 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

n Some software products marketed by SAP AG and its distributors contain proprietary software components of other

software vendors

n Microsoft Windows Outlook and PowerPoint are registered trademarks of Microsoft Corporation

n IBM DB2 DB2 Universal Database OS2 Parallel Sysplex MVSESA AIX S390 AS400 OS390 OS400 iSeries

pSeries xSeries zSeries zOS AFP Intelligent Miner WebSphere Netfinity Tivoli and Informix are trademarks or

registered trademarks of IBM Corporation in the United States andor other countries

n Oracle is a registered trademark of Oracle Corporation

n UNIX XOpen OSF1 and Motif are registered trademarks of the Open Group

n Citrix ICA Program Neighborhood MetaFrame WinFrame VideoFrame and MultiWin are trademarks or registered

trademarks of Citrix Systems Inc

n HTML XML XHTML and W3C are trademarks or registered trademarks of W3Creg 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

n MaxDB is a trademark of MySQL AB Sweden

n SAP R3 mySAP mySAPcom 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 othercountries 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

n These 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





Overview





Learning Objectives


will be able to


Builder



Extension






technology (BSP)

















n master data











Main features





n HTML-Tables

n Tabstrips

n Container






Overview


















Overview





Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors



























Learning Objectives


will be able to


Builder



Extension






technology (BSP)

















n master data











Main features





n HTML-Tables

n Tabstrips

n Container






Overview


















Overview





Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors





























technology (BSP)

















n master data











Main features





n HTML-Tables

n Tabstrips

n Container






Overview


















Overview





Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors

































n master data











Main features





n HTML-Tables

n Tabstrips

n Container






Overview


















Overview





Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors






























Main features





n HTML-Tables

n Tabstrips

n Container






Overview


















Overview





Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors




























Overview


















Overview





Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors








































Overview





Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors



























Adding Java Script

































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors


















































ltSCRIPTgt














Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors




































Web Application















return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors



































return keyValue












url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors


































url = urlreplace( )


ltscriptgt






BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors





























BEx Web Application





Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors




























Overview













n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors



































n Load

n Dispatch

n Initialisation

n Inputprocessing

n FilterMessages














4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors





































4 Messagefilter









1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors






























1 Input Processing


2 Dispatch









METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors




























METHOD dispatch







ENDMETHOD






Further Information













Questions

Q amp A







software vendors



























Further Information













Questions

Q amp A







software vendors



























Questions

Q amp A







software vendors






























software vendors
























BW-BPS Web Interface

Documents

Transcript of BW-BPS Web Interface