Show TOC

Procedure documentationTutorial part 1: 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 step, you use the SAP BusinessObjects application Dashboard and Presentation Design (Xcelsius) to create the user interface of a simple app, in which telephone costs for the last month are displayed, broken down by various branches of a fictitious company. The data to be displayed is taken from a BW query, which you also create during this tutorial (see Tutorial Part 1: Creating the BW Query. Once you have created the user interface and the BW query, you register them both in the Dashboard Framework (see Tutorial Part 1: Registering the App).


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 first part of the tutorial, during which you learn about the options for creating your own app using a simple example.

Note Note

Ensure that you have already performed the previous steps, as described in Tutorial Part 1: Creating and Registering a Simple App.

End of the note.


Note Note

If you want to supply a range in a Microsoft Excel table using a query or other external sources, for technical reasons, you need to leave a row of cells free above this range. These cells are filled with technical names during the dashboard framework runtime:

This graphic is explained in the accompanying text.

Range of Microsoft Excel Table

End of the note.
  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, broken down by branch. A suitable graphic for this is a bar chart, for example. Therefore, from the Components subscreen, drag the Bar Chart icon from the Charts category into the empty area above the Microsoft Excel worksheet, and adjust the size to the available space.

  3. 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:B10 (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):


    Monthly Costs

    Example 1


    Example 2


    Example 3


    Example 4


    Example 5


    Example 6


    Example 7


    Example 8


    Note Note

    Note that (as mentioned above), the row above the table must remain empty.

    End of the note.
  4. Now set the title and the subtitle for the chart. To allow changes later, we recommend that you enter the values in the Microsoft Excel worksheet and to link to these cells in the properties of the chart. Therefore, in cell D2, enter the planned title Monthly Costs per Branch, and in cell D4, enter the planned subtitle Last Month.

  5. Now ensure that the entries in the Microsoft Excel worksheet are displayed. 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 D4.

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

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

    • For   Data   By Range  , enter a reference to the cellsA3:B10.

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

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

  8. 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. You will create the relationship between this connection and the BW query when registering the app (see Tutorial Part 1: Creating and Registering a Simple App).

      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:B10. Note that you also need to select the empty first row mentioned above, 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.

    Close the Data Manager.

  9. Save the Xcelsius file locally on your computer with the name ztut1_costs_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 ztut1_costs_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.


With the Xcelsius file and the associated Flash file, you have created the user interface of your future dashboard app. In the next steps, you create a BW query, which is responsible for providing values for the app. In the final step, you register the app in the Dashboard Framework.

Continue this tutorial by performing the next step, Tutorial Part 1: Creating the BW Query.