SAP BusinessObjects Design Studio is the new product by SAP for the area of professionally authored dashboards. See how you can easily create executive style dashboards using SAP BusinessObjects Design Studio.
Key Concept
SAP BusinessObjects Design Studio was released in 2012 and is available now in release 1.2. SAP BusinessObjects Design Studio is a developer-focused environment for creating dashboards and applications, focusing on becoming the successor for the Web Application Designer and SAP BusinessObjects Dashboards.
SAP BusinessObjects Design Studio provides you an environment that allows you to quickly create professionally authored dashboards for your business users, yet also gives users a dashboarding application that includes some parts of a self-service environment.
After you learn how to create a dashboard using the new functionality, I’ll describe the 1.2 release of SAP BusinessObjects Design Studio and examine the roadmap for the 1.3 release.
SAP BusinessObjects Design Studio Designer
When you start SAP BusinessObjects Design Studio the first time, you are presented with a screen similar to Figure 1.
Figure 1
BusinessObjects Design Studio
The screen has four main areas:
- Dashboard/application area.
- List of available components.
- Outline of the application components.
- Component properties.
You use the application area to place the components for your dashboard/application that you are building. Note that this area automatically adjusts in size based on the screen resolution.
In the top left of the design environment you can see the complete list of components. The list of components is grouped into Analytical Components, Basic Components, and Container Components, allowing you to add objects such as tables, charts, listboxes, and pagebooks.
The Outline, shown in the bottom left in Figure 1, presents all components that you included in your dashboard project. You can also use the Outline to copy, paste, or align components. You can also hide components from the canvas in the Outline so that you can decide which elements will be visible on the canvas. The ability to hide elements is especially helpful with complex dashboards because it allows you to focus on the elements with which you are currently working.
The properties windows provide access to the properties of the selected component.
SAP BusinessObjects Design Studio – Initial Configuration
After you install and start SAP BusinessObjects Design Studio for the first time, you should ensure that the settings are set to your preferences. This can be done at the initial configuration. After starting SAP BusinessObjects Design Studio, navigate to the menu Tools > Preferences and you are presented with the overall Preferences window (Figure 2).
Figure 2
SAP BusinessObjects Design Studio preferences
General: Here you can define the startup mode for your SAP BusinessObjects Design Studio designer. You can choose between the Local Mode, SAP BusinessObjects BI Platform, or SAP NetWeaver. In addition, you can use Design Studio to specify how many steps you are able to undo. Enter this value in the Undo History Size field.
Embedded Web Server: You can use the property Network Port field, found in the Embedded Web Server area, to specify which port you would like to leverage for the embedded server. If you assign the value 0, then each time you execute an application locally, a port is assigned randomly.
Application Preview: Using the Application Preview selection keys, determine if your preview of the application will use the language setting for the user based on the browser configuration or based on the back-end configuration. The language setting affects items such as error messages and number formats for key figures. This configuration is only used for the preview of the application and not for the actual deployment. When you deploy the application into a production landscape, for example with a SAP BusinessObjects BI server, the language preference as part of each user’s profile is used for the language setting.
Member Selection: Editing your preferences in the Member Selection area allows you to configure limits for the loading of members as part of your dashboard project. You have two properties:
- With the first configuration: Maximum number of members to fetch from back end in dialog – you can specify a limit for the retrieval of members a part of the actual dialog box, for example when selecting members in the view editor.
- With the second configuration: Maximum number of members to fetch from back end in content assistance – you can specify a limit for the retrieval of members as part of the script editor.
Both values do not limit the volume of members for the actual run time of your dashboard, but instead these configurations only apply to the designer environment.
Prompt Handling: In the prompt handling area you can decide if you would like to leverage cached values for prompts during the design of the application. If you activate the option Use cached prompt values for local execution, you do not always have to fill out the prompt values when running dashboards, as locally cached values will be used. You can use the button Clear Prompt Value Cache to clear the cache so that you can leverage new values.
Paths: The property in the paths area gives you the option to specify the path that you would like to leverage for templates that are being used by SAP BusinessObjects Design Studio.
After reviewing the initial layout of the SAP BusinessObjects Design Studio designer and explaining more about the preferences, I now show you how to create a dashboard.
Your First Application
In the first dashboard, you display a set of key performance indicators (KPIs) in the form of tiles shown on the canvas and a chart with the KPIs for the last 12 months. In addition to this information, users need to be able to select a specific customer, so that the dashboards will show the information for one customer at a time.
Figure 3 shows the SAP Business Explorer (BEx) queries you need. (All these queries are based on the SAP NetWeaver Demo model.) After reviewing the query setup, I explain the steps to run the dashboard.
Figure 3
BEx Query
For the dashboard you need:
- One BEx query that provides the KPIs per customer (sold-to party).
- One BEx query that provides the KPIs distributed across the last 12 months.
Figure 3 shows the first query in the BEx Query designer, returning the key figures broken down by customer (Sold-to Party). In addition to these elements, the BEx query also contains an optional variable for the characteristic customer. You use the first BEx query to retrieve the KPIs that are shown on the top part of the dashboard.
Figure 4 shows the second query, which returns the key figures broken down by the Calendar month. In addition, the query contains the customer (Sold-to Party) in the Free Characteristics area, so that you can filter the information per customer. The query also contains an SAP EXIT variable that filters the data to the 12 months of the current year.
Figure 4
BEx Query
You use these BEx queries to create the dashboard. Before you start following the set of steps below, you should create an Online Analytical Processing (OLAP) connection for accessing these queries as part of your SAP BusinessObjects BI platform.
- Follow menu path Start > All Programs > SAP Business Intelligence > SAP BusinessObjects Design Studio > Design Studio.
- Because you are using SAP BusinessObjects Design Studio in the integrated mode with the SAP BusinessObjects BI platform, you are asked to log on to the SAP BusinessObjects BI platform. Log on to your SAP BusinessObjects BI server using your SAP credentials and the SAP Authentication.
- Close the welcome screen by closing the Welcome page.
- Navigate to the menu Application in the Design Studio menu bar and select the menu item New (Figure 5).
- Enter MY_FIRST_APP for the Name and Description.
- Select iPad as the Target Device.
- Click the Finish button.
- Navigate to the Outline and select the folder Data Sources (Figure 6).
- Right-click the Data Sources button and then select the option New.
Figure 5
New application
Figure 6
Application outline
10. In the window that appears (Figure 7), click Browse for the option Connection in the workflow.
Figure 7
New connection
11. Select the OLAP connection to the previously defined BEx queries and click OK.
12. Click Browse for the option Data Source.
13. Click the Search tab.
14. Search for the first query based on the technical name.
15. Select the query and click OK.
16. Enter KEYFIGURES_BY_CUSTOMER as the Data Source Alias.
17. Click OK.
18. Navigate to the Outline area in the screen shown in Figure 5 and select the folder Data Sources.
19. Right-click the Data Sources folder and select New.
20. Click Browse for the option Data Source.
21. Click the Search tab.
22. Search for the second query based on the technical name.
23. Select the query and click OK.
24. Enter TREND_PER_CUSTOMER as the Data Source Alias.
25. Right-click the data source TREND_PER_CUSTOMER.
26. Select the menu Edit Initial View.
27. Move the characteristic Calendar Year/Month to the Columns.
28. Move the Measures to the Rows.
29. Click OK.
In the steps so far, I added the data sources to my new dashboard. In the next set of steps I add the drop-down box for the customer selection.
30. Now add a drop-down box from the Basic Components to your empty canvas (Figure 1<) of the new application.
31. Enter the following values in the Properties area on the right side of Figure 1:
- Top Margin 10
- Left Margin 700
- Bottom Margin auto
- Right Margin auto
- Width 300
- Height auto
32. In the Name field of the Properties area, enter DROPDOWN_CUSTOMER as the name for the drop-down box.
33. Now add four Text boxes from the Basic Components to your new application.
34. Select the first Text box.
35. Open the Properties for the first Text box and configure the following values:
• Top Margin 100
• Left Margin 50
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
36. In the Name field of the Properties area, enter NET_VALUE_TITLE.
37. Navigate to the property Text and enter Total Revenue.
38. Navigate to the property CSS (Custom Style Sheets) Style for the text box. Click the CSS Style button.
39. Enter the following values (you can also copy and paste):
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
40. Open the Properties for the second text box and configure the following values:
• Top Margin 100
• Left Margin 220
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
41. Navigate to the property Name and enter OPEN_ORDERS_QTY_TITLE.
42. Navigate to the property Text and enter Open Orders
43. Navigate to the property CSS Style for the text box.
44. Click the button for the CSS Style.
45. Enter the following values:
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
46. Open the Properties for the third text box and configure the following values:
• Top Margin 100
• Left Margin 390
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
47. Navigate to the property Name and enter REBATES_TITLE.
48. Navigate to the property Text and enter Rebates.
49. Navigate to the property CSS Style for the text box.
50. Click the button for the CSS Style.
51. Enter the following values:
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
52. Open the Properties for the fourth Text box and configure the following values:
• Top Margin 100
• Left Margin 560
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
53. Navigate to the property Name and enter FORECAST_TITLE.
54. Navigate to the property Text and enter Forecast.
55. Navigate to the property CSS Style for the text box.
56. Click the button for the CSS Style.
57. Enter the following values:
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
At this point I have added four text boxes with the headings for the KPIs to the canvas (Figure 8). In addition to these headings, I am now going to add another set of four text boxes that show the values per customer.
Figure 8
Sample application with four text boxes
58. Now add four more text boxes from the Basic Components folder to your new application.
59. Select the first of the newly added text boxes.
60. Open the Properties for the first new text box and configure the following values:
• Top Margin 140
• Left Margin 50
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
61. Navigate to the property Name and enter NET_VALUE_VALUE in the Properties sheet shown in Figure 1.
62. Navigate to the property CSS Style for the text box.
63. Click the CSS Style button.
64. Enter the following values:
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
65. Navigate to the property Text and remove the default text.
66. Open the Properties for the second new text box and configure the following values:
• Top Margin 140
• Left Margin 220
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
67. Navigate to the property Name and enter OPEN_ORDERS_QTY_VALUE.
68. Navigate to the property CSS Style for the text box.
69. Click the CSS Style button.
70. Enter the following values:
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
71. Navigate to the property Text and remove the default text.
72. Open the Properties for the third new text box and configure the following values:
• Top Margin 140
• Left Margin 390
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
73. Navigate to the property Name and enter REBATES_VALUE.
74. Navigate to the property CSS Style for the text box.
75. Click the CSS Style button.
76. Enter the following values:
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
77. Navigate to the property Text and remove the default text.
78. Open the Properties for the fourth new text box and configure the following values:
• Top Margin 140
• Left Margin 560
• Bottom Margin auto
• Right Margin auto
• Width 150
• Height 30
79. Navigate to the property Name and enter FORECAST_VALUE.
80. Navigate to the property CSS Style for the text box.
81. Click the CSS Style button.
82. Enter the following values:
background-color: #D9D9D9
color: #000000
padding: 5px
font-family: arial
font-style: normal
font-weight: bold
font-size: 20px
text-align: center
83. Navigate to the property Text and remove the default text.
Up to this point the dashboard contains the customer selection and the four boxes with the values. Now I add the chart (Figure 9) to it.
84. Add a Chart from the Analytical Components to the left lower part of your application.
85. Open the Properties for the chart and configure the following values:
• Top Margin 250
• Left Margin 50
• Bottom Margin auto
• Right Margin auto
• Width 700
• Height 400
Figure 9
Sample application with chart added
86. Now drag and drop the data source TREND_PER_CUSTOMER created in the previous steps to the chart. The chart should show the actual data now.
87. In the Properties of the chart, set the Chart Type to the value Line.
88. Select the top item in the Outline (Figure 10) representing your application.
Figure 10
Application Outline
89. Navigate to the Properties for the application (Figure 11).
Figure 11
Properties
90. In the Properties click the On Startup property.
91. Click the icon on the right side of the On Startup property to open the script editor.
92. Add the script shown in Figure 12. The script loads the members from the characteristic Sold-to-party (0D_NW_SOLD) into the drop-down list.
Figure 12
Script for loading members
94. In the Properties click the button for the On Select property.
95. Add the following script, shown in Figure 13.
Figure 13
Script for loading key figures
Before I continue, let’s clarify the elements of the script shown in Figure 13.
The first part of the script is using the selected value from the drop-down and passes the value to the BEx variable in the first query to filter the data set to the selected customer, as shown in Figure 14.
Figure 14
Pass the value to the BEx variable
The next two lines in the script are also filtering the data; in this case, the second and third data source, based on the selected value from the drop-down (Figure 15). The filtering is not done using a BEx variable, but instead the filter value is just passed to the characteristic.
Figure 15
Script to filter data
The rest of the script (Figure 16) uses the getDataString and setText methods to first get a single value from the data source by specifying which key figure and which filter values to guide the data retrieval (for example, "0D_NW_SOLD": DROPDOWN_CUSTOMER.getSelectedValue() );. The getDataString and setText methods also use the received value and set it as text for the text boxes I added to the canvas.
Figure 16
Retrieve key figure value
The script filters the data sources I added, receives the four needed values from the BEx queries, and displays those values in the text boxes. Figure 17 shows a sample application.
Figure 17
Sample dashboard application
96. Select the menu Application > Save All in the Design Studio.
97. Select the menu Application > Execute Locally.
98. Follow menu path Start > All Programs > SAP Business Intelligence > SAP BusinessObjects BI Platform 4 > SAP BusinessObjects BI Platform Java BI Launchpad.
99. Log on to your SAP BusinessObjects BI system using your SAP credentials and the SAP Authentication.
100. Select the Documents tab.
102. Click the Folder option.
103. Navigate to the folder where you stored the SAP BusinessObjects Design Studio application.
104. Select the application you saved previously.
105. Right-click the application and use the menu Categories.
106. Select the category Mobile in the Corporate Categories. In case you assigned a different category for your mobile BI deployment, select your category.
107. Click OK.
You should now also see your application as part of SAP Mobile BI.
SAP BusinessObjects Design Studio – What’s New in 1.2
Now let’s look at the new features of the release 1.2 and the upcoming features for the release 1.3, shown in Figure 18.
Figure 18
BusinessObjects Design Studio roadmap
As shown in Figure 18, the release 1.2 for SAP BusinessObjects Design Studio delivers several new capabilities. It does the following:
- Delivers a public software development kit (SDK) that allows companies and their partners to develop their own visualizations and extensions.
- Adds support for relational, single-source Universes.
- Adds a new navigation panel, allowing users to add dimensions to rows and columns with a simple click.
- Leverages the exceptions from your predefined BEx queries.
- Offers the option to have BEx queries loaded in the background.
SAP BusinessObjects Design Studio 1.2 was released in November 2013 and is already available.
Looking at the upcoming release 1.3, you can see some of the new features planned for Q2 2014:
- Offline capabilities: the ability to provide offline dashboards to your users.
- Integration with BW Planning: SAP NetWeaver BW Integrated Planning (BW-IP) options, so that you will be able to create planning applications.
- Support for Report-Report Interface: Support for the Report-Report Interface (RRI) for SAP BusinessObjects Design Studio 1.3.
- Support for Drag and Drop: Currently SAP BusinessObjects Design Studio offers click-based navigation but the user cannot use drag-and-drop navigation. The ability to navigate in the data by using a drag-and-drop navigation is planned for release 1.3.
- Printing capabilities: With release 1.2, users can leverage an export to a Microsoft Excel spreadsheet. For the release 1.3 of SAP BusinessObjects Design Studio, there are advanced printing and exporting capabilities planned, such as the ability to export to a PDF file.
- Integration with SAP Lumira: SAP plans to offer integration between SAP Lumira and SAP BusinessObjects Design Studio similar to the integration with SAP BusinessObjects Analysis, edition for Microsoft Office and SAP BusinessObjects Analysis, edition for OLAP. The release will offer the user in SAP Lumira the ability to publish the content from SAP Lumira to SAP BusinessObjects Design Studio, so that the user can share as well as mobilize the dashboard.
Product Roadmap Disclaimer
The descriptions in this article of future functionality are the author’s interpretation of the publicly available product integration roadmap. These items are subject to change at any time without any notice, and the author is not providing any warranty on these statements.
Ingo Hilgefort
Ingo Hilgefort started his career in 1999 with Seagate Software/Crystal Decisions as a trainer and consultant. He moved to Walldorf for Crystal Decisions at the end of 2000, and worked with the SAP NetWeaver BW development team integrating Crystal Reports with SAP NetWeaver BW. He then relocated to Vancouver in 2004, and worked as a product manager/program manager (in engineering) on the integration of BusinessObjects products with SAP products. Ingo's focus is now on the integration of the SAP BusinessObjects BI suite with SAP landscapes, such as SAP BW and SAP BW on SAP HANA, focusing on end-to-end integration scenarios. In addition to his experience as a product manager and in his engineering roles, Ingo has been involved in architecting and delivering deployments of SAP BusinessObjects software in combination with SAP software for a number of global customers, and has been recognized by the SAP Community as an SAP Mentor for SAP BusinessObjects- and SAP integration-related topics. Currently, Ingo is the Vice President of Product Management and Product Strategy at Visual BI Solutions, working on extensions to SAP’s product offering such as SAP BusinessObjects Design Studio and SAP Lumira. You may follow him on Twitter at @ihilgefort.
You may contact the author at Ingo@visualbi.com.
If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.
Premium
Premium