Using JavaScript in the Dropdown Box Web Item (SAP Library

Using JavaScript in the Dropdown Box Web Item

You want to create a Web application in which the end user can filter an interval for the calendar months. The interval end is to be specified by selection from a dropdown box. The interval start is to be fixed. The entries displayed in the dropdown box are to be determined from the values posted for the data provider. Make sure that the read mode (Filter Value Selection During Query Execution in Query Designer) for the characteristic in the query or query view is set to Only Posted Values for Navigation. More information: Properties of the Characteristic

By default, for dropdown box Web items, an individual filter value is set using the data binding type Char/Structure Member (CHARACTERISTIC_SELECTION). To enhance this standard function, you can add a JavaScript function to the Dropdown Box Web item. To do this, proceed as follows:

...

1. Create a new Web template with two data providers. Both data providers are initialized by the same object.

2. Insert an Analysis Web item into the Web template and assign the first data provider to the Web item.

3. Insert a Dropdown Box Web item into the Web template. Set the following parameters for the Web item:

a. Select Char/Structure Member (CHARACTERISTIC_SELECTION) as the data binding type.

b. Enter the second data provider as the data provider.

c. Deselect the Display ALL Entry(ALL_VALUES_ENTRIES_INCLUDED) parameter. This is important since specification of both interval limits is appropriate for interval selections.

d. Select the characteristic 0CALMONTH.

e. Under the Additional Action (ACTION_WITH_DEFAULT) parameter, select the Script Function (SCRIPT_FUNCTION) option.

f. You enter the name of the script functions later (see step 10).

4. Insert the Script Web item (from the Miscellaneous Web item group) into the Web template.

5. To enter a value for the Script (SCRIPT) parameter of the Web item, use the help dialog box.

6. To generate the JavaScript, choose Create with Wizard.

7. Under All Commands → Commands for Data Providers →Commands for Filter Values, select Set Filter Values for a Characteristic (SET_SELECTION_STATE_SIMPLE).

a. Select the first data provider as the data provider affected.

b. Select the characteristic 0CALMONTH.

c. Select Interval Selection (INTERVAL_SELECTION) as the operator.

d. Specify the fixed from-value.

e. Enter any value as the to-value.

8. Close the command wizard. A JavaScript function that executes the specified command is generated.

9. To determine the to-value dynamically, comment out the line with var key = … at the start of the JavaScript function. Find the value for the to-value and replace this with the JavaScript variable key.

10. Using the input help, in the Dropdown Box Web item, you can now select the name of the JavaScript function in the Script Function parameter (SCRIPT_FUNCTION).

11. In the final step, you can design the Web template according to your needs.

Note

You need two data providers for the dropdown box to always display the same values and not the current filter value as well.

The sample code for the Web template described here is as follows:

<bi:bisp xmlns="http://www.w3.org/TR/REC-html40" xmlns:bi="http://xml.sap.com/2005/01/bi/wad/bisp" xmlns:jsp="http://java.sun.com/JSP/Page" >

<html >

<head >

<title >Netweaver BI Web Application</title>

</head>

<body >

<bi:QUERY_VIEW_DATA_PROVIDER name="DP_2" >

<bi:INITIAL_STATE type="CHOICE" value="QUERY" >

<bi:QUERY value="0D_DX_M01_Q0006" text="Type" />

</bi:INITIAL_STATE>

</bi:QUERY_VIEW_DATA_PROVIDER>

<bi:QUERY_VIEW_DATA_PROVIDER name="DP_1" >

<bi:INITIAL_STATE type="CHOICE" value="QUERY" >

<bi:QUERY value="0D_DX_M01_Q0006" text="DalSegno Company Time Series" />

</bi:INITIAL_STATE>

</bi:QUERY_VIEW_DATA_PROVIDER>

<bi:TEMPLATE_PARAMETERS name="TEMPLATE_PARAMETERS" />

<p >

<bi:SCRIPT_ITEM name="SCRIPT_ITEM_1" designwidth="100" designheight="100" >

<bi:SCRIPT value="biLargeData:OF8J4L7FXQG0EQ1GODA5M2XKE" />

</bi:SCRIPT_ITEM>

<br />

<tr >

<td >

<bi:TEXT_ITEM name="TEXT_ITEM_1" designheight="70" designwidth="200" >

<bi:TEXT_BINDING type="CHOICE" value="TEXT_CONTENT" >

<bi:TEXT_CONTENT value="Show Data until End of" />

</bi:TEXT_BINDING>

<bi:TEXT_DESIGN value="HEADER1" />

</bi:TEXT_ITEM>

</td>

<td >

<bi:DROPDOWN_ITEM name="DROPDOWN_ITEM_1" designheight="70" designwidth="200" >

<bi:DATA_BINDING_TYPE type="CHOICE" value="CHARACTERISTIC_SELECTION" >

<bi:CHARACTERISTIC_SELECTION type="COMPOSITE" >

<bi:DATA_PROVIDER_REF value="DP_1" />

<bi:CHARACTERISTIC value="0CALMONTH" text="Calendar Year/Month" />

<bi:ACTION_WITH_DEFAULT type="CHOICE" value="SCRIPT_FUNCTION" >

<bi:SCRIPT_FUNCTION value="executeJS_SET_SELECTION_STATE_SIMPLE_EAA" />

</bi:ACTION_WITH_DEFAULT>

<bi:ALL_VALUES_ENTRY_INCLUDED value="" />

</bi:CHARACTERISTIC_SELECTION>

</bi:DATA_BINDING_TYPE>

</bi:DROPDOWN_ITEM>

</td>

</tr>

</tbody>

</table>

<br />

</p>

<p >

<bi:ANALYSIS_ITEM name="ANALYSIS_ITEM_1" designwidth="400" designheight="200" >

<bi:DATA_PROVIDER_REF value="DP_2" />

</bi:ANALYSIS_ITEM>

<br />

</p>

<br />

</body>

</html>

</bi:bisp>

The following script is included after the globally unique identifier biLargeData:OF8J4L7FXQG0EQ1GODA5M2XKE.

function executeJS_SET_SELECTION_STATE_SIMPLE_EAA( currentState, defaultCommandSequence ){

var key = currentState.getParameter( 'key').getValue();

//Create a new object of type sapbi_CommandSequence

var commandSequence = new sapbi_CommandSequence();

//Create a new object of type sapbi_Command with the command named "SET_SELECTION_STATE_SIMPLE"

var commandSET_SELECTION_STATE_SIMPLE_1 = new sapbi_Command( "SET_SELECTION_STATE_SIMPLE" );

//Create parameter TARGET_DATA_PROVIDER_REF_LIST

var paramTARGET_DATA_PROVIDER_REF_LIST = new sapbi_Parameter( "TARGET_DATA_PROVIDER_REF_LIST", "" );

var paramListTARGET_DATA_PROVIDER_REF_LIST = new sapbi_ParameterList();

//Create parameter TARGET_DATA_PROVIDER_REF

var paramTARGET_DATA_PROVIDER_REF1 = new sapbi_Parameter( "TARGET_DATA_PROVIDER_REF", "DP_2" );

paramListTARGET_DATA_PROVIDER_REF_LIST.addParameter( paramTARGET_DATA_PROVIDER_REF1 );

//End parameter TARGET_DATA_PROVIDER_REF!

paramTARGET_DATA_PROVIDER_REF_LIST.setChildList( paramListTARGET_DATA_PROVIDER_REF_LIST );

commandSET_SELECTION_STATE_SIMPLE_1.addParameter( paramTARGET_DATA_PROVIDER_REF_LIST );

//End parameter TARGET_DATA_PROVIDER_REF_LIST!

//Create parameter CHARACTERISTIC

var paramCHARACTERISTIC = new sapbi_Parameter( "CHARACTERISTIC", "0CALMONTH" );

commandSET_SELECTION_STATE_SIMPLE_1.addParameter( paramCHARACTERISTIC );

//End parameter CHARACTERISTIC!

//Create parameter RANGE_SELECTION_OPERATOR

var paramRANGE_SELECTION_OPERATOR = new sapbi_Parameter( "RANGE_SELECTION_OPERATOR", "INTERVAL_SELECTION" );

var paramListRANGE_SELECTION_OPERATOR = new sapbi_ParameterList();

//Create parameter INTERVAL_SELECTION

var paramINTERVAL_SELECTION = new sapbi_Parameter( "INTERVAL_SELECTION", "" );

var paramListINTERVAL_SELECTION = new sapbi_ParameterList();

//Create parameter INTERVAL_SELECTION_LOW_MEMBER

var paramINTERVAL_SELECTION_LOW_MEMBER = new sapbi_Parameter( "INTERVAL_SELECTION_LOW_MEMBER", "MEMBER_NAME" );

var paramListINTERVAL_SELECTION_LOW_MEMBER = new sapbi_ParameterList();

//Create parameter MEMBER_NAME

var paramMEMBER_NAME = new sapbi_Parameter( "MEMBER_NAME", "200301" );

paramListINTERVAL_SELECTION_LOW_MEMBER.addParameter( paramMEMBER_NAME );

//End parameter MEMBER_NAME!

paramINTERVAL_SELECTION_LOW_MEMBER.setChildList( paramListINTERVAL_SELECTION_LOW_MEMBER );

paramListINTERVAL_SELECTION.addParameter( paramINTERVAL_SELECTION_LOW_MEMBER );

//End parameter INTERVAL_SELECTION_LOW_MEMBER!

//Create parameter INTERVAL_SELECTION_HIGH_MEMBER

var paramINTERVAL_SELECTION_HIGH_MEMBER = new sapbi_Parameter( "INTERVAL_SELECTION_HIGH_MEMBER", "MEMBER_NAME" );

var paramListINTERVAL_SELECTION_HIGH_MEMBER = new sapbi_ParameterList();

//Create parameter MEMBER_NAME

var paramMEMBER_NAME = new sapbi_Parameter( "MEMBER_NAME", key );

paramListINTERVAL_SELECTION_HIGH_MEMBER.addParameter( paramMEMBER_NAME );

//End parameter MEMBER_NAME!

paramINTERVAL_SELECTION_HIGH_MEMBER.setChildList( paramListINTERVAL_SELECTION_HIGH_MEMBER );

paramListINTERVAL_SELECTION.addParameter( paramINTERVAL_SELECTION_HIGH_MEMBER );

//End parameter INTERVAL_SELECTION_HIGH_MEMBER!

paramINTERVAL_SELECTION.setChildList( paramListINTERVAL_SELECTION );

paramListRANGE_SELECTION_OPERATOR.addParameter( paramINTERVAL_SELECTION );

//End parameter INTERVAL_SELECTION!

paramRANGE_SELECTION_OPERATOR.setChildList( paramListRANGE_SELECTION_OPERATOR );

commandSET_SELECTION_STATE_SIMPLE_1.addParameter( paramRANGE_SELECTION_OPERATOR );

//End parameter RANGE_SELECTION_OPERATOR!

//End command commandSET_SELECTION_STATE_SIMPLE_1

//Add the command to the sequence

commandSequence.addCommand( commandSET_SELECTION_STATE_SIMPLE_1 );

//Send the command sequence to the server

sapbi_page.sendCommand( commandSequence );

}