Verwendung von JavaScript im Web Item Dropdown-Box (SAP-Bibliothek

Verwendung von JavaScript im Web Item Dropdown-Box

Sie möchten eine Web Application erstellen, bei der der End-User für die Kalendermonate ein Intervall filtern können soll. Das Ende des Intervalls soll über die Auswahl in einer Dropdown-Box bestimmt werden; der Anfang des Intervalls ist fix. Der Inhalt der angezeigten Einträge der Dropdown-Box soll aus den gebuchten Werten des Data Providers ermittelt werden. Stellen Sie dazu sicher, dass in der Query oder im Query View der Lesemodus (im Query Designer Filterwertauswahl bei Queryausführung) für das Merkmal auf Nur gebuchte Werte für Navigation steht. Weitere Informationen: Eigenschaften des Merkmals

Standardmässig wird beim Web Item Dropdown-Box mit dem Datenanbindungstyp Merkmalswert zur Filterung (CHARACTERISTIC_SELECTION) ein einzelner Filterwert gesetzt. Um diese Standardfunktionalität zu erweitern, können Sie das Web Item Dropdown-Box mit einer Javascript-Funktion ergänzen. Dazu gehen Sie wie folgt vor:

...

1. Legen Sie ein neues Web Template mit zwei Data Providern an. Beide Data Provider werden durch das gleiche Objekt initialisiert.

2. Fügen Sie ein Web Item Analyse in das Web Template ein, und ordnen Sie dem Web Item den ersten Data Provider zu.

3. Fügen Sie ein Web Item Dropdown-Box in das Web Template ein. Stellen Sie für das Web Item die folgenden Parameter ein:

a. Wählen Sie als Datenanbindungstyp Merkmalswert zur Filterung (CHARACTERISTIC_SELECTION)

b. Geben Sie als Data Provider den zweiten Data Provider an.

c. Schalten Sie den Parameter Eintrag Alle anzeigen (ALL_VALUES_ENTRIES_INCLUDED) aus. Dies ist wichtig, da bei Intervallselektionen die Angabe beider Intervallgrenzen sinnvoll ist.

d. Wählen Sie das Merkmal 0CALMONTH aus.

e. Wählen Sie unter dem Parameter Zusätzliche Aktion (ACTION_WITH_DEFAULT) die Option Skript-Funktion (SCRIPT_FUNCTION).

f. Den Namen der Script-Funktion tragen Sie in einem späteren Schritt ein (siehe Schritt 10).

4. Fügen Sie das Web Item Skript (aus der Web-Item-Gruppierung„Diverse“) in das Web Template ein.

5. Benutzen Sie für den Parameter Skript (SCRIPT) des Web Items den Hilfsdialog.

6. Um sich das nötige JavaScript generieren zu lassen, wählen Sie im Dialog „Anlegen mit Wizard“.

7. Wählen Sie unter Alle Befehle ® Befehle für Data Provider ® Befehle für Filterwerte den Befehl Filterwert für ein Merkmal setzen (SET_SELECTION_STATE_SIMPLE) aus.

a. Wählen Sie als Beeinflussten Data Provider den ersten Data Provider.

b. Wählen Sie das Merkmal 0CALMONTH aus.

c. Wählen Sie als Operator INTERVAL_SELECTION aus.

d. Geben Sie den fixen Von-Wert an.

e. Geben Sie einen beliebigen Wert als Bis-Wert an.

8. Schließen Sie den Befehle-Wizard. Es wird eine Javascript-Funktion erzeugt, die den eingestellten Befehl ausführt.

9. Um nun den Bis-Wert dynamisch zu bestimmen, kommentieren Sie die Zeile mit var key = … am Anfang der JavaScript-Funktion aus. Finden Sie den Wert für den Bis-Wert und tauschen Sie diesen durch die JavaScript-Variable key aus.

10. Jetzt können Sie im Web Item Dropdown-Box unter dem Parameter Skript-Funktion (SCRIPT_FUNCTION) den Namen der JavaScript-Funktion über die Wertehilfe auswählen (siehe Schritt 3g)

11. In einem abschließenden Schritt können Sie noch das Web Template entsprechend gestalten.

Hinweis

Sie benötigen zwei Data Provider, damit die Dropdown-Box immer die gleichen Werte und nicht den aktuell gesetzten Filterwert zusätzlich anzeigt.

Das Beispiel-Coding für das beschriebene Web Template sieht wie folgt aus:

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

Hinter dem Global Unique Identifier (GUID) biLargeData:OF8J4L7FXQG0EQ1GODA5M2XKE steht folgendes JavaScript:

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 );

}