Show TOC

Procedure documentationTutorial part 2: Creating a Detail 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 second part, you extend a simple app with the possibility of a drill down, that is, the possibility of calling one app from another, depending on the context.

In this step, you create the detail app that is called context-dependently from the normal app. This app displays the telephone costs for the last month on a daily basis for the branch that you selected in the higher-level app (see Tutorial Part 2: Creating an App with Xcelsius).

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 detail app in the second part of the tutorial.

Note Note

Ensure that you have already performed the previous steps, as described in Tutorial Part 2: Creating an App with Additional Navigation.

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 UI is to display the telephone costs for a branch, broken down by the days of the previous month. A suitable graphic for this is a column chart, for example. Therefore, from the Components subscreen, drag the Column Chart icon from the Charts category into the empty area above the Microsoft Excel worksheet, and adjust the size to the available space.

  3. To be able to use the selected branch (which you chose in the calling app), you need to create a suitable connection. You do this in a similar way to the procedure in Tutorial Part 2: Creating an App with Xcelsius.

    Therefore enter the following data in cells D7:H8:

    SIGN

    OPTION

    LOW

    HIGH

    Selected Branch

    I

    EQ

    Example 1

  4. The chart is supplied with values later by a BW query. So that you can adjust the appearance of the chart to your requirements while creating the user interface, create an area with example values in the Microsoft Excel worksheet. Enter the following example values in the cells A2:B33 (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):

    Date

    Daily Costs

    01.12.2011

    2000

    01.12.2011

    1959

    ...

    ...

    30.12.2011

    811

    31.12.2011

    770

    Note Note

    Note that the row above the table must remain empty (as explained in Tutorial Part 1: Creating an App with Xcelsius).

    End of the note.

  5. Set the title of the chart. To allow changes later, we recommend that you enter the value in the Microsoft Excel worksheet and to link to this cell in the properties of the chart. Therefore, in cell D2, enter the planned title Daily Costs for Selected Branch.

  6. Now ensure that the entries in the Microsoft Excel worksheet are displayed in the chart. To do this, select the chart and choose the General area in the subscreen on the right. Choose the appropriate cells of the worksheet for the following areas:

    • For   Title   Chart  , enter a reference to cell D2.

    • For   Title   Subtitle  , enter a reference to cell G8. This cell contains the selected branch.

    • For   Title   Category (X) Axis  , enter a reference to cell A2.

    • For   Title   Value (Y) Axis  , enter a reference to cell B2.

    • For   Data   By Range  , enter a reference to the cells B2:B33, and select the Data in columns radio button.

    • To make the individual columns somewhat narrower, so that they do not overlap, in the Appearance area, choose the Series tab page, and set the Marker Size to 12.

  7. To receive external data, you require corresponding connections within Xcelsius. To set these up, start the Data Manager, by choosing   Data   Connections...  .

  8. Create a connection. To do this, from the Add... dropdown list box, choose the External Interface Connection entry.

  9. To create a connection for the query data, on the Definition tab page, choose the + button and enter the following data for the connection:

    • The connection should be automatically supplied by the BW query using the dashboard framework. In this tutorial, in the Range Name field, enter any name, for example FROM_QUERY_COSTS_DAY. You create the link between this connection and the BW query during registration.

      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 fields in which the query output is to be written; in this tutorial, this is A1:B33. Note that you also need to select the empty first row, since these cells are required by the Dashboard Framework.

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

  10. The selected branch also needs to be passed through a connection. To do this, on the Definition tab page, choose the + button, and enter the following data for the connection:

    • In the Range Name field, enter SEL_LOCATION as the name of the connection.

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

    • In the Range field, specify the cells that the connection is to pass; in this tutorial, this is E7:H8.

    • In the Access dropdown list box, choose the Write entry, since you want to grant external write access to this connection.

    Close the Data Manager.

  11. Save the Xcelsius file locally on your computer with the name ztut2_costs_day.

  12. 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 ztut2_costs_day.

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

Continue this tutorial by performing the next step, Tutorial Part 2: Creating the BW Query. In this step, you create the BW query that supplies the detail app with values.