web application designer – tips and tricks to use commands

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: Shruti S. Kulkarni

Company: 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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2008 SAP AG 1


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



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.



• ‘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



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

• The Source Template:



• 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



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.



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.


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.



4. Result:


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



Scenario 3: Open a web template from the current application

Call a new web template from the current application.


1. Create a web template with an event web item like button

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

3. Result:


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



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.


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



Initial look of the frontend:

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



(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



(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.)



(c) Command - SET_ITEM_PARAMETERS


• ‘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 )



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

(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

[These will be totally opposite in sequence to that of the ‘Sales District’ perspective button]

(b) Command - SET_ITEM_PARAMETERS


• ‘Target Web Item’ – Technical name of the ‘Customer Perspective’ button web item



• ‘Visibility’ – Hidden (This hides the ‘Customer Perspective’ button once it is clicked and the

command ‘exchange’ has been performed.)

(c) Command - SET_ITEM_PARAMETERS


• ‘Target Web Item’ – Technical name of the ‘Sales District Perspective’ button web item



• ‘Visibility’ – Visible (This shows the ‘Sales District Perspective’ button once ‘Sales District

Perspective’ button has been hidden )




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:


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" >



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



For the above example:



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.



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.


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)



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.


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.




Scenario 7: Create a bookmark of the current web application

Create a bookmark of the current status of the query and the template.


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’



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.




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.


1. Create a button named ‘Detailed Analysis’ (by clicking this button a detailed analysis should open up in a new window)

2. Command – RRI



• ‘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’:



• Filter characteristic specified – ‘Sales District’


• 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).



Related Contents http://help.sap.com

For more information, visit the Business Intelligence homepage.


http://help.sap.com/

https://www.sdn.sap.com/irj/sdn/nw-bi



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.

web application designer – tips and tricks to use commands

Documents