Web Application Design
May 29, 2016 | Author: starcrew1 | Category: N/A
Short Description
SAP Advanced BEx Web Application Designer Concepts...
Description
Advanced BEx Web Application Designer Concepts Prakash Darji NetWeaver RIG
Overview API Commands, API Instructions, and Functions Scripting Web Item & XPATH Statements Formats, Stylesheets, & Themes Building Blocks Performance Tuning Web Applications Publishing from BEx Web Application Designer Summary
Overview API Commands, API Instructions, and Functions Scripting Web Item & XPATH Statements Formats, Stylesheets, & Themes Building Blocks Performance Tuning Web Applications Publishing from BEx Web Application Designer Summary
SAP Business Explorer Suite
SAP NetWeaver Portal
SAP Business Explorer Suite (BEx) BEx Broadcaster BEx Web
BEx Analyzer BI Pattern
BEx Web Analyzer
BEx Web Application Designer
BEx Report Designer
MS Excel Add-in
BI Consumer Services
3rd Party BI
© SAP AG 2006, Title of Presentation / Speaker Name / 4
SAP NetWeaver BI Info Provider
BEx Query Designer
Web Application Designer - Designing a Web Application Designing a Web Application Model-driven BI application building – – – –
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 strips etc.) New Web items Web application design takes place in the Business Explorer (BEx) Web Application Designer, a Visual Basic .NET-based, Unicode-compliant tool.
© SAP AG 2006, Title of Presentation / Speaker Name / 5
New chart types, e.g. GANTT chart, MTA chart Design of planning aware business applications
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 © SAP AG 2006, Title of Presentation / Speaker Name / 6
Selection of Web Items Button Group Display a group of Buttons where each button can execute one or more commands (e.g. Filter by region)
Tab Pages Item Each 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
Container Collection of your own HTML code or an assortment of Web items E.g. within a tab page you may want to organize your HTML for each tab
Report Item Embed reports created with the new BEx Report Designer directly in your web application
© SAP AG 2006, Title of Presentation / Speaker Name / 7
Selection of Web Items Property Pane Item Before, web item properties could only be changed at design time or at run time via the Web API The property pane now allows the user to change web item properties at runtime
Filter Pane Enables the display of multiple filter dropdown boxes for a data provider Selections 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)
Documents Documents 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 documents Use KM services on documents stored on the BI server via the BW repository managers © SAP AG 2006, Title of Presentation / Speaker Name / 8
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”).
© SAP AG 2006, Title of Presentation / Speaker Name / 9
Command Wizard Example: Calling Conditions Dialog With the „Calling Conditions Dialog“ command you can create or change a condition.
© SAP AG 2006, Title of Presentation / Speaker Name / 10
Web Application Designer: Changed Web Items (1) Dropdown Box Merged with ‘Query View – Selection’ web item, thus allowing the selection of characteristic values to filter data as well as navigating among different query views User definable entries with associated Web API commands The ONLY_VALUES parameter is no longer supported The 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 Area Supersedes the ‘Navigation Block’ web item, supporting Drag & Drop to change the navigational state
Info Field Replaces the ‘Filter’ and ‘Text Elements’ web items
Text Item Enhances the SAP NetWeaver 2004 ‘Label’ item by allowing the display of language dependent text
© SAP AG 2006, Title of Presentation / Speaker Name / 11
Web Application Designer: Changed Web Items (2) Analysis Item Formerly 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
© SAP AG 2006, Title of Presentation / Speaker Name / 12
Web Application Designer: Replaced Web Items Role Menu Replaced by the role-based display of content in the SAP NetWeaver Portal.
Alert Monitor Replaced 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 Designer Replaced by the BEx Web Analyzer.
Broadcaster Is now available as an iView in the SAP NetWeaver Portal and thus can be assigned to pages and roles.
© SAP AG 2006, Title of Presentation / Speaker Name / 13
Architecture of Web Application Technology SAP NetWeaver 2004s Web Template
Netweaver BI Web Application /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/* ... ... ... Netweaver BI Web Application ... ... ...
© SAP AG 2006, Title of Presentation / Speaker Name / 14
Overview API Commands, API Instructions, and Functions Scripting Web Item & XPATH Statements Formats, Stylesheets, & Themes Building Blocks Performance Tuning Web Applications Publishing from BEx Web Application Designer Summary
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
© SAP AG 2006, Title of Presentation / Speaker Name / 16
SAP NetWeaver 2004s API Commands - Procedure
Step 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:
Special Case
Special Feature
Set Web Item Parameters (SET_ITEM_PARAMETERS)
For this command, the parent parameter for the Web item parameters is INIT_PARAMETERS. Example: INIT_PARAMETERS-VISIBILITY=VISIBLE
Set Data Provider Parameters (SET_DATA_PROVIDER_PARAMETERS)
For this command, the parent parameter for the data provider parameters is INIT_PARAMETERS. Example: INIT_PARAMETERS-INITIAL_STATE=QUERY
© SAP AG 2006, Title of Presentation / Speaker Name / 17
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): 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
© SAP AG 2006, Title of Presentation / Speaker Name / 18
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):
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=
© SAP AG 2006, Title of Presentation / Speaker Name / 19
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);
© SAP AG 2006, Title of Presentation / Speaker Name / 20
JavaScript API for Executing Commands (2) sapbi_Parameter A 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_Command An 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_CommandSequence An 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)
© SAP AG 2006, Title of Presentation / Speaker Name / 21
Overview API Commands, API Instructions, and Functions Scripting Web Item & XPATH Statements Formats, Stylesheets, & Themes Building Blocks Performance Tuning Web Applications Publishing from BEx Web Application Designer Summary
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:
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:
View more...
Comments
