Docstoc

How to... Select Multiple Values in a Dropdown Box

Document Sample
How to... Select Multiple Values in a Dropdown Box Powered By Docstoc
					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.                contained in this document serves informational
                                                             purposes only. National product specifications may vary.
No part of this publication may be reproduced or
transmitted in any form or for any purpose without the       These materials are subject to change without notice.
express permission of SAP AG. The information                These materials are provided by SAP AG and its affiliated
contained herein may be changed without prior notice.        companies ("SAP Group") for informational purposes
                                                             only, without representation or warranty of any
Some software products marketed by SAP AG and its            kind, and SAP Group shall not be liable for errors or
distributors contain proprietary software components of      omissions with respect to the materials. The only
other software vendors.                                      warranties for SAP Group products and services are those
                                                             that are set forth in the express warranty statements
Microsoft, Windows, Outlook, and PowerPoint are              accompanying such products and services, if any.
registered trademarks of Microsoft Corporation.              Nothing herein should be construed as constituting an
                                                             additional warranty.
IBM, DB2, DB2 Universal Database, OS/2, Parallel
Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400,        These materials are provided “as is” without a warranty
iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent   of any kind, either express or implied, including but not
Miner, WebSphere, Netfinity, Tivoli, and Informix are        limited to, the implied warranties of merchantability,
trademarks or registered trademarks of IBM Corporation       fitness for a particular purpose, or non-infringement.
in the United States and/or other countries.                 SAP shall not be liable for damages of any kind including
                                                             without limitation direct, special, indirect, or
Oracle is a registered trademark of Oracle Corporation.      consequential damages that may result from the use of
                                                             these materials.
UNIX, X/Open, OSF/1, and Motif are registered                SAP does not warrant the accuracy or completeness of
trademarks of the Open Group.                                the information, text, graphics, links or other items
                                                             contained within these materials. SAP has no control
Citrix, ICA, Program Neighborhood, MetaFrame,                over the information that you may access through the
WinFrame, VideoFrame, and MultiWin are trademarks            use of hot links contained in these materials and does not
or registered trademarks of Citrix Systems, Inc.             endorse your use of third party web pages nor provide
                                                             any warranty whatsoever relating to third party web
HTML, XML, XHTML and W3C are trademarks or                   pages.
                            ®
registered trademarks of W3C , World Wide Web                SAP NetWeaver “How-to” Guides are intended to
Consortium, Massachusetts Institute of Technology.           simplify the product implementation. While specific
                                                             product features and procedures typically are explained
Java is a registered trademark of Sun Microsystems, Inc.     in a practical business context, it is not implied that those
                                                             features and procedures are the only approach in solving
JavaScript is a registered trademark of Sun Microsystems,    a specific business problem using SAP NetWeaver. Should
Inc., used under license for technology invented and         you wish to receive additional information, clarification
implemented by Netscape.                                     or support, please refer to SAP Consulting.
                                                             Any software coding and/or code lines / strings (“Code”)
MaxDB is a trademark of MySQL AB, Sweden.                    included in this documentation are only examples and
                                                             are not intended to be used in a productive system
SAP, R/3, mySAP, mySAP.com, xApps, xApp, and other           environment. The Code is only intended better explain
SAP products and services mentioned herein as well as        and visualize the syntax and phrasing rules of certain
their respective logos are trademarks or registered          coding. SAP does not warrant the correctness and
trademarks of SAP AG in Germany and in several other         completeness of the Code given herein, and SAP shall
countries all over the world. All other product and          not be liable for errors or damages caused by the usage of
service names mentioned are the trademarks of their          the Code, except if such damages were caused by SAP
respective companies. Data                                   intentionally or grossly negligent.
1 Scenario
Using dropdown boxes within web templates greatly simplifies filtering and cross-
sectional 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 doesn’t 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-
                                    <object>
3.   Change the following                <param name="OWNER" value="SAP_BW"/>
     properties for the                  <param name="CMD" value="GET_ITEM"/>
     dropdown box item:                  <param name="NAME" value="DROPDOWNBOX_1"/>
                                         <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
     •   Uncheck ‘Generate               <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
         caption’                        <param name="GENERATE_CAPTION" value=""/>
                                         <param name="IOBJNM" value="0CALMONTH"/>
     •   Select ‘0CALMONTH’              <param name="BOOKED_VALUES" value=""/>
                                         <param name="SHOW_LABEL" value=""/>
         as the                          <param name="ONLY_VALUES" value="X"/>
         characteristic/structure        <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/>
                                         ITEM:     DROPDOWNBOX_1
     •   Check ‘Display only
         value’                     </object>

     •   Make sure ‘Do not
         display “All” value’ is
         unchecked.
                                    <FORM name=periodform action="" method=post>
4.   Switch to the HTML view        <b>Calendar Year/Month: </b>
     and surround your              <select name="periodval" class="SAPBexDdl" onChange="postFilter('0CALMONTH',
     dropdown box object with       document.periodform.periodval.value, 'DATAPROVIDER_1');" size="1">
                                    <OPTION VALUE="<'DP_VIEW_FILTER'>">Select Multiple
     a <FORM> and a                 <object>
     <SELECT> tag within the             <param name="OWNER" value="SAP_BW"/>
     form. Name the ‘form’ as            <param name="CMD" value="GET_ITEM"/>
     well as the ‘select’. The           <param name="NAME" value="DROPDOWNBOX_1"/>
     ‘select’ ‘onchange’ event           <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
                                         <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
     will trigger a JavaScript           <param name="GENERATE_CAPTION" value=""/>
     function which will be              <param name="IOBJNM" value="0CALMONTH"/>
     defined later. Also, add            <param name="BOOKED_VALUES" value=""/>
     an OPTION_VALUE with                <param name="SHOW_LABEL" value=""/>
     text ‘Select Multiple’ and          <param name="ONLY_VALUES" value="X"/>
                                         ITEM:       DROPDOWNBOX_1
     value                          </object>
     “<’DP_VIEW_FILTER’>”.          </select>
     Within the JavaScript
     function, you will pass 3      </FORM>
     parameters. The first
     parameter is the
     InfoObject, the second
     parameter is the filter
     value, and the third
     parameter is the data
     provider.




                                                                                                       -4-
                                <script type="text/javascript">
5.   Within the <HEAD> tag of   <!--
     the page, add the          // Function to post filter values:
     following JavaScript       // iobjnm is the infoobject
                                // val is the filter value for the infoobject
     function.                  // 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.




                                      <object>
3.    Change the following                 <param name="OWNER" value="SAP_BW"/>
      properties for the                   <param name="CMD" value="GET_ITEM"/>
      dropdown box item:                   <param name="NAME" value="DROPDOWNBOX_3"/>
                                           <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
      •    Uncheck ‘Generate               <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
           caption’                        <param name="GENERATE_CAPTION" value=""/>
                                           <param name="IOBJNM" value="0CALMONTH"/>
      •    Select ‘0CALMONTH’              <param name="ONLY_VALUES" value="X"/>
                                           <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/>
           as the                          ITEM:     DROPDOWNBOX_3
           characteristic/structure
                                      </object>
      •    Check ‘Display only
           value’
      •    Make sure ‘Do not
           display “All” value’ is
           unchecked.




                                                                                                  -6-
                                  <!-- START - Select Multiple Form - with submit button-->
4.   Switch to the HTML view      <FORM name="frmMulti" action="" method=post>
     and surround your            <b>Calendar Year/Month: </b>
     dropdown box object with     <select name="calmo" multiple class="SAPBexDdl">
                                  <object>
     a <FORM> and a                     <param name="OWNER" value="SAP_BW"/>
     <SELECT> tag within the            <param name="CMD" value="GET_ITEM"/>
     form. Name the ‘form’ as           <param name="NAME" value="DROPDOWNBOX_3"/>
     well as the ‘select’. The          <param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN"/>
     ‘select’ ‘onchange’ event          <param name="DATA_PROVIDER" value="DATAPROVIDER_1"/>
                                        <param name="GENERATE_CAPTION" value=""/>
     will trigger a JavaScript          <param name="IOBJNM" value="0CALMONTH"/>
     function which will be             <param name="ONLY_VALUES" value="X"/>
     defined later. Also, add           <param name="TARGET_DATA_PROVIDER_1" value="DATAPROVIDER_1"/>
     an OPTION_VALUE with               ITEM:        DROPDOWNBOX_3
     text ‘Select Multiple’ and   </object>
                                  </select>
     value                        <button onClick="setMultiFilter('0CALMONTH', 'DATAPROVIDER_1');">Submit</button>
     “<’DP_VIEW_FILTER’>”.        </FORM>
     Within the JavaScript        <!-- END - Select Multiple Form - with submit button-->
     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.
                                  <script type="text/javascript">
5.   Within the <HEAD> tag of     <!--
     the page, add the            // Function to post filter values:
     following JavaScript         // iobjnm is the infoobject
                                  // dataprov is the dataprovider that you want to filter
     function.                    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

				
DOCUMENT INFO