How-to Guide SAP NetWeaver 04

How To Select Multiple Values within a Dropdown Box

Version 1.00 February 2006 Applicable Releases: SAP NetWeaver 04 BW 3.x

 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, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or registered trademarks of IBM Corporation 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, 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. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. These materials are provided as is 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 not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these materials. 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. SAP NetWeaver How-to Guides are intended to simplify the product implementation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting. Any software coding and/or code lines / strings (Code) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

1 Scenario
Using dropdown boxes within web templates greatly simplifies filtering and crosssectional views of data. Although dropdowns greatly simplify navigation, they have a few major limitations: 1. It is not possible to select multiple values or 2. Search by key or text This paper will address these scenarios by providing two options to address these issues. The first option is to enhance the dropdown to include a select multiple option. Keep in mind that this option is included in the Web Analyzer using Netweaver 2004s. This paper will address this functionality in BI 3.x. The functionality will look as follows:

When you choose Select Multiple, the following help service is called:

The second option is to provide a multiple select form with a Submit button.

-1-

2 Introduction
This paper describes how to set filter values. For setting variable values, please see the paper on how to set variable values. Also, this paper doesnt include internal to external conversions (and vice versa) that are needed for some date conversions. Please see the addendum at the end of the document for additional information on date conversions. The example web template in the appendix will output similar to this:

-2-

3 The Step By Step Solution

3.1 Option 1 Add Select Multiple Value dialog to a dropdown box

This solution will utilize a query and build the select multiple value feature within a Web template based on infoobject 0CALMONTH.

1. Create a query for use within a web template. This example will use InfoObject 0CALMONTH.

2. Create a web template with a dropdown box and a table. Assign your query as the data provider for both your dropdown and table.

-3-

3.

Change the following properties for the dropdown box item: Uncheck Generate caption Select 0CALMONTH as the characteristic/structure Check Display only value Make sure Do not display All value is unchecked.

<object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="DROPDOWNBOX_1"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/> <param name="GENERATE_CAPTION" value=""/> <param name="IOBJNM" value="0CALMONTH"/> <param name="BOOKED_VALUES" value=""/> <param name="SHOW_LABEL" value=""/> <param name="ONLY_VALUES" value="X"/> <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/> ITEM: DROPDOWNBOX_1 </object>

4.

Switch to the HTML view and surround your dropdown box object with a <FORM> and a <SELECT> tag within the form. Name the form as well as the select. The select onchange event will trigger a JavaScript function which will be defined later. Also, add an OPTION_VALUE with text Select Multiple and value <DP_VIEW_FILTER>. Within the JavaScript function, you will pass 3 parameters. The first parameter is the InfoObject, the second parameter is the filter value, and the third parameter is the data provider.

<FORM name=periodform action="" method=post> <b>Calendar Year/Month: </b> <select name="periodval" class="SAPBexDdl" onChange="postFilter('0CALMONTH', document.periodform.periodval.value, 'DATAPROVIDER_1');" size="1"> <OPTION VALUE="<'DP_VIEW_FILTER'>">Select Multiple <object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="DROPDOWNBOX_1"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/> <param name="GENERATE_CAPTION" value=""/> <param name="IOBJNM" value="0CALMONTH"/> <param name="BOOKED_VALUES" value=""/> <param name="SHOW_LABEL" value=""/> <param name="ONLY_VALUES" value="X"/> ITEM: DROPDOWNBOX_1 </object> </select> </FORM>

-4-

5.

Within the <HEAD> tag of the page, add the following JavaScript function.

<script type="text/javascript"> <!-// Function to post filter values: // iobjnm is the infoobject // val is the filter value for the infoobject // dataprov is the dataprovider that you want to filter function postFilter(iobjnm, val, dataprov) { if (val == 'All') { SAPBWOpenURL(SAP_BW_URL_Get() + "&DATA_PROVIDER=" + dataprov + "&CMD=REMOVE_FILTER&IOBJNM=" + iobjnm); } if (val.indexOf('DP_VIEW_FILTER') > 0) { SAPBWOpenWindow(SAP_BW_URL_Get() + "&CMD=PROCESS_HELP_WINDOW&HELP_SERVICE=DP_VIEW_FILTER&DATA_PRO VIDER=" + dataprov + "&IOBJNM=" + iobjnm ,"FILTER",800,600); } else { SAPBWOpenURL(SAP_BW_URL_Get() + "&DATA_PROVIDER=" + dataprov + "&FILTER_IOBJNM=" + iobjnm + "&FILTER_VALUE=" + val + "&FILTER_COLLAPS="); } } --> </script>

6.

Save and Execute the web template. It should look as follows:

-5-

3.2

Option 2 Create a Select Multiple Value Listbox with a submit button

This solution will utilize a query and build a listbox with a submit button to select multiple values within a Web template based on infoobject 0CALMONTH. 1. Create a query for use within a web template. This example will use InfoObject 0CALMONTH.

2. Create a web template with a dropdown box and a table. Assign your query as the data provider for both your dropdown and table.

3.

Change the following properties for the dropdown box item: Uncheck Generate caption Select 0CALMONTH as the characteristic/structure Check Display only value Make sure Do not display All value is unchecked.

<object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="DROPDOWNBOX_3"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/> <param name="GENERATE_CAPTION" value=""/> <param name="IOBJNM" value="0CALMONTH"/> <param name="ONLY_VALUES" value="X"/> <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/> ITEM: DROPDOWNBOX_3 </object>

-6-

4.

Switch to the HTML view and surround your dropdown box object with a <FORM> and a <SELECT> tag within the form. Name the form as well as the select. The select onchange event will trigger a JavaScript function which will be defined later. Also, add an OPTION_VALUE with text Select Multiple and value <DP_VIEW_FILTER>. Within the JavaScript function, you will pass 3 parameters. The first parameter is the InfoObject, the second parameter is the filter value, and the third parameter is the data provider. Within the <HEAD> tag of the page, add the following JavaScript function.

<!-- START - Select Multiple Form - with submit button--> <FORM name="frmMulti" action="" method=post> <b>Calendar Year/Month: </b> <select name="calmo" multiple class="SAPBexDdl"> <object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="DROPDOWNBOX_3"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/> <param name="GENERATE_CAPTION" value=""/> <param name="IOBJNM" value="0CALMONTH"/> <param name="ONLY_VALUES" value="X"/> <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/> ITEM: DROPDOWNBOX_3 </object> </select> <button onClick="setMultiFilter('0CALMONTH', 'DATAPROVIDER_1');">Submit</button> </FORM> <!-- END - Select Multiple Form - with submit button-->

5.

<script type="text/javascript"> <!-// Function to post filter values: // iobjnm is the infoobject // dataprov is the dataprovider that you want to filter function setMultiFilter(iobjnm, dataprov) { value = ''; url = SAP_BW_URL_Get() + '&DATA_PROVIDER=' + dataprov + '&FILTER_IOBJNM=' + iobjnm; // loop through all the values, getting the value of those that are selected for (i=0; i< document.frmMulti.calmo.options.length; i++) { if (document.frmMulti.calmo.options[i].selected) { value = value + '&' + 'FILTER_VALUE_' + i + '=' + document.frmMulti.calmo.options[i].value; } } url = url + value; SAPBWOpenURL(url); } --> </script>

-7-

6.

Save and Execute the web template. It should look as follows:

-8-

4 Addendum
This section includes some additional code for date conversions or for setting variable values. For more details please see the white paper on setting variable values via a dropdown.
<script type="text/javascript"> // Convert Interal Dates to External Dates // Function chavl_int_to_ext_convert(intformat, iobjnm) // intformat = date in internal format // iobjnm = infoobject function chavl_int_to_ext_convert(intformat, iobjnm) { var date_format = SAPBWGetProperty('DATE_FORMAT'); if (iobjnm== '0CALMONTH') { switch (date_format) { case 1: return intformat.substring(4,6) + '.' + intformat.substring(0,4); case 2: return intformat.substring(4,6) + '/' + intformat.substring(0,4); case 3: return intformat.substring(4,6) + '-' + intformat.substring(0,4); case 4: return intformat.substring(0,4) + '.' + intformat.substring(4,6); case 5: return intformat.substring(0,4) + '/' + intformat.substring(4,6); case 6: return intformat.substring(0,4) + '-' + intformat.substring(4,6); } } if (iobjnm== '0FISCPER') { switch (date_format) { case 1: return intformat.substring(6,9) + '.' + intformat.substring(2,6); case 2: return intformat.substring(6,9) + '/' + intformat.substring(2,6); case 3: return intformat.substring(6,9) + '-' + intformat.substring(2,6); case 4: return intformat.substring(2,6) + '.' + intformat.substring(6,9); case 5: return intformat.substring(2,6) + '/' + intformat.substring(6,9); case 6: return intformat.substring(2,6) + '-' + intformat.substring(6,9); } } } // Convert External Dates to Internal Dates // Function chavl_ext_to_int_convert(extformat, iobjnm) // extformat = date in external format // iobjnm = infoobject function chavl_ext_to_int_convert(extformat, iobjnm) { var date_format = SAPBWGetProperty('DATE_FORMAT'); if (iobjnm== '0CALMONTH') { // possible values DATE_FORMAT: Date format (1: DD.MM.YYYY, 2: MM/DD/YYYY, 3: MM-DD-YYYY, // 4: YYYY.MM.DD, 5: YYYY/MM/DD, 6: YYYY-MM-DD) if (date_format < '4') return extformat.substring(3,7) + extformat.substring(0,2); else return extformat.substring(0,4) + extformat.substring(5,7); } if (iobjnm== '0FISCPER') { // possible values DATE_FORMAT: Date format (1: DD.MM.YYYY, 2: MM/DD/YYYY, 3: MM-DD-YYYY, // 4: YYYY.MM.DD, 5: YYYY/MM/DD, 6: YYYY-MM-DD) if (date_format < '4') { return "K4" + extformat.substring(4,8) + extformat.substring(0,3); } else { return "K4" + extformat.substring(0,4) + extformat.substring(5,8); }

-9-

} } // Sets Variable Values for a variable // Function setVariable(value, variablename, iobjnm) // value = the value you want to set the variable to // variablename = the technical name of the variable that you want to set // iobjnm = infoobject that the variable is built upon function setVariable(value, variablename, iobjnm) { // ignore the '#' and "!ALL" values if (value == '000000' || value == '!ALL') alert("Please select a valid month."); else { url = SAP_BW_URL_Get() + "&CMD=PROCESS_VARIABLES&SUBCMD=VAR_SUBMIT&VAR_NAME_1=" + variablename + "&VAR_VALUE_EXT_1=" ; url = url + chavl_int_to_ext_convert(value, iobjnm); SAPBWOpenURL(url); } } </script>

5 Appendix (Web Template Example)

<HTML> <!-- BW data source object tags --> <object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="SET_DATA_PROVIDER"/> <param name="NAME" value="DATAPROVIDER_1"/> <param name="QUERY" value="ZBWTC_C10_STAT"/> <param name="INFOCUBE" value="0BWTC_C10"/> DATA_PROVIDER: DATAPROVIDER_1 </object> <object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="SET_PROPERTIES"/> <param name="TEMPLATE_ID" value="DROPDOWN_EXAMPLE_02"/> TEMPLATE PROPERTIES </object> <HEAD> <META NAME="GENERATOR" Content="Microsoft DHTML Editing Control"> <TITLE>BW Web Application</TITLE> <link href="/sap/bw/Mime/BEx/StyleSheets/BWReports.css" type="text/css" rel="stylesheet"/> <script type="text/javascript"> <!-// Function to post filter values: // iobjnm is the infoobject // val is the filter value for the infoobject // dataprov is the dataprovider that you want to filter function postFilter(iobjnm, val, dataprov) { if (val == 'All') { SAPBWOpenURL(SAP_BW_URL_Get() + "&DATA_PROVIDER=" + dataprov + "&CMD=REMOVE_FILTER&IOBJNM=" + iobjnm); } if (val.indexOf('DP_VIEW_FILTER') > 0) { SAPBWOpenWindow(SAP_BW_URL_Get() + "&CMD=PROCESS_HELP_WINDOW&HELP_SERVICE=DP_VIEW_FILTER&DATA_PROVIDER=" + dataprov + "&IOBJNM=" + iobjnm ,"FILTER",800,600); } else {

- 10 -

SAPBWOpenURL(SAP_BW_URL_Get() + "&DATA_PROVIDER=" + dataprov + "&FILTER_IOBJNM=" + iobjnm + "&FILTER_VALUE=" + val + "&FILTER_COLLAPS="); } } function setMultiFilter(iobjnm, dataprov) { value = ''; url = SAP_BW_URL_Get() + '&DATA_PROVIDER=' + dataprov + '&FILTER_IOBJNM=' + iobjnm; // loop through all the values, getting the value of those that are selected for (i=0; i< document.frmMulti.calmo.options.length; i++) { if (document.frmMulti.calmo.options[i].selected) { value = value + '&' + 'FILTER_VALUE_' + i + '=' + document.frmMulti.calmo.options[i].value; } } url = url + value; SAPBWOpenURL(url); } --> </script> </HEAD> <BODY> <P> <TABLE cellSpacing=1 cellPadding=1 width="75%" border=0> <TR> <TD vAlign=top> <table border=1> <tr> <td width=200> This dropdown is the standard dropdown web item: </td> <td width=200> This dropdown has the select multiple value option within the dropdown: </td> <td width=200> This form list allows you to select multiple values and submit the filters: </td> </tr> <tr> <td> <!-- START - Dropdown Web Item --> <object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="DROPDOWNBOX_2"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/> <param name="GENERATE_CAPTION" value="X"/> <param name="IOBJNM" value="0CALMONTH"/> <param name="BOOKED_VALUES" value=""/> <param name="SHOW_LABEL" value="X"/> <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/> ITEM: DROPDOWNBOX_2 </object> <!-- END - Dropdown Web Item --> </td> <td> <!-- START - Select Multiple Form - popup dialog--> <FORM name=periodform action="" method=post> <b>Calendar Year/Month: </b> <select name="periodval" class="SAPBexDdl" onChange="postFilter('0CALMONTH', document.periodform.periodval.value, 'DATAPROVIDER_1');" size="1"> <OPTION VALUE="<'DP_VIEW_FILTER'>">Select Multiple <object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="DROPDOWNBOX_1"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>

- 11 -

<param name="GENERATE_CAPTION" value=""/> <param name="IOBJNM" value="0CALMONTH"/> <param name="BOOKED_VALUES" value=""/> <param name="SHOW_LABEL" value=""/> <param name="ONLY_VALUES" value="X"/> <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/> ITEM: DROPDOWNBOX_1 </object> </select> </FORM> <!-- END - Select Multiple Form - popup dialog--> </td> <td valign=top> <!-- START - Select Multiple Form - with submit button--> <FORM name="frmMulti" action="" method=post> <b>Calendar Year/Month: </b> <select name="calmo" multiple class="SAPBexDdl"> <object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="DROPDOWNBOX_3"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/> <param name="GENERATE_CAPTION" value=""/> <param name="IOBJNM" value="0CALMONTH"/> <param name="ONLY_VALUES" value="X"/> <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/> ITEM: DROPDOWNBOX_3 </object> </select> <button onClick="setMultiFilter('0CALMONTH', 'DATAPROVIDER_1');">Submit</button> </FORM> <!-- END - Select Multiple Form - with submit button--> </td> </tr> </table> </TD> </TR> <TR> <TD vAlign=top><object> <param name="OWNER" value="SAP_BW"/> <param name="CMD" value="GET_ITEM"/> <param name="NAME" value="TABLE_1"/> <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_GRID"/> <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/> ITEM: TABLE_1 </object></TD></TR></TABLE></P> </BODY> </HTML>

- 12 -

www.sdn.sap.com/irj/sdn/howtoguides