Show TOC

Procedure documentationTutorial part 4: Creating an 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 fourth part, you extend the app from part 3 with the possibility of displaying different metrics, depending on the configuration.

To do this, in this step, you extend the app from the third part of the tutorial with this option. To do this, you need to change both the display area and the data transfer from the BW query, and create a new connection, through which the desired metric is transferred from the config app.

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 fourth part of the tutorial.

Note Note

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

End of the note.

Procedure

  1. Load the Xcelsius file ztut3_costs_month from the third part of the tutorial.

  2. You want to allow the display not only the telephone costs in this app, but also - depending on the settings in the associated config app - the duration or number of calls. To do this, extend the example data in the Microsoft Excel worksheet with two additional columns, by inserting three new columns between columns B and C. Enter the following example values in the newly-created cells C2:D10 (technically, you could also leave these cells empty, since the BW query will provide values for them; the data simply allows you to check the UI design):

    Duration

    Number of Calls

    500

    1000

    550

    1200

    600

    1400

    650

    1600

    700

    1800

    720

    2000

    740

    2200

    760

    2400

  3. In the Microsoft Excel worksheet, there are now three value columns (which are to be filled by the BW query that you will create). However, only one value column is to be displayed in the app. The number of the column to be displayed is to be set in the config app. This column number must therefore appear both in the Microsoft Excel worksheet and in an Xcelsius connection.

    Therefore make the following entries in cells G13:H13:

    Column Number:

    1

  4. This column number is set through a connection. Start the Data Manager by choosing   Data   Connections...  , and create the relevant connection on the Definition tab page by choosing the + button. Enter the following data for the connection:

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

      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 Row/Column entry.

    • In the Range field, specify the fields in which the query output is to be written; in this tutorial, this is H12:H13. Note that you also need to select the empty first cell, since it is required by the Dashboard Framework.

    • In the Access dropdown list box, choose the Write entry, since the config app must be able to write the data in the standard app.

    Close the Data Manager.

  5. The app is now to display the appropriate column, depending on the selected column number in cell H13. The simplest way to achieve this is to enter a formula in column E of the Microsoft Excel worksheet that displays the contents of the column to be displayed (B, C, or D), depending on the value of specified cell. You use the Microsoft Excel formula OFFSET for this purpose.

    Therefore, in cell E2, enter the formula =OFFSET(A2;0;$H$13), and then the cells down to E10 (inclusive) with this formula.

  6. Now ensure that column E is displayed in the bar chart above. Proceed as follows:

    1. Select the chart, and, in the properties of the chart on the right, in the area   General   Data  , select the By Series radio button.

    2. Input field Values (X): contains information about which cells are displayed as values in the chart. Set this range to the cells E3:E10.

    3. So that, in addition to the correct values, the correct value heading is displayed, in the properties of the chart on the right, in the area   General   Title   Value (X) Axis  , link to cell E2.

  7. The query (which you will create in the section Tutorial Part 4: Creating the BW Query) is to supply values for the monthly costs, the duration, and the number of calls. You therefore need to adjust the cell range into which the query is to write this data appropriately. You make this setting in the connection FROM_QUERY_COSTS.

    Start the Data Manager again by choosing   Data   Connections...  . Select the connection FROM_QUERY_COSTS, and correct the range from A1:B10 (until now, only monthly costs were displayed) to A1:D10

    Close the Data Manager.

  8. Adjust the title to the changed conditions by entering the text Selected Metric by Branches in cell G2.

  9. Save the Xcelsius file locally on your computer with the name ztut4_metrics_month.

  10. 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 ztut4_metrics_month.

    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 dashboard app.

Continue this tutorial by performing the next step, Tutorial Part 4: Creating the BW Query. In this step, you create the BW query that supplies this app with values - the monthly costs, the duration and the number of calls.