Show TOC

Procedure documentationTutorial part 1: Creating an App with Xcelsius

 

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

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

Procedure

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:

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 Start of the navigation path File Next navigation step Document Properties End of the navigation path, 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):

    Branch

    Monthly Costs

    Example 1

    2000

    Example 2

    1800

    Example 3

    1600

    Example 4

    1400

    Example 5

    1200

    Example 6

    1000

    Example 7

    8000

    Example 8

    600

    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 Start of the navigation path Title Next navigation step Chart End of the navigation path, enter a reference to cell D2.

    • For Start of the navigation path Title Next navigation step Subtitle End of the navigation path, enter a reference to cell D4.

    • For Start of the navigation path Title Next navigation step Value (X) Axis End of the navigation path, enter a reference to cell B2.

    • For Start of the navigation path Title Next navigation step Category (Y) Axis End of the navigation path, enter a reference to cell A2.

    • For Start of the navigation path Data Next navigation step By Range End of the navigation path, 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 Start of the navigation path Data Next navigation step Connections... End of the navigation path.

  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 (_) in 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 Start of the navigation path File Next navigation step Export Next navigation step Flash (SWF) End of the navigation path. 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.

Result

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.