Tutorial Part 5: 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 an app that is supplied with values using a BAdI implementation. The topic of the entire tutorial is the telephone costs for the subsidiaries of a fictional company, which are stored in Business Warehouse. In this app, you can display the number of employees and the number of telephones for these subsidiaries. However, the data source here is not the BW, but rather a BAdI implementation, which you will create as the next step in the tutorial (see Tutorial Part 5: Creating a BAdI Implementation). Once you have created the user interface and the BAdI implementation, you register them both in the Dashboard Framework (see Tutorial Part 5: Registering the App).

Prerequisites

This procedure is part of a comprehensive tutorial about Creating and Registering Dashboard Apps. During this tutorial, you create and register apps and their data sources.

You create this Xcelsius app in the fifth part of the tutorial, where you also learn another way to get data.

Procedure

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
  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.
The UI is to display data, broken down by subsidiary. 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 BAdI implementation. 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:C10 (technically, you could also leave these cells empty, since the BAdI implementation will provide values for them; the data simply allows you to check the UI design):

Subsidiary	Number of Employees	Number of Telephones
Example 1	1000	500
Example 2	900	550
Example 3	800	600
Example 4	700	650
Example 5	600	700
Example 6	500	750
Example 7	400	800
Example 8	300	850

Note Note

Note that, for technical reasons, you require a row above this table (see Tutorial Part 1: Creating an App with Xcelsius).

End of the note.

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 E2, enter the planned title Additional Information, and in cell E4, enter the planned subtitle (See Legend).
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 E2.
- For Title Subtitle , enter a reference to cell E4.
- For Title Category (Y) Axis , enter a reference to cell A2.
- For Data By Range , enter a reference to the cellsA3:C10.
To name the data rows correctly in the legend, select the radio button By Rows in the General area, and assign the correct names to the rows:
- Select Row 1, and enter a reference to cell B2 for the relevant name.
- Select Row 2, and enter a reference to cell C2 for the relevant name.
To visually separate the bars for the individual subsidiaries from each other, in the subscreen on the right, choose the Appearance area, and switch to the Row tab page. Reduce the Markersize to a value of 10.
To receive external data, you require corresponding connections within Xcelsius. To set these up, start the Data Manager, by choosing Data Connections... .
Create a connection. To do this, from the Add... dropdown list box, choose the External Interface Connection entry.
To create a connection for the data of the BAdI implementation, on the Definition tab page, choose the + button and enter the following data for the connection:
- The connection is to be automatically supplied with data in the dashboard framework using a BAdI implementation. In this tutorial, in the Range Name field, enter any name, for example FROM_BADI. You will create the relationship between this connection and the BAdI implementation when registering the app (see Tutorial Part 5: Registering an App).
  
  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 output of the BAdI implementation is to be written; in this tutorial, this is A1:C10. 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 BAdI implementation 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 ztut5_more_info.
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 ztut5_more_info
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 BAdI implementation that 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 5: Creating the BAdI Implementation.