Show TOC

Procedure documentationTutorial part 3: Creating a Configuration App with Xcelsius Locate this document in the navigation structure

 

This tutorial is part of a course that explains the creation and registration of apps for the Dashboard Framework. In this third part, you extend a simple app with the option of configuring the app, that is, instead of always displaying data for the previous month, the user can select the desired month in a config app.

In this step, you create the config app with which you are able to select any month for the display of the data. The app consists of two dropdown list boxes, with which you can select the desired calendar month and the desired year, and the appropriate connections.

Prerequisites

This procedure is part of a comprehensive tutorial on the topic Creating and Registering Dashboard Apps. During this tutorial, you create and register a number of apps and their associated BW queries.

You create this Xcelsius app in the third part of the tutorial.

Note Note

Ensure that you have already performed the previous steps, as described in Tutorial Part 3: Creating an App with a Config App.

End of the note.

Procedure

  1. Create a new Xcelsius file. The (currently empty) UI is displayed in the center of the screen. So that the proportions and color scheme of your app complement the apps delivered by SAP, set the following properties:

    • In the Themes dropdown list box, choose the Phase entry.

    • Choose   File   Document Properties  , select the Custom Sizes radio button, and specify the sizes in pixels as 596 (Width) and 336 (Height).

      Note Note

      The crucial thing here is the aspect ratio. If you require more space to create the user interface, you can also specify larger values by multiplying both numbers by the same factor.

      End of the note.
  2. The config app is to be used to select the desired month. It therefore requires a connection that can be externally read. The selected month is also to be displayed as the default value if the config app is called again later, which requires a connection that permits writing from outside the app. Since both connections also communicate with the BW query, you need to adjust the format appropriately, since BW requires the transferred values to be in a particular format.

    • Therefore, for the connection to be used to allow writing from outside the app, enter the following data in cells F1:J2:

      SIGN

      OPTION

      LOW

      HIGH

      Month from Query

      I

      EQ

      201111

    • Therefore, for the connection to be used to read data from outside the app, enter the following data in cells F10:J11:

      SIGN

      OPTION

      LOW

      HIGH

      Month for Query

      I

      EQ

    Note Note

    For more information about the meanings of the individual columns, see Tutorial Part 2: Creating an App with Xcelsius.

    End of the note.
  3. Now create the specified connections. To do this, from the Add... dropdown list box, choose the External Interface Connection entry.

  4. On the Definition tab page, choose the + button, and enter the following data for the connection to be used to allow writing from outside the app:

    • In the Range Name field, enter the name MONTH_IN.

      Caution Caution

      Only use upper-case letters, numbers and the underscore character ('_') for the names of connections.

      End of the caution.
    • In the Range Type dropdown list box, choose the Table entry.

    • In the Range field, specify the cells in which the connection is to write; in this tutorial, this is G1:J2.

    • In the Access dropdown list box, choose the Write entry.

  5. On the Definition tab page, choose the + button, and enter the following data for the connection through which the app is to read:

    • In the Range Name field, enter the name MONTH_OUT.

    • In the Range Type dropdown list box, choose the Table entry.

    • In the Range field, specify the cells from which the connection is to read; in this tutorial, this is G10:J11.

    • In the Access dropdown list box, choose the Read entry.

    Close the Data Manager.

  6. The connection MONTH_IN is used to permit writing from outside the app, that is the month to be displayed is passed to the UI in cell I2; to do this, the BW uses the format YYYYMM. To be able to use the calendar month and year as the default value for the dropdown list boxes, you need to split this value into two cells, one containing the year, and the other containing the calendar month. Use the relevant Microsoft Excel functions to do this. To make this more understandable, insert a description into the preceding cell in each case.

    Therefore enter the following data in cells F4:G5:

    Year:

    =VALUE(LEFT(I2;4))

    Calendar Month:

    =TEXT(DATE(2000;RIGHT(I2;2);1);"MMMM")

  7. To select the desired month, the user is to select the calendar month and the year in two dropdown list boxes. So that the two dropdown list boxes have the correct input options, enter the possible entries for these list boxes in the Microsoft Excel table:

    • In the range B1:B12, enter the months of the year (JanuaryDecember).

    • In the range D1:D12, enter the possible years (20042015).

  8. Xcelsius writes the selected values for the dropdown list boxes in cells G7 and G8 at runtime. Therefore, as labels, in cell F7 enter the text Selected Year and in cell F8, enter Selected Calendar Month.

  9. A dropdown list for the calendar month is to be displayed on the UI. Therefore, from the Components subscreen, drag the icon Combo Box from the category Selectors to the upper-left corner of the graphic area.

  10. Adjust the dropdown list box to your requirements. To do this set the following properties:

    • In   General   Title  , enter the title of the dropdown list box as Calendar Month:

    • In   General   Labels  , enter a link to the cells B1:B12. These are the input options when the dropdown list box is called.

    • In   General   Data Insertion   Insertion Type  , select the Position entry. At runtime, Xcelsius inserts the position of the calendar month selected in the list (that is, for example, 1 for January).

    • In   General   Data Insertion   Destination  , enter a link to cell G8. Xcelsius therefore writes the number of the selected calendar month in this cell at runtime.

    • In   Behavior   Selected Item   Type  , select the entry Dynamic. For information about the meaning of this entry, choose the information button on the right.

    • In   Behavior   Selected Item   Item  , enter a link to cell G5. Xcelsius takes the default value from this cell (see point 6).

    • In   Appearance   Layout   Number of Displayed Labels  , select the entry 5.

  11. In the same way, a dropdown list for the year is to be displayed on the UI. Therefore, from the Components subscreen, drag the icon Combo Box from the category Selectors to the right of the first dropdown list box.

  12. Adjust the dropdown list box to your requirements. To do this set the following properties:

    • In   General   Title  , enter the title of the dropdown list box as Calendar Month:

    • In   General   Labels  , enter a link to the cells D1:D12. These are the input options when the dropdown list box is called.

    • In   General   Data Insertion   Insertion Type  , select the Label entry. At runtime, Xcelsius therefore inserts the selected year.

    • In   General   Data Insertion   Destination  , enter a link to cell G7. Xcelsius therefore writes the selected year in this cell at runtime.

    • In   Behavior   Selected Item   Type  , select the entry Dynamic.

    • In   Behavior   Selected Item   Item  , enter a link to cell G4. Xcelsius takes the default value from this cell (see point 6).

    • In   Appearance   Layout   Number of Displayed Labels  , select the entry 5.

  13. Therefore the two dropdown list boxes write the selected year to cell G7 and the selected calendar month to cell G8. To be able to pass this date in the format YYYYMM to the connection MONTH_OUT, you need to write the two values, reformatted appropriately, to cell I11. You use the appropriate Microsoft Excel function to do this.

    In cell I11, enter the function =CONCATENATE(TEXT(G7;0);IF(G8>9;"";"0");TEXT(G8;0)).

  14. Save the Xcelsius file locally on your computer with the name ztut3_config.

  15. Generate a Flash file from your Xcelsius file (file name extension swf), by choosing   File   Export   Flash (SWF)  . Save the Flash file with the name ztut3_config

    When registering the app, you will import both the Xcelsius file and the Flash file into the MIME repository of your SAP Solution Manager system later in the tutorial.

Result

With the Xcelsius file and the associated Flash file, you have created the user interface of your future config app.

Continue this tutorial by performing the next step, Tutorial Part 3: Registering the App and Config App. In this step, you register the app and the associated config app in the dashboard framework.