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
Ensure that you have already performed the previous steps, as described in Tutorial Part 1: Creating and Registering a Simple App.
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:
Range of Microsoft Excel Table
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 Custom Sizes
radio button, and specify the sizes in pixels as 596 (Width
) and 336 (Height
).
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.
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.
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 that (as mentioned above), the row above the table must remain empty.
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
.
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
, enter a reference to cell D2.For
, enter a reference to cell D4.For
, enter a reference to cell B2.For
, enter a reference to cell A2.For
, enter a reference to the cellsA3:B10.To receive external data, you require corresponding connections within Xcelsius. To set these up, start the Data Manager
by choosing .
Create a connection. To do this, from the Add...
dropdown list box, choose the External Interface Connection
entry.
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
Only use upper-case letters, numbers, and the underscore character (_) in the names of connections.
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.
Save the Xcelsius file locally on your computer with the name ztut1_costs_month.
Generate a Flash file from your Xcelsius file (file name extension swf), by choosing
. Save the Flash file with the name ztut1_costs_monthWhen 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.