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
/Mobile
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.
Key Concept

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

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


Figure 1
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


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


Figure 3
Connections maintained in the SAP logon


Figure 4
Connections on the BI platform

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


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


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


Figure 7
Select a template for a desktop app


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


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


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


Figure 11
Click Browse to choose a connection
    


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


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

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

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


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.


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


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.


Figure 18
Edit items for display

Figure 19 shows all the components available in Design Studio.


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


Figure 20
The Script Editor


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


Figure 22
The CSS Style Editor

Embed the following code in the CSS Style Editor:

font-size:30px;

background: #F0FFFF;

border-bottom: 3px dotted #6699FF;

text-align:center;

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.


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


Figure 24
The opening screen of the dashboard

Figure 25 shows the filter for Airline using the top drop-down menu.


Figure 25
The Airline filter

Figure 26 shows the dashboard output after applying filters.

 


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

 


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.


Figure 28
Roadmaps for creating dashboards using BEx WAD and SAP BusinessObjects Dashboards

Sunil Mehta

Sunil Mehta is a solution architect at SAP. He received his master’s degree in Computer Management from Symbiosis in Pune, India. He is a certified SAP FI/CO/BOBJ consultant, working in analytics. During his career he has been associated with Accenture, IBM, Capgemini, and KPMG, and has worked in various roles, including as a consultant solution architect and a project manager.

See more by this author

You may contact the author at Sunil.Mehta@sap.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.

Biswajit Biswas

Biswajit Biswas works at SAP GD and is a subject matter expert in SAP analytics. He has five years’ experience. He is proficient in the SAP BusinessObjects suite of reporting tools and SAP Data Services. He has been associated with development of Rapid Deployment Solutions for analytics on SAP HANA, focusing on the utilities industry.

If you would like to submit an article idea, please contact the BI editor.

See more by this author

You may contact the author at biswajit.biswas@sap.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.


Comments

No comments have been submitted on this article. 


Please log in to post a comment.

To learn more about subscription access to premium content, click here.