Despite its many capabilities, SAP Web Application Designer (Web AD) limits the types of Web reports you can create. For instance, you must possess limited JavaScript and HTML skills to make interactive Web pages with user-friendly features. More importantly, you cannot efficiently access all data stored outside of BW, such as an Oracle BI data source or Microsoft Analysis Server.

In many situations, you can create more versatile analytical applications that compile data from various sources (such as BW) with little or no programming. SAP NetWeaver includes Visual Composer, a program that integrates with Macromedia Flex. Visual Composer Preliminary Version for Analytics is currently in pilot, introduced in October of 2005. SAP will release it in early 2006 as part of a Support Package for SAP NetWeaver 2004s. Visual Composer allows business developers to create analytical applications like the ones shown in Figure 1 that combine SAP technology with interactive Macromedia Flash Web applications, all in a low-footprint client that you run in a Web browser.

Figure 1

Analytical applications

We’ll provide some background on Visual Composer and explain what Macromedia Flex adds to it. Then, we’ll present a step-by-step example that shows you how to build an analytical application.

Technical Requirements

The current version of Visual Composer requires that you configure the SAP BI Extension Kit and Macromedia Flex server on the portal. When using the Visual Composer installer, select the Macromedia Flex server option.

The example scenario also requires an SAP BI system (BW 3.5C or higher) configured to connect via the SAP BI Connector in SAP NetWeaver Portal (formerly SAP Enterprise Portal 6.0). You are mapped to a user of this system (i.e., your user needs access to the data source you configure in the portal).

The example also requires that you install the following systems as data sources:

• SAP BW 3.5 (BI Content 3.5.3), with demo content activated
  
  
• mySAP CRM Release 4.0
  
  
• SAP R/3 Release 4.70
  
  
• SAP Apparel and Footwear (AFS) 5.0

Visual Composer

SAP initially introduced Visual Composer in a pilot version geared primarily toward modeling basic transactional applications and analytical dashboards. It enables the business analyst to create enterprise applications using reusable components with an exceptional layout, design, and user experience.

Visual Composer’s features include:

• Simplicity: Users create their models without code using a small set of reusable, easily understood concepts (such as views and data binding for defining data flow and presentation between data sources and UI components). The graphical interface includes drag and drop and direct layout visualization, which enables the user to position the elements within the iView and even run a preview of the runtime application.
  
  
• Connectivity to SAP and third-party systems: Users access data services from SAP and third-party enterprise systems directly through the portal. In addition to accessing mySAP ERP and SAP BI systems, users can access Java Database Connectivity (JDBC), OLE Database for OLAP, XML for Analytics (XMLA), and SAP Query systems with the BI Java Connectors.
  
  
• Support for different runtime environments: Users can deploy Visual Composer’s models to run in many formats, including HTML/B, DHTML, and Macromedia Flash.
  
  
• Test-and-Redo: Users can try out, deploy, or simulate a model in runtime, and then go back to the Storyboard (drawing board) to correct and tweak.

Visual Composer can output data from the data services, such as an SAP Business Application Programming Interface (BAPI) or a BI query, to standardized charts, tables, forms, and lists. Visual Composer can then sort the data results according to operators, such as sort, filter, and union. Users can customize any result set using dynamic expressions created on existing fields, or in special virtual fields. Once designed, a special layout mode shows a “what you see is what you get” (WYSIWYG) view where you can adjust the model.

Visual Composer also provides features to help you work with SAP BI systems, including:

• Access to SAP BI queries and query views
  
  
• Access to BI characteristics as data services
  
  
• Integration of BI system exception, variable, and text element information into your models
  
  
• Wizard-based query generation based on templates that address common business questions

Macromedia Flex Joins Visual Composer

SAP integrated Visual Composer with Macromedia Flex, which provides a user interface and allows you to develop rich Internet applications (RIAs), Web applications that resemble desktop software. Its GUI effectively displays dashboard, business process automation, self-service, and commerce applications. Flex supports drag and drop and other helpful visual cues such as sorting and animation, as well as real-time data and media streaming.

In addition, Flex technology delegates processing tasks such as sorting, filtering, and caching, to the client, which minimizes the number of server roundtrips. For example, the client communicates between a table and a pie chart in the table without accessing the server, making for a faster application and a reduced network and server load. Flex supports large-scale application development, meaning many or large in size. Flex applications run in Flash format, and clients typically have all the software they need to run Flash.

As pictured in Figure 2, the Macromedia Flex server is deployed onto SAP NetWeaver’s J2EE server. The business user models an analytical application in Visual Composer (VC), which runs in the Web browser. From the VC model created, the engine (VC server) generates Macromedia XML (MXML) files that the Flex server compiles into a Shockwave Flash (SWF)-based content file. This Flash file is the analytical application, delivered by the Flash client to the end user in the Web browser.

Figure 2

Flex integration on the server

Business Scenario

The following example walks you through the general process that a marketing analyst working for a consumer-products manufacturer might perform. You create an analytical application that models the key performance indicators (KPIs) for each main retail channel, tracking the budgets and performance of the various promotional activities by comparing planned versus actual volume and revenues.

You then deploy this application to Macromedia Flash format, where you can interact with it in your Web browser. The application consists of five interconnected controls (tables and charts). While you interact with the controls, you can determine the cost effectiveness of each of the different promotional tactics in the different channels.

The main steps of the modeling process are:

Step 1. Get the data

Step 2. Build the model logic

Step 3. Configure and lay out the model

Step 4. Deploy and interact

Let’s examine each step in detail.

Step 1. Get the Data

Identify and add all the data services that provide the information you want to display on screen. All of your required sources are available in demo content in the SAP BW system. In this case, you need:

• Trade promotions channel overview query (0CP_SLSCA_Q0015)
  
  
• Tactic analysis query view (0CP_SLSCA_Q0015_V01)
  
  
• Period overview query view (0CP_SLSCA_Q0015_V02)
  
  
• Budget for channel and customer query view (0CP_SLSCA_Q0005_V01)

In the Visual Composer Storyboard (the Visual Composer desktop), select Find Data from the vertical toolbar in the right pane to use the Find Data Services task panel. Locate each service, then drag and drop it into an iView created on the Visual Composer design workspace, as shown in Figure 3.

Figure 3

Find Data Services task panel

Step 2. Build the Model Logic

Once you assemble your data services, you need to define their inputs and the views that display the results. You also need to connect all of the model elements. You do this by dragging to and from the data service input and output ports. First, set your runtime compiler (on the Deploy to Portal task panel, selected by clicking on Deploy in the right vertical toolbar) to Flash format, so you can use the Flash output features as you build your model.

Create a start point from the input port (the initial point of the entire workflow) from the first data service, the trade promotions channel overview query (0CP_SLSCA_Q0015). Create a table called Trade Promo YTD by Channel on the output port that displays the marketing channel as well as planned and actual budgets and volume. You do this by associating metadata in your data service with a table created on the output port of that data service. Do the following:

• Create a start point for the input port, and do not select a field for input.
  
  
• From the output port, drag and create a table. Display the following fields: Actual_Promotion_Volume_YTD_ value, BP_Group_Level_5, Budget_Spent_versus_Plan_value, Budget_Spent_YTD_value, and Promotion_Volume_Versus_Plan_value.

You want the information above to serve as the input for the other data services, so that the user can select a channel in the table and see how the results change accordingly. Therefore, you connect the output of the table to the input of each of the other data services. Tell the data services about the key field by double-clicking on each line to display the Configure Element task panel, and mapping the field BP_Group_Level (in the Input Field column) to BP_Group_Level_5_KEY.

At this point, the design of the model looks like Figure 4.

Figure 4

Build the model

Next, create a pie chart called Tactic Analysis Volume YTD from the output port of the tactic analysis query view (0CP_SLSCA_Q0015_V01) to display the tactic analysis. Configure the chart as follows (Figure 5):

• Chart type: Pie
  
  
• Category Axis – Field and Access label: Tactic
  
  
• Chart Formatting – Legend placement: Right
  
  
• Define the Data Series by clicking on the plus icon at the bottom. From the drop-down list in the Formula column, choose: @Actual_Promotion_Volume_YTD_value.

Figure 5

Configure Element task panel

Next, create an animated chart using the period overview query view (0CP_SLSCA_Q0015_V02) that takes the channel input and output information about the planned and actual volume of that channel. Create a line chart from the output port of this data service called Promo Volume YTD Plan vs. Actual. Configure the chart as follows:

• Chart type: Line
  
  
• Category Axis — Field: Posting_period
  
  
• Category Axis — Axis label: Month
  
  
• Data Animation — Effect: Slide in/out
  
  
• Define the following Data Series
  
  
  • @Actual_Promotion_Volume_YTD_value and overwrite Series 1 with Actual Volume
    
    
  • @Planned_Promotion_Volume_YTD_value and overwrite Series 2 with Planned Volum

Now you need another instance of the Period Overview data service to show different information, but using the same results coming from the first table. This displays the planned and actual budget by channel, next to the Promo Volume YTD Plan vs. Actual table.

Go back to the Find Data Services task panel to add the same data service, period overview query view (0CP_SLSCA_Q0015_V02), again. Connect the output of the Trade Promo YTD by Channel table to the input port of this data service, and map the line between them by double-clicking on it and setting the BP_Group_Level_5 field to @BP_Group_Level_5_KEY.

Create another animated line chart to display the planned and spent budgets from the output port of this data service, calling it Promo Budget YTD Plan vs. Actual. Configure the chart as follows:

• Chart type: Line
  
  
• Category Axis — Field: Posting_period
  
  
• Category Axis — Axis label: Month
  
  
• Data Animation — Effect: Slide in/out
  
  
• Define the following Data Series:

  - @Budget_Spent_YTD_value and overwrite Series 1 with Actual Budget
  
  - @Planned_Budget_YTD_value and overwrite Series 2 with Planned Budget

Finally, create a table to accept the output of the budget for channel and customer query view (0CP_SLSCA_Q0005_V01). Name it Budget Availability YTD and configure the table to display the following fields:

• BP_Group_Level_6
  
  
• Promotion_Budget_Approved_value
  
  
• Promotion_Budget_Budgeted_value
  
  
• Promotion_Budget_No_Longer_Available_value
  
  
• Promotion_Budget_Released_value
  
  
• Promotion_Budget_Spent_value
  
  
• Promotion_Budget_Still_Available_value

Your basic model is now complete and looks like Figure 6.

Figure 6

The complete model

Step 3. Configure and Lay Out the Model

Select the Layout tab in the workspace to switch to layout mode to view the general runtime layout of each UI component that the dashboard displays. You can drag and drop the tables and charts around the layout to size them according to their contents. You can also move the different columns of the tables as needed, and configure the different controls within the views.

The results of your layout efforts might look like Figure 7.

Figure 7

The model layout

At the top left, you’ll find the Trade Promo YTD by Channel table, whose output feeds the other tables and charts. In this layout, the user moved the other charts for easy comparison and analysis.

Step 4. Deploy and Interact

Go to the Deploy to Portal task panel to set your target deployment runtime to Macromedia Flash, and click to deploy the model. Within seconds, Visual Composer compiles and deploys your model together with the Macromedia Flex server. Then, you can click to view the actual model in the portal, interact with the tables and charts, and check your results (Figure 8).

Figure 8

The model in Flash

You can also return to your model, make any adjustments you may require, redeploy, and view the model again.

Moya Watson

Moya Watson is an information developer on the SAP NetWeaver development team at SAP Labs in Palo Alto, California. She brings more than a decade of Bay Area software technology experience to SAP, where she’s been responsible for writing for Java applications since 2001, and for BI integration in Visual Composer since 2003.

You may contact the author at moya.watson@sap.com.

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

Judy Kestecher

Judy Kestecher is an information developer in the SAP NetWeaver Product Management group located in Ranaana, Israel. In that capacity, she applies more than 20 years’ experience in technical writing and copywriting to challenges of documenting a range of SAP products, including Visual Composer and Master Data Management.

You may contact the author at judy.kestecher@sap.com.

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