Web Application Designer – Tips and Tricks to use Commands

Applies to:
Web application designer: SAP BI 7.0 / SAP Netweaver 2004s (Support package 14 - 17)

Summary
This document provides facilitative tips and tricks on how to use web application designer command functionality to implement specific and common requirements in creating web based cockpits and dashboards. Author: Company: Shruti S. Kulkarni Infosys Technologies Ltd.

Created on: 16 April 2009

Author Bio
Shruti Kulkarni has been working as an SAP BI consultant with ‘Infosys Technologies Ltd.’ since two years. She is mainly responsible for implementing SAP BW/BI projects and has worked extensively with SAP BI frontend tools like ‘Web Application Designer’, ‘Query Designer’ and ‘BEx Analyzer’.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 1

Web Application Designer – Tips and Tricks to use Commands

Table of Contents
Introduction to commands in Web Application Designer....................................................................................3 Tips and tricks to use commands in Web templates ..........................................................................................3 Scenario 1: Transfer Navigational Status of Queries to another Web application..........................................3 Scenario 2: Change the appearance of a web template to another existing web template ...........................8 Scenario 3: Open a web template from the current application....................................................................10 Scenario 4: Switch the query perspective from one characteristic to another..............................................11 Scenario 5: Enable event driven images in a web template .........................................................................21 Scenario 6: Display values entered on the variable screen as default after execution. ...............................26 Scenario 7: Create a bookmark of the current web application ....................................................................28 Scenario 8: Access detailed analysis of a query present in the existing web template................................31 Related Contents ..............................................................................................................................................35 Disclaimer and Liability Notice..........................................................................................................................36

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 2

Web Application Designer – Tips and Tricks to use Commands

Introduction to commands in Web Application Designer Command wizard is a great feature in SAP Netweaver 2004s for building custom features into cockpits. BI web API commands are used for carrying out certain actions in BI web applications. These commands reduce the amount of effort required in custom coding of web templates in HTML. These commands can be integrated with each other and a sequence of various functions can be achieved on the web frontend against event driven web items like buttons, dropdown boxes, radio buttons, or even the actions the web template would perform before rendering or before first display. This document provides a series of some commonly required functionality on a web based cockpit and supporting ways of implementing these functionalities using commands.

Tips and tricks to use commands in Web templates
Scenario 1: Transfer Navigational Status of Queries to another Web application There is a certain query in one template. The same query is present in another web template (in the form of a Report, Chart, and Geo-map etc.). The current navigation status of the query in the first template is to be transferred to the second template (i.e the chosen filter etc has to be transferred to the query in the other template). The command ‘TRANSFER _STATE: displays a copy of the current navigation status of the data provider or current status web item on a new web application. Steps to implement the requirement: 1. Create a button – ‘Transfer’ (or title as required) 2. Assign command - TRANSFER_STATE to the button

‘Internal Display’-> ‘Web Template’ – Technical name of the web template consisting of the same query/queries to which the navigation status is to be transferred.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 3

Web Application Designer – Tips and Tricks to use Commands

‘Data Binding’ -> ‘Data Providers’ – Either put a check ‘On’ for ‘All Data providers’ (this would transfer the navigation status of all similar data providers within the two templates) or give specific data provider technical names (only those data providers in the first template that have been assigned would be transferred to the other template)

NOTE: In both the templates, the technical names of the data providers or web items that are common in both the templates and are being used for transfer have to be the same.

‘Data Binding’ -> ‘Web Items’ - Either put a check ‘On’ for ‘All Web Items’ or or give specific web item technical names

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 4

Web Application Designer – Tips and Tricks to use Commands

‘Command Specific Parameters’-> ‘Open in a new window’ – Select this as required.

The Source Template:

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 5

Web Application Designer – Tips and Tricks to use Commands

Target template (has the same data provider query with same technical name). The web item ‘Chart’ not present in the initial template has been assigned with the same data provider. The data provider has been added as a part of the ‘Transfer State’ command. Therefore, the navigation state of the data provider in the initial template will affect both these web items.

Final output of the frontend: The first template is executed

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 6

Web Application Designer – Tips and Tricks to use Commands

The first template is filtered on one value of ‘Cost Element’

On clicking the button ‘Transfer’ the target template opens in a new window with ‘Cost Element’ filtered on the above value for both the chart and the table.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 7

Web Application Designer – Tips and Tricks to use Commands

Scenario 2: Change the appearance of a web template to another existing web template Change a web template retaining data providers and web items. The web items, data providers that appear in the new template and for which there is no object with the same name are generated from scratch. Steps to implement the requirement: 1. Create a web template ‘Z_TRANSFERSTATE_1’ with certain web items. In the sample provided, there is an analysis item, an image, a button for ‘Change Web Template’ and another button

2. Create another web template ‘Z_TRANSFERSTATE_2’ with some web items same as that of the earlier web template and some new. In the sample provided, analysis Item and a button Item is the same.

3. Command: To the button ‘BUTTON_GROUP_ITEM_2’, assign the command CHANGE_TEMPLATE.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 8

Web Application Designer – Tips and Tricks to use Commands

4. Result: Final output of the frontend: On clicking the button ‘Change Template’, the first template is replaced with the second template (to which the first template is to be changed). If there are web items in the second template that are of the same type and technical name as in the first template, the properties of those web items remain as in the first template. And if there are web items in the second template that are not present in the first template, they remain as it is during display.

On clicking button ‘Change Template’: The second web template opens

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 9

Web Application Designer – Tips and Tricks to use Commands

Scenario 3: Open a web template from the current application Call a new web template from the current application. Steps to implement the requirement: 1. Create a web template with an event web item like button

2. Command: Assign the command ‘SET_TEMPLATE’ to the button

3. Result: Final output of the frontend:

On clicking the button ‘Set Template’, the new (assigned) web template opens in a new window.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 10

Web Application Designer – Tips and Tricks to use Commands

Scenario 4: Switch the query perspective from one characteristic to another Switch a report from one perspective to another perspective (toggling between two buttons). There is a query that shows data on the basis of the organization’s ‘Customers’ (‘Customer’ Perspective). This query has to be switched to show data on the basis of the organization’s ‘Sales District’ (‘Sales District’ perspective). This switch has to take place by clicking a button named ‘Sales District Perspective’. Once this button is clicked, the query should display the data by ‘Sales District’ and the button should automatically show ‘Customer Perspective’ so that the query can be reverted to its original data at customer level. Steps to implement the requirement: 1. Create two buttons for ‘Customer Perspective’ and ‘Sales District Perspective’

2. The ‘Customer Perspective’ button will be ‘Hidden’ since the query initially runs by customer perspective

3. ‘Sales District Perspective’ button will be ‘Visible’ since the initially displayed query is to be switched to this perspective

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 11

Web Application Designer – Tips and Tricks to use Commands

Initial look of the frontend:

4. Commands to be used for ‘Sales District Perspective’ button

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 12

Web Application Designer – Tips and Tricks to use Commands

(a) Command - EXCHANGE [switches the characteristics/structures for one or more data providers] • ‘Target Data Providers’- Mention the intended data provider/s in

• •

‘First Characteristic’ - Technical name of the infoobject (characteristic) to be replaced ‘Second Characteristic’ - Technical name of the infoobject (characteristic) by which the first characteristic is to be replaced

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 13

Web Application Designer – Tips and Tricks to use Commands

(b) Command - SET_ITEM_PARAMETERS • • ‘Web Item Type’ – Button ‘Target Web Item’ – Technical name of the ‘Sales District Perspective’ button web item

‘Visibility’ – Hidden (This hides the ‘Sales District Perspective’ button once it is clicked and the command ‘exchange’ has been performed.)

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 14

Web Application Designer – Tips and Tricks to use Commands

(c) Command - SET_ITEM_PARAMETERS • • ‘Web Item Type’ – Button ‘Target Web Item’ – Technical name of the ‘Customer Perspective’ button web item

‘Visibility’ – Visible (This shows the ‘Customer Perspective’ button once ‘Sales District Perspective’ button has been hidden )

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 15

Web Application Designer – Tips and Tricks to use Commands

5. Commands to be used for ‘Customer Perspective’ button

(a) Command - EXCHANGE [switches the characteristics/structures for one or more data providers]

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 16

Web Application Designer – Tips and Tricks to use Commands

‘Target Data Providers’- Mention the intended data provider/s in

• •

‘First Characteristic’ - Technical name of the infoobject (characteristic) to be replaced ‘Second Characteristic’ - Technical name of the infoobject (characteristic) by which the first characteristic is to be replaced

[These will be totally opposite in sequence to that of the ‘Sales District’ perspective button] (b) Command - SET_ITEM_PARAMETERS • • ‘Web Item Type’ – Button ‘Target Web Item’ – Technical name of the ‘Customer Perspective’ button web item

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 17

Web Application Designer – Tips and Tricks to use Commands

‘Visibility’ – Hidden (This hides the ‘Customer Perspective’ button once it is clicked and the command ‘exchange’ has been performed.)

(c) Command - SET_ITEM_PARAMETERS • • ‘Web Item Type’ – Button ‘Target Web Item’ – Technical name of the ‘Sales District Perspective’ button web item

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 18

Web Application Designer – Tips and Tricks to use Commands

‘Visibility’ – Visible (This shows the ‘Sales District Perspective’ button once ‘Sales District Perspective’ button has been hidden )

Final output of the frontend:

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 19

Web Application Designer – Tips and Tricks to use Commands

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 20

Web Application Designer – Tips and Tricks to use Commands

Scenario 5: Enable event driven images in a web template There is an image (like a pentagon) which consists of different sections in which all the queries can be divided. The requirement is to click on any section on the image and accordingly display reports within that particular section. The image to be used:

Steps to implement the requirement: 1) Insert the required picture (in this case, a pentagon) in Microsoft frontpage when in tab ‘Design’ below

2) Use ‘map’ statement into the html code to assign a certain title and name the function e.g. <map id="map1" name="map1" >

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 21

Web Application Designer – Tips and Tricks to use Commands

3) Use ‘area’ and styles for assigning the area on which clicking is to done (using assign structure like square, polygon, circle etc. and giving the co-ordinates along which this structure is to be created).

The co-ordinates can be got from paint brush by hovering over and noting each point in the shape

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 22

Web Application Designer – Tips and Tricks to use Commands

For the above example:

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 23

Web Application Designer – Tips and Tricks to use Commands

All the points can be noted for co-ordinates in the html one after the other separated by commas Four co-ordinates for rectangular selection, n number for a polygon and so on
coords="349,26,349,145,515,262,627,224”

Likewise, if we want to give different selections on clicking the remaining four trapeziums in the picture, the area for each can be provided as below

Here ‘href’ refers the target link (web template) that would open on clicking that area 5) Very important: NOTE: this part would be functional only if the map that has been declared is used as a part of this image.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 24

Web Application Designer – Tips and Tricks to use Commands

6) Save this HTML and add it to the XHTML tab in WAD (from <map….> to <area….>) with the only difference where Image source (‘src’) in WAD would be from MIME repository and not from the local system like in this Microsoft frontpage example.

Final output of the frontend: The tooltips will be visible when the mouse hovers around the respective sections in the image. Pasting this html would enable clicking on the image to open another template (as mentioned in the XHTML code for Target)

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 25

Web Application Designer – Tips and Tricks to use Commands

Scenario 6: Display values entered on the variable screen as default after execution. A dropdown box has to be made available on the screen, through which the query data can be filtered on certain characteristic values (in this case ‘Period’ values). The query data is to be initially filtered on ‘Period’ values in the variable selection screen and the values selected are to be displayed as default in the dropdown box on execution. Steps to implement the requirement: 1. Use the web item ‘Filter pane’ to show the characteristic values to be filtered (this will show values of the characteristic in the form of a dropdown box). A ‘Filter Pane’ is to be used in place of a ‘Dropdown Box’ web item since the values from selection screen have to be passed on to the dropdown box as default.

2. Assign the characteristic (from the query) on which the filter is to be provided

3. In the query, since ‘Period’ is to be provided in the selection screen, an input variable has to be assigned to the characteristic. But since this value has to be passed on as a default to the ‘Filter Pane’, this variable needs to be assigned in the ‘Default values’ section of the query designer.

Final output of the frontend:

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 26

Web Application Designer – Tips and Tricks to use Commands

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 27

Web Application Designer – Tips and Tricks to use Commands

Scenario 7: Create a bookmark of the current web application Create a bookmark of the current status of the query and the template. Steps to implement the requirement: 1. Create a button for bookmark 2. Command: (a) If a bookmark is to be created and directly added to the browser favorites of the user: Command - SAVE_BOOKMARK • ‘Add to Browser Favorites’ – Checked

(b) If the ‘Bookmark ID’ is to be displayed on the web screen and this bookmark is to be saved in a place other than browser favorites: Command - SAVE_BOOKMARK • ‘Add to Browser Favorites’ – Unchecked’

In the ‘Web Template parameters’ • ‘Internal Display’ -> ‘Information Visible’ is to be put to ‘On’

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 28

Web Application Designer – Tips and Tricks to use Commands

This would display the ‘Bookmark ID’ created once the button is clicked. On clicking on this bookmark ID, the web template in its bookmarked status opens up in a new window with a URL consisting of the Bookmark ID. This URL can be saved as per user’s convenience. Final output of the frontend:

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 29

Web Application Designer – Tips and Tricks to use Commands

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 30

Web Application Designer – Tips and Tricks to use Commands

Scenario 8: Access detailed analysis of a query present in the existing web template There is a query shown on the screen and detailed analysis of the query needs to be done (based on the characteristic value filtered). A query is present on a further detailed level to the initial query that has to be shown on the screen. The detailed query would execute using the characteristic value that the initial query has been filtered upon. Steps to implement the requirement: 1. Create a button named ‘Detailed Analysis’ (by clicking this button a detailed analysis should open up in a new window) 2. Command – RRI

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 31

Web Application Designer – Tips and Tricks to use Commands

‘Data Provider Affected’ – Give the name of the data provider in the current web template (e.g. DP_1 etc.) whose detailed analysis needs to be done (consisting of the sender query).

‘RRI Receiver’ – Technical name of the RRI (created for the above sender query in transaction RSBBS)

Technical name of the RRI in ‘RSBBS’:

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 32

Web Application Designer – Tips and Tricks to use Commands

Filter characteristic specified – ‘Sales District’

Final output of the frontend: • Initial output

On clicking the button ‘Detailed Analysis’, a new window opens up, displaying detailed information related to the query; filtered on the two ‘Sales District’ values D00001 and D00003 (The characteristic ‘Sales District’ specified in the RRI definition).

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 33

Web Application Designer – Tips and Tricks to use Commands

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 34

Web Application Designer – Tips and Tricks to use Commands

Related Contents
http://help.sap.com For more information, visit the Business Intelligence homepage.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 35

Web Application Designer – Tips and Tricks to use Commands

Disclaimer and Liability Notice
This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

SAP COMMUNITY NETWORK © 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 36

Sign up to vote on this title
UsefulNot useful