SAP BusinessObjects Design Studio — an Alternative to BEx WAD
- by Sunil Mehta, Solution Architect, SAP
- Biswajit Biswas, Subject Matter Expert in SAP Analytics, SAP GD
- April 26, 2013
Learn how to create dashboards and mobile applications with SAP BusinessObjects Design Studio, and find out how Design Studio integrates with SAP NetWeaver BW. Because SAP has stopped further development for BEx Web Application Designer, Design Studio acts as a new tool to create dashboards.
SAP BusinessObjects Design Studio is as an alternative solution to BEx Web Application Designer for creating dashboards and mobile apps. It has an Eclipse-based Information Design Tool with what-you-see-is-what-you-get capabilities.
SAP BusinessObjects Design Studio is a new tool that helps you create mobile dashboards and other apps using HTML5. Design Studio acts as an extension to BEx Web Application Designer (WAD) in SAP NetWeaver BW; hence, it is an important topic for BI report designers and developers.
Designers who use BEx WAD for new development may face limitations. SAP has announced there are no future enhancements planned for BEx WAD, and mainstream maintenance for BEx WAD ends in the near future, although such announcements are subject to change. Compared to BEx WAD, Design Studio is pixel perfect while designing (i.e., it allows report developers to adjust the formatting of a report down to an exact pixel), it supports SAP HANA and BEx, and the apps, which are created in Design Studio, can be viewed on desktops as well as on mobile devices, which is not possible using BEx WAD.
Additionally, there is no migration path available as of this writing for existing BEx WAD dashboards to Design Studio. For new dashboards and mobile apps, designers should consider using Design Studio instead of BEx WAD.
We take you step-by-step through how to create apps in Design Studio. Our instructions require the following:
- Design Studio is installed
- Users have access to at least one SAP NetWeaver BW system
- The Design Studio add-on is installed in the SAP BusinessObjects BI 4.0 platform (this lets you create apps on the BusinessObjects server)
- Users and report designers have knowledge of BEx queries
The Business Scenario
Let’s consider an example from the aviation industry. Suppose you have a BEx query ready that fetches data on flight-booking details. You have the airline name, flight number, airfare price, and the booking total details for that flight for the current year. This BEx query is a source to several SAP BusinessObjects reports and therefore it can’t be modified. As a business requirement, your client has requested that you create a dashboard app that can filter the individual airline in runtime and see its performance. The client also wants to see the sales figures, fuel consumption levels, and any other business-relevant indicators in different graphical scenarios.
Let’s tackle this requirement using Design Studio.
A Step-by-Step Guide
Open Design Studio. The tool’s home page is divided into different sections, which are as follows (Figure 1):
- Work space, which is where you design apps.
- Components window, which shows all the available components you can use for apps. It is divided into three subsections: Analytic Components, Basic Components, and Container Components.
- Outline window, where you can find data sources and the selected components for the app you are developing.
- Properties window, which shows the properties of each component you choose. You can modify or set those properties in this window.
- Error Log window, which lists all the errors and warnings related to the app.
The home page of Design Studio
You can create applications in a start-up mode as either Local or Connect to BI Platform. To set the start-up mode for building an app, follow menu path Tools > Preferences > Application Design. Under the General heading, choose a start-up mode as per your preference (Figure 2).
Our recommendations are to use Design Studio in the BI platform mode if you have the following requirements:
- You are working in an environment in which the dashboard is shared with other members of the team
- You want to use already existing BusinessObjects user authentication
- You want to integrate existing dashboards and reports available in a BusinessObjects Enterprise environment
Choose either a local or BI platform start-up mode
Go back to the Application Design heading on the left and click Backend Connections. If your start-up mode is Local, you see a box for Backend Connections maintained in SAP logon (Figure 3). If your start-up mode is Connect to BI Platform, you see a box for SAP NetWeaver BW connections stored on the BI platform (Figure 4), in which all BI Consumer Services (BICS) connections to the BW system are listed.
Connections maintained in the SAP logon
Connections on the BI platform
If your start-up mode is Connect to BI platform, then during initialization of Design Studio, the BI credential window appears. Fill in your SAP BusinessObjects credentials to connect to the BI platform.
The apps created in Local mode can be uploaded to the BI platform. Similarly, you can download apps created in Connect to BI Platform mode and add them to your local repository. A user can perform these uploads and downloads if the user has a BusinessObjects server authentication; otherwise, an administrator must perform these activities.
To create an app in Design Studio, click on the new application icon (Figure 5). Alternatively, you can create an app by following menu path Application > New Application.
Create a new app
In the New Application window, give a name to the app, which is usually a technical name that identifies the app uniquely (Figure 6). Fill in a description of the app if desired. You can select the target device as Desktop Browser or iPad. As noted earlier, you can create a mobile dashboard using Design Studio; if you choose the target device as iPad, Design Studio creates a mobile app. If you create a mobile app, Design Studio offers more templates. No special setting is required for mobile apps creation. We recommend you create a mobile app on a BusinessObjects environment. Design Studio 1.1, the current release of the product, supports iPads and iPhones for mobile apps.
Name the app and determine its target device
Click the Next button. After choosing a desktop or iPad app, select a predefined template, or select a blank template if you want to create your own, and click the Finish button (Figures 7 and 8).
Select a template for a desktop app
Select a template for an iPad app
For our example, we select a blank desktop template and name it TEST_APPL_DEMO. Once you create the app, in the Outline window you can see the app name, and under it two folders appear: Data Sources and Layout (Figure 9). All the data sources used in the app are visible in the Data Sources folder, and all the components selected in the app are visible in the Layout folder.
The Data Sources and Layout folders are visible in the Outline window in the lower left
To add a data source to the app, right click the Data Sources folder and select New (Figure 10).
Add a new data source
In the subsequent screen, click the Browse button next to the Connection field (Figure 11), and then from the list that appears, select the BW system or BICS connection you want for the data source (Figure 12). Once you select the system, log into that system using your SAP credentials. If the login is successful, then in the Add Data Source window, you see the Connection is active message with a green icon (previously, this icon is grayed out). By default, your Data Source Alias field is named DS_XX, in which XX starts with 1 (Figure 11). As you add data sources, the XX changes to another number (e.g., DS_01, DS_02).
Click Browse to choose a connection
Choose an available connection from the list
Once the connection is active, click the Browse button next to the Data Source field. Search for the BEx query in the system that you intend to use for reporting, or type the name of the query in the search bar. In Figure 13, under the Folders tab, all the available InfoAreas are automatically listed, from which you can select a query. In the Search tab, you can explicitly enter the name of a query to search for. In our example, we search for the query ZDEMO_FLIGHT. Once the query appears, select it and click OK.
Search for the desired query
In the Outline window, you can now see the currently added data source as ZDEMO_FLIGHT - DS_1 (Figure 14). Let’s create a simple flight details dashboard. Drag a chart from the Components tab to the center work space. The properties of the chart component are visible in the Properties window on the right side of the screen. All the analytical components must be bound to a data source. In the Data Binding section of the Properties window, select DS_1, which populates the chart. As soon as you add the chart component, you see it under the Layout folder (in this example as CHART_1) as shown in Figure 14.
The BEx query acts as the source of the data for Design Studio apps. Within SAP NetWeaver BW, over a period of time data volumes increase and BEx queries fetch more data. The same data flows into the Design Studio without any issues. If any structural changes are made to the BEx query, the app also must be modified to accommodate the changes.
The first steps to create a simple dashboard using components and a data source
Let’s look at some the options you can use as you create this sample flight details dashboard.
You can change the output of the BEx query in Design Studio. This allows you, for example, to create a generalized BEx query in BEx Query Designer, and that single query can populate several dashboards showing different results. To change the output of the query, right click the data source name and select Edit Initial View (Figure 15).
Changing the output of the BEx query
The Edit Initial View screen shows the default selection of rows and columns in BEx. You can add or remove rows and columns as needed for the dashboard. You can also create runtime filters in Design Studio. Once you change the rows or columns, you can view the data in the Live Preview window in the center of the screen. To stop the refreshing of data while changing the rows and columns, mark the Pause Refresh box near the top right (Figure 16). Click OK after you make your selections.
Adjust the BEx query’s measures
Next in our example we add a dimension filter to our dashboard, which filters the output of the data source on filters selected at the runtime. In the Properties window, go to the Data Binding section and assign the data source for filtering. Choose the dimension for which the user wants to filter the data in the runtime. Here, we select CARR_ID, which comes from our query (Figure 17).
Add a dimension filter
Next, select a drop-down box from the Basic Components window. In the Properties window, go to Display and select Items. In the Edit Items pop-up window, add the items to be selected. In our example, we use Column Chart, Pie Chart, and Line Chart (Figure 18). Click OK.
Edit items for display
Figure 19 shows all the components available in Design Studio.
Different components available for app creation in Design Studio
After clicking the OK button in Figure 18, go to the Events section in the Properties window and choose On Select. A Script Editor pop-up window appears (Figure 20). Design Studio supports scripts, and it has an assistance feature. Press CTRL+SPACE to activate the assistance feature. In our example, we have some predefined functions that we use to create events. We use the script shown in Figure 21 to control these functions during runtime. Enter the script in the Script Editor pop-up window.
The Script Editor
Sample script for predefined functions
Next, select and drag a Text component from the Basic Components section to the work space. For the Text component, Design Studio features a CSS Style Editor, which allows you to create custom style sheets for text. Go to the Properties window, and in the Display section, click CSS Style, which opens the CSS Style Editor pop-up window (Figure 22).
The CSS Style Editor
Embed the following code in the CSS Style Editor:
border-bottom: 3px dotted #6699FF;
Design Studio comes with an integrated Web server, which helps designers test apps. To test the dashboard locally, press the run icon in the toolbar. You can also run the app in the BI platform by clicking open the drop-down menu next to the run icon, which presents a Run Application in BI Environment option.
Further, you can run the desktop application you just built in an iPad, too. To do so, select the drop-down menu next to the run icon and select Send to iPad. Design Studio generates a QR code; scan the code to see the current dashboard in your iPad (Figure 23). The QR code always contains the latest data.
Scan the QR code to see the desktop dashboard on an iPad
Let’s look at the final output of the dashboard in Design Studio. Figure 24 shows the initial screen of the Flight Details Dashboard.
The opening screen of the dashboard
Figure 25 shows the filter for Airline using the top drop-down menu.
The Airline filter
Figure 26 shows the dashboard output after applying filters.
A dashboard output after applying filters
Using the second filter drop-down menu, you can select the type of chart for the dashboard — for example, a pie chart (Figure 27).
A pie chart of the flight details
Design Studio still has a long way to go. As you consider your future development needs, refer to the following roadmaps (Figure 28) for dashboards designed in BEx WAD and SAP BusinessObjects Dashboards (formerly known as Xcelsius).
Design Studio doesn`t support sources other than BEx Queries and SAP HANA. However, BusinessObjects Dashboards supports non-SAP NetWeaver BW sources. Therefore, at this point Design Studio is not well equipped to replace BusinessObjects Dashboards. However, in the near future — perhaps by 2014 — Design Studio and BusinessObjects Dashboards will likely morph into a combined design environment, which will go beyond just NetWeaver and HANA data sources.
Roadmaps for creating dashboards using BEx WAD and SAP BusinessObjects Dashboards