65
Advanced BEx Web Application Designer Concepts Prakash Darji NetWeaver RIG

SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Embed Size (px)

DESCRIPTION

sap netweaver

Citation preview

Page 1: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Advanced BEx Web Application Designer Concepts

Prakash DarjiNetWeaver RIG

Page 2: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 3: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 4: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 4

SAP Business Explorer Suite

SAP Business Explorer Suite (BEx)

BEx Query Designer

BEx Broadcaster

BExWeb

Analyzer

BEx WebApplication

DesignerMS Excel

Add-in

BExReport

Designer

BEx Web BEx AnalyzerBI Pattern

SAP NetWeaver Portal

SAP NetWeaverBI Info Provider3rd Party BI

BI Consumer Services

Page 5: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 5

Web Application Designer - Designing a Web Application

Designing a Web Application

Web application design takes place in the Business Explorer (BEx) Web Application Designer, a Visual Basic .NET-based, Unicode-compliant tool.

Model-driven BI applicationbuilding

– Wizards for charts, maps, command editing

– Wizard for layout elements (e.g. buttons)

– „Syntax Auto-Complete“support for Web API developers

– Easy integration of native HTML commands

New layout elements (Tab stripsetc.)New Web itemsNew chart types, e.g. GANTT chart, MTA chartDesign of planning awarebusiness applications

Page 6: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 6

Web Items and Properties Area in WAD

Grouping of web items‘Standard’ - most frequently used items‘Advanced’ - used less often‘Miscellaneous’ - special items

Item properties are grouped as well‘Display’ – all properties affecting the rendering of the item such as width, height and visibility‘Internal Display’ – all properties relating to item specific rendering, i.e. alternate table row styles for the analysis item‘Behavior’ – item specific behavior‘Data Binding’ – item specific settings such as assignment of data provider or specification of characteristics for a filter pane

Page 7: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 7

Selection of Web Items

Button GroupDisplay a group of Buttons where each button can execute one or more commands (e.g. Filter by region)

Tab Pages ItemEach tab page is assigned exactly one web item If you want to group multiple Web items on a tab page, use the Container or Container Layout Web item and assign it to the tab page

ContainerCollection of your own HTML code or an assortment of Web itemsE.g. within a tab page you may want to organize your HTML for each tab

Report ItemEmbed reports created with the new BEx Report Designer directly in your web application

Page 8: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 8

Property Pane ItemBefore, web item properties could only be changed at design time or at run time via the Web APIThe property pane now allows the user to change web item properties at runtime

Filter PaneEnables the display of multiple filter dropdown boxes for a data providerSelections can be made automatically, can be predefined or made at run time using drag & drop

Group Group one or more web items in three parts (caption, toolbar and content area)

DocumentsDocuments of all formats can now be embedded in place. No need to create frames or iFrames in the Web application Online displaying, editing & creation of documentsUse KM services on documents stored on the BI server via the BW repository managers

Selection of Web Items

Page 9: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 9

Web Application Designer: Command Wizard

Command Wizard

Leveraging the power of the WEB API in an easy & intuitive fashion

Reducing the need for customer Java scripting

Finally, specify needed information for your command and finish by clicking ‘OK’ (example: command “Export Web Application”).

Page 10: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 10

Command Wizard Example: Calling Conditions Dialog

With the „Calling Conditions Dialog“ command you can create orchange a condition.

Page 11: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 11

Web Application Designer: Changed Web Items (1)

Dropdown BoxMerged with ‘Query View – Selection’ web item, thus allowing the selection of characteristic values to filter data as well as navigating among different query viewsUser definable entries with associated Web API commandsThe ONLY_VALUES parameter is no longer supportedThe parameters VIEW_DD_USE_BUTTONS and VIEW_DD_BUTTONS_IN_ROWS from the ‘Query View – Selection’ Web item are no longer supported. Use the new ‘Button Group’ web item instead

Navigation AreaSupersedes the ‘Navigation Block’ web item, supporting Drag & Drop to change the navigational state

Info FieldReplaces the ‘Filter’ and ‘Text Elements’ web items

Text ItemEnhances the SAP NetWeaver 2004 ‘Label’ item by allowing the display of language dependent text

Page 12: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 12

Web Application Designer: Changed Web Items (2)

Analysis ItemFormerly known as the ‘Table Item’New capability to sort Now supports drag & drop to change the navigational state

Supports select and multiselect of rows and columns

Page 13: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 13

Web Application Designer: Replaced Web Items

Role MenuReplaced by the role-based display of content in the SAP NetWeaver Portal.

Alert MonitorReplaced by the Universal Worklist (UWL) in the SAP NetWeaver Portal. With the integration of information broadcasting into the Alert Framework, this allows all alerts to be monitored centrally with a consistent user interface, regardless of origin.

Ad hoc Query DesignerReplaced by the BEx Web Analyzer.

BroadcasterIs now available as an iView in the SAP NetWeaver Portal and thus can be assigned to pages and roles.

Page 14: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 14

Architecture of Web Application Technology

<bi:bisp xmlns="http://www.w3.org/TR/REC-html40" xmlns:bi="http://xml.sap.com/2005/01/bi/wad/bisp" xmlns:jsp="http://java.sun.com/JSP/Page" > <html > <head > <title >Netweaver BI Web Application</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body >

<bi:QUERY_VIEW_DATA_PROVIDER name="DP_1" > <bi:INITIAL_STATE type="CHOICE" value="QUERY" > <bi:QUERY value="ZTIME_REP02" text="ZTIME_REP02" /> </bi:INITIAL_STATE> </bi:QUERY_VIEW_DATA_PROVIDER> <bi:TEMPLATE_PARAMETERS name="TEMPLATE_PARAMETERS" /> <bi:SCRIPT_ITEM name="SCRIPT_ITEM_1" designwidth="100" designheight="100" > <bi:SCRIPT value="biLargeData:S04NG1IUVMQ1CF9P2CMKDYLX2" /> </bi:SCRIPT_ITEM> <bi:ANALYSIS_ITEM name="ANALYSIS_ITEM_1" designwidth="400" designheight="200" > <bi:DATA_PROVIDER_REF value="DP_1" /> </bi:ANALYSIS_ITEM><!-- insert data providers, items and other template content here -->

</body> </html></bi:bisp>

SAP NetWeaver 2004s Web Template

<html xmlns="http://www.w3.org/TR/REC-html40"><head ><!-- *** Automatic Head Intermixture Start *** -->...<!-- *** Include Cascading Style Sheets *** -->...<!-- *** #1 Pre-Include Javascript *** -->...<!-- *** #2 Include Javascript *** -->...<!-- *** #3 Javascript Initialization *** -->...<!-- *** #4 Javascript After Body Load *** -->...<!-- *** Javascript Initialization End *** -->...<!-- *** Automatic Head Intermixture End *** --><title >Netweaver BI Web Application</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></meta></head><body onLoad="sapbi_page.initializePage()" class="urBdyStd urTrcBodyBox urTrcBodyBoxMrg"><!-- *** Automatic Body Intermixture Start *** -->...<!-- *** Automatic Body Intermixture End *** -->...<!-- End of Template Body: ZTEST_JS_012 -->...</body></html>

/irj/portalapps/com.sap.portal.design.urdesigndata/themes/portal/*

/irj/portalapps/com.sap.ip.bi.web.portal.mimes/web.scripting/resources/js/*

/irj/portalapps/com.sap.ip.bi.web.portal.mimes/*

Page 15: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 16: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 16

Overview of API Commands and Instructions

SAP BW 3.x Web API Commands are obsolete&FILTER_IOBJNM=0MATERIAL&FILTER_VALUE=‘1’ no longer works in the SAP NetWeaver 2004s Runtime

SAP NetWeaver 2004s Web API Commands are based off Instructions

In addition, JavaScript can directly call functions to perform operations

Offers additional flexibility in development

Page 17: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 17

SAP NetWeaver 2004s API Commands - ProcedureStep By Step:

1. Insert a Web item into your Web application, with which you can execute commands (such as the Button Group Web item). 2. Use the command wizard to create the required command. This enables you to identify the required parameters and maximize the use of the input help.3. Switch to the XHTML view of the Web Application Designer and search for the command you created.4. You can use now this command as URL parameterization. Note that:○ Nested parameters must be converted to a flat notation: parent parameters are separated by a hyphen (–), which is placed before the parameters.

– Entries in lists are marked with the corresponding index as "_N".– The command itself it passed using the command parameter

BI_COMMAND_TYPE=Name.– Command sequences are built by preceding the actual parameters with the text

bi_command_N, where "N" is the index of the command in the command sequence.

5. Special cases:

For this command, the parent parameter for the data provider parameters is INIT_PARAMETERS.Example: INIT_PARAMETERS-INITIAL_STATE=QUERY

Set Data Provider Parameters (SET_DATA_PROVIDER_PARAMETERS)

For this command, the parent parameter for the Web item parameters is INIT_PARAMETERS.Example: INIT_PARAMETERS-VISIBILITY=VISIBLE

Set Web Item Parameters (SET_ITEM_PARAMETERS)

Special FeatureSpecial Case

Page 18: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 18

SAP NetWeaver 2004s API Commands – Example 1

In the command wizard, you have set the command for setting attributes for a characteristic of the data provider. The XHTML view of the Web Application Designer displays the following result (only the INSTRUCTION node is show in this example):

<bi:INSTRUCTION ><bi:SET_ATTRIBUTES >

<bi:TARGET_DATA_PROVIDER_REF_LIST type="ORDEREDLIST" ><bi:TARGET_DATA_PROVIDER_REF index="1" value="DP_1" />

</bi:TARGET_DATA_PROVIDER_REF_LIST><bi:CHARACTERISTIC value="0D_CUSTOMER" text="" /><bi:PRESENTATION_AREA value="RESULT_SET" /><bi:ATTRIBUTE_LIST type="ORDEREDLIST" >

<bi:INFO_OBJECT_ATTRIBUTE index="1" value="0D_COUNTRY" /></bi:ATTRIBUTE_LIST>

</bi:SET_ATTRIBUTES></bi:INSTRUCTION>

This results in the following URL parameterization:&BI_COMMAND_1-BI_COMMAND_TYPE=SET_ATTRIBUTES&BI_COMMAND_1-TARGET_DATA_PROVIDER_REF_LIST-TARGET_DATA_PROVIDER_REF_1=DP_1&BI_COMMAND_1-CHARACTERISTIC=0D_CUSTOMER&BI_COMMAND_1-PRESENTATION_AREA=RESULT_SET&BI_COMMAND_1-ATTRIBUTE_LIST-INFO_OBJECT_ATTRIBUTE_1=0D_COUNTRY

Page 19: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 19

SAP NetWeaver 2004s API Commands – Example 2

In the command wizard, you have set the command for setting Web item parameters for the Web item ANALYSIS_ITEM_1. The XHTML view of the BEx Web Application Designer displays the following result (only the INSTRUCTION node is show in this example):

<bi:INSTRUCTION ><bi:SET_ITEM_PARAMETERS >

<bi:cmd_item_parameters type="ANALYSIS_ITEM" ><bi:ALTERNATE_STYLES value="" />

</bi:cmd_item_parameters><bi:TARGET_ITEM_REF value="ANALYSIS_ITEM_1" />

</bi:SET_ITEM_PARAMETERS></bi:INSTRUCTION>

This results in the following URL parameterization:&BI_COMMAND_1-BI_COMMAND_TYPE=SET_ITEM_PARAMETERS&BI_COMMAND_1-TARGET_ITEM_REF=ANALYSIS_ITEM_1&BI_COMMAND_1-INIT_PARAMETERS-ALTERNATE_STYLES=

Page 20: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 20

JavaScript API for Executing Commands (1)

You can execute commands or command sequences using JavaScript.

To execute a command, you must first generate the command and its parameters. The command object sapbi_Command and the parameter object sapbi_Parameter are available for this purpose. In the Script Web item, the command wizard provides help generating the JavaScript. Once you select the command and set the parameters, the JavaScript code is generated.

Example 1:

Command for Swapping Axes (SWAP_AXES) for the Data Provider DP_1:/* Create TARGET_DATA_PROVIDER_REF */var paramListDP_LIST = new sapbi_ParameterList();var paramDP_LIST = new sapbi_Parameter( "TARGET_DATA_PROVIDER_REF_LIST", "" );paramListDP_LIST.addParameterNameValue ("TARGET_DATA_PROVIDER_REF", "DP_1" );paramDP_LIST.setChildList (paramListDP_LIST);

/* Create Command */var commandWAP_AXES = new sapbi_Command("SWAP_AXES");commandSWAP_AXES.addParameter( paramDP_LIST );

/* Send Command */sapbi_page.sendCommand(commandSWAP_AXES);

Page 21: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 21

JavaScript API for Executing Commands (2)

sapbi_ParameterA parameter consists of a name and a value. To generate a new parameter in JavaScript, use the following syntax:var param = new sapbi_Parameter(“Name”, “Value”);Some parameters have child parameters (lists or nested parameters). For these parameters, you specify the child parameters in a parameter list (see parameter list below). To add parameter lists, you use the following method:setChildList(sapbi_ParameterList)

sapbi_CommandAn sapbi_Command object is instantiated as follows:var command = new sapbi_Command(“Name of Command”);To add a parameter object to the command, use the addParameter method. You can also the addParameterNameValue command:command.addParameterNameValue(“Name“,“Value“);command.addParameter(parameter_object);

sapbi_CommandSequenceAn sapbi_CommandSequence is a list of sapbi_Commands. The object is instantiated as follows:var cmdSeq = new sapbi_CommandSequence();The addCommand method is available to add commands to the command sequence.cmdSeq.addCommand( sapbi_Command );The command or command sequence is executed using the following method:sapbi_page.sendCommand(CommandOrCommandSequenceObject)

Page 22: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 23: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 23

Overview of Scripting Web Item

Scripting Item allows you to write JavaScript Code within Web applications

In your code block, do not include these tags:<script type="text/javascript"></script>

JavaScript Command Wizard can generate calls to direct OLAP functions

You can reference the JavaScript include file as follows in the XHTML view for the Web template:

<script src="bwmimerep:///sap/bw/mime/Customer/Javascripts/myscript.js”type="text/javascript"></script>

Page 24: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 24

XML Result Set Changes (1)

The format of the XML Query Result has changedIn SAP BW 3.x

<?xml version="1.0" encoding="iso-8859-1"?><asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0"><asx:values><AXIS_DATA><RRWS_SX_AXIS_DATA><AXIS>000</AXIS><SET><RRWS_SX_TUPLE>

...</RRWS_SX_TUPLE>

</SET></RRWS_SX_AXIS_DATA>

</AXIS_DATA></asx:values>

</asx:abap>

<?xml version="1.0" encoding="iso-8859-1"?><asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0"><asx:values><CELL_DATA><RRWS_S_CELL>...

</RRWS_S_CELL></CELL_DATA>

</asx:values></asx:abap></queryview></xml>

Page 25: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 25

XML Result Set Changes (2)

The format of the XML Query Result has changedIn SAP NetWeaver 2004s

–<xml id="DATA_PROVIDER_INFO_ITEM_1"><BICS_VIEW>

<RESULT_SET><AXES><AXIS name="ROWS">

...</AXIS><AXIS name="COLUMNS">

...</AXIS>

</AXES><DATA_CELLS>

...</DATA_CELLS>

</RESULT_SET></BICS_VIEW></xml>

Page 26: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 26

XPATH Statements for Binding (1)

XPATH Statements can be used to grab any metadata or data values and assign these dynamically to commands or web items such as the text item or dropdown

Useful for scenarios where you want to execute commands based on selection

For details and scenarios, see this blog:https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/4520

Page 27: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 27

XPATH Statements for Binding (2)

Within <= SPS9 you have web template command sequences cannot be used before rendering.

With SPS10 and greater you can use the web template command sequence before rendering.

Page 28: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 29: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 29

Container Layout vs HTML layout controls

Container LayoutA web item that allows you to control the layout and positioning of objects on the screenWell Structured Environment

HTML Layout ControlsAllow complete freeform control over layout elements on the screen

Recommendations:In general, try to use the container layout element wherever possible as this falls within the well structured framework and properties are extensible within this frameworkIf you need to include div scrolling or other layout and formatting options that aren’t available with the container layout, then you should use freeform HTML Layout Controls

Page 30: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 30

Web Application Designer: HTML Editor (1)

Layout ModeEasier creation of HTML content via the ‘Insert …’ option in the context menu Increased flexibility and control by providing access to the HTML tags as well as CSS elements, eliminating the need of detailed HTML knowledge

Page 31: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 31

Web Application Designer: HTML Editor (2)

Insert - Table

Page 32: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 32

Web Application Designer: HTML Editor (3)

Insert - Hyperlink

Launches the Command Wizard

Page 33: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 33

StyleSheets & Themes

StyleSheet Scoping (SAP NetWeaver 2004s)Format is defined by the Portal Theme StyleSheetStyleSheets in the Web application override the Portal StyleSheetIndividual <style> blocks in the BEx Web Application Designer override the stylesheets from the Portal and from the Web application

StyleSheet Scoping (SAP BW 3.x)StyleSheet is defined in the BEx Web Application DesignerPortal StyleSheet overrides the stylesheet in the web application if the application is deployed on the SAP NetWeaver PortalSpecific <style> elements in the Web application override the global Portal StyleSheet

Page 34: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 35: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 35

Buidling Blocks

Modular development allows for flexibility, scalability, and the lowest TCOWe will discuss scenarios involving modularizing Web applications built within the BEx Web Application DesignerXML Documents are becoming the best communication method to communicate and integrate applicationsPortal Eventing Framework allows modularizing portal componentsSAP NetWeaver Visual Composer and BEx Web Application Designer can be integrated with modular components!Modular components allow for use of global navigation areas

Page 36: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 36

UI Component Layout

Ensure you have the following UI Components

– Control Area – Portal creates this for you– Report Tree Area – Navigate across multiple applications– Global Input Parameters – Populate any filters or variables– Application Area – Display Report or Application

Page 37: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 37

UI Component Layout (2)

Page 38: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 38

UI Component Layout (3)

Page 39: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 39

Portal Eventing

The Enterprise Portal Client Framework (EPCF) provides an infrastructure for scripting used in iViews and by the portal.

When a business application uses more than one iView, you need the EPCF service to transfer data between the iViews. The EPCF service provides:

Mechanisms for eventing between iViews.

A Java object, called a client data bag, that serves as transient data buffer on the browser.

The EPCF implementation itself is based on JavaScript and Java applets.

Page 40: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 40

Portal Navigation API provides JavaScript methods to navigate inside the Portal

BI iViews are running in inside an iFrame (due Isolation Method URL), thereforyou must use parent.EPCM… to access the EP Client Framework

When accessing iViews and pages in the role from the Portal Content Directory (PCD), you have to add the prefix ROLES:// to the target URLEPCM.doNavigate("ROLES://portal_content/<folder>/<role>/<workset>/.../<iView>");

You can add BI commands with &dynamic_parameter to the target URL

Portal Navigation

Portal Page BW iView

EP/BW

parent.EPCM.doNavigate

Portal Page Other iViewBW iView

function EPCM.doNavigate(target, …)

1

2

Page 41: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 41

Portal Eventing allows exchange of information between iView during runtime

BI iViews is rendered in an IFrame and is therefore using EPCM Proxy to access EP Client Framework (see notes below)

Use Web Items’ Attribute ONLY_VALUES (Filters, Dropdown Box, etc.) to retrieve only values. This allows you to perform an ownsubmit operation (e.g., EPCM.raiseEvent)

Portal Eventing and BI iViews

Portal Page

BW iView

BW iView

EP/BW

3function eventHandler

EPCMPROXY.raiseEvent

1

function EPCM.subscribeEvent(nameSpace, eventName, eventHandler)

2

function EPCM.raiseEvent(nameSpace, eventName, dataObject [, sourceId]) EPCMPROXY.subscribeEvent

Page 42: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 42

Portal Eventing

– Works only within a singular domain– Works only within a page (popup communication not

supported)– Can be called from any application through Java or Javascript

- Webdynpro for Java- SAP BW 3.x Web application- SAP NetWeaver 2004s Web application- BSP- JSP- .NET applications- Etc…

– Usually utilizes a sender and receiver iView– Sending and Receiving occurs on a portal

namespace

Page 43: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 43

Receiver iView

– Here is an example of a Receiver iView’s code:

<script language=javascript>EPCMPROXY.subscribeEvent( "urn:com.sap.vc:epcm", "Filter", window, "myreceiveEvent");function myreceiveEvent( eventObj ) {

values = eventObj.dataObject;}</script>

Page 44: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 44

Sender iView

– Here is an example of a Sender iView’s code:

<script language=javascript>function raiseEvents(value) {

EPCMPROXY.raiseEvent( "urn:com.sap.vc:epcm", "Filter1", value, null );</script>

Page 45: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 45

BEx Web Application Designer Modularization

Web applications built with the SAP BW 3.x BEx Web Application Designer or SAP NetWeaver 2004s BExWeb Application Designer can send and receive events!Each Web application can subscribe to events that are specified by a singular web application where filter values are specifiedNavigation between BEx Web Application Designer applications can occur without loosing the context or filter values!Portal capabilities such as personalization of a page layout become available when using modularization concepts!

Page 46: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 46

BEx Web Application Designer - Sender & Receiver

Page 47: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 47

SAP NetWeaver Visual Composer Modularization

Web applications built with the SAP NetWeaver Visual Composer (VC) can send and receive events with no code required!Each VC application can subscribe to events that are specified by a singular VC application where filter values are specifiedNavigation between VC applications can occur without loosing the context or filter values!Portal capabilities such as personalization of a page layout become available when using modularization concepts!

Page 48: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 48

SAP NetWeaver Visual Composer - Sender & Receiver

Page 49: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 49

Integration Scenarios

Multiple applications can be integrated, such as SAP NetWeaver Visual Composer and BEx Web Application DesignerThe preferred method of communication between many applications is the XML Document ModelSAP is working on standardizing the communication format of XML Documents– Visual Composer SPS7 utilizes this xml document

format:- <Params> <Param name=“F0FISCPER” value="2002001“/> <Param

name=“F0CALYEAR” value="2002“/> <Param name=“F0COMP_CODE” value="1000" /></Params>

– SAP NetWeaver Visual Composer SPS8 utilizes this xml document format:

- <Params version = "2"> <Row F0FISCPER="2002001" F0CALYEAR="2002" F0COMP_CODE="1000" /></Params>

Page 50: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 50

XML Document Model

This is the recommended format to use when communicating using events:

- <Params version = "2"> <Row F0FISCPER="2002001" F0CALYEAR="2002" F0COMP_CODE="1000" /></Params>

This format is extensible to pass tables!Make sure you unescape values when receiving XML documents!– ASCII Code format:

%3CParams%20version%3D%222%22%20%3E%3CRow%20F0FISCPER%3D%222002%22%20F0CALYEAR%3D%222002%22%20F0COMP_CODE%3D%221000%22%20/%3E%3C/Params%3E

– HTML Code format:< Params version = "2" > <Row F0FISCPER="2002001" F0CALYEAR="2002" F0COMP_CODE="1000" /></Params>

For a tutorial on XML DOM objects, see http://www.w3schools.com/dom/default.asp

Page 51: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 52: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 52

Start the Web application with the "&PROFILING=X" addition. Simply attach this to the start URL. To do this, use the BEx Web Application Designer to execute the Web template in the Web and attach the addition to the URL in the address area of the Web browser and confirm this using "Return".

Go through the steps until the performance problem occurs.

Due to the "&PROFILING=X" addition, detailed statistics were collected for the runtimes in Java and ABAP (OLAP statistics). You can call these using the automatically generated link at the top of the "BI Statistics" Web page.

Choose this link.

The system displays a window containing detailed statistical information for each of the navigation steps that you have carried out up to now.

BI-JAVA Performance Logging Parameter

Page 53: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 54: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 54

Publishing from the BEx Web Application Designer

In order to publish reports, there are multiple options available. This is an overview of the options available within the BEx Web Application Designer. Full publishing strategies are available in the Publishing section of this course.

ManuallyPublishBEx

BroadcasterBEx

BroadcasterNA

Direct Save

or Publish

Direct Save

SAP NetWeaver2004s BEx

Web Application Designer

PublishPublishPublish or BEx

Broadcaster

Publish or BEx

BroadcasterNADirect Save

Direct Save

SAP BW 3.x BEx

Web Application Designer

Portal Roles

Portal Content

DirectoryCollaboration

RoomKM

RepositoryBI

BookmarkBI

RolesBI

Favorites

Page 55: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 55

Publishing from the SAP BW 3.x BEx Web Application Designer (1)

Save from SAP BW 3.x BEx Web Application Designer to BI Favorites or BI Roles

Page 56: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 56

Publishing from the SAP BW 3.x BEx Web Application Designer (2)

Save from SAP BW 3.x BEx Web Application Designer to KM Repository, Collaboration Room, Portal Content Directory, or Portal Roles

Page 57: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 57

Publishing from the SAP BW 3.x BEx Web Application Designer (3)

Broadcast from SAP BW 3.x BEx Web Application Designer to KM repository or Collaboration room

Page 58: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 58

Publishing from the SAP NetWeaver 2004s BEx Web Application Designer (1)

Save from SAP NetWeaver 2004s BEx Web Application Designer to BI Favorites or BI Roles

Page 59: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 59

Publishing from the SAP NetWeaver 2004s BEx Web Application Designer (2)

Publish from SAP NetWeaver 2004s BEx Web Application Designer to BI Roles

Page 60: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 60

Publishing from the SAP NetWeaver 2004s BEx Web Application Designer (3)

Publish from SAP NetWeaver 2004s BEx Web Application Designer to Portal Content Directory

Page 61: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 61

Publishing from the SAP NetWeaver 2004s BEx Web Application Designer (4)

Broadcast from SAP NetWeaver 2004s BEx Web Application Designer to KM repository or Collaboration room

Page 62: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

Overview

Scripting Web Item & XPATH Statements

Summary

API Commands, API Instructions, and Functions

Building BlocksFormats, Stylesheets, & Themes

Publishing from BEx Web Application DesignerPerformance Tuning Web Applications

Page 63: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 63

Related Links

Using XPATH Statements within the BEx Web Application Designer:https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/4520

Setting the Presentation of a Characteristic within BI-IP: https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/4661

Tips & Tricks when Printing to PDF:https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/4820

Options with Segmenting the Navigation Pane:https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/4821

Integrating UI Elements as Services:https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/library/uuid/5a40f2f7-0c01-0010-d69f-c6317c5165cd

Page 64: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 64

Summary

Understand the Architecture of Web Technology

Web API has changed to include API Commands, API Instructions, and Functions

Scripting Web Item can be used for customization!

Container Layout, HTML Layout, Stylesheets & Themes allow detailed control over look and feel.

Use Modular Building Blocks

Know your publishing strategy for Web Application Designer.

Page 65: SAP NetWeaver 2004s BEx Web Application Designer_ Working With Advanced Capabilities - Webinar Powerpoint

© SAP AG 2006, Title of Presentation / Speaker Name / 65

Copyright 2006 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. The information contained herein may be changed without prior notice.

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

Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower and PowerPC are trademarks or registered trademarks of IBM Corporation.

Adobe, the Adobe 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 a registered 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 of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, 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.

The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG.

This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document contains only intended strategies, developments, and functionalities of the SAP® product and is not intended to be binding upon SAP to any particular course of business, product strategy, and/or development. Please note that this document is subject to change and may be changed by SAP at any time without notice.

SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or other items contained within this material. This document is provided without a warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.

SAP shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitation shall not apply in cases of intent or gross negligence.

The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages.