The current generation grew up with Web sites and tools such as Hotmail, MSN, and amazon.com. For this generation, the SAPGUI and People-Centric User Interface (PCUI) screens have a look and feel that is miles away from what they are used to. So we as system implementators need to change the way we think about the user interface. Just as CRM users sell their products, a system implementer can sell a product — the CRM application — to CRM users.

My experience shows that SAP CRM users who work in a sales or marketing department are different from the average business application user. Sales and marketing users are often occasional users and therefore their UI needs can be very different. For example, in most transactions the user has to go to multiple screens without any clear guidance — the user has to learn when to go to which screen. Occasional users tend to prefer to view all the information they need in one screen, rather than pressing the Enter key several times to access what they need.

Furthermore large parts of SAP CRM are developed from a data model perspective. For instance, take the maintenance of marketing attributes linked to business partners. In SAPGUI and PCUI, the user has to perform many actions: look up the proper attribute set, assign it to the customer, look up the correct attribute, look up the value, and then save it. From the data model perspective, this is perfect. However, the user just wants to fill one business partner field.

I’ll describe how you can streamline the UI using xApps and composite applications that you create in Adobe Flex. Most people are familiar with Web sites created with Adobe Flash — Flex is the same tool, but it is designed to create business applications. Then I’ll show you three example scenarios. For this process you need SAP Basis version 6.20 or higher to use Web services or SAP Basis version 6.4 or higher to use Enterprise services. I describe the process for SAP CRM 2005, but the processes should also apply to SAP CRM 2007. For more information about using Adobe Flex with SAP systems, xApps, and Web services, refer to the “Additional Resources” sidebar.

Replacing Standard Screens

To create a new screen, you don’t have to drastically change the entire SAP CRM application. Instead, you change only a couple of screens, using as much of the existing business logic as possible, including the methods, function modules, and framework, to develop your new UI.

Let’s take the marketing attributes page from PCUI as an example. First, you check what’s behind the standard SAP screen to maintain these marketing attributes. You need to know how SAP CRM retrieves the possible marketing attributes and attribute sets and how it saves the filled attribute value back to the database. If you know these function modules or methods, you can build your own screen in Adobe Flex with the same functionality. You then can customize the look and feel to meet the needs of your users, while in the background you use the same function modules or methods that SAP uses. The output of your development activities in the Adobe Flex builder is a .swf file that contains the layout of the screen and the calls to the Web services. Figure 1 shows the .swf file you link as a MIME object to a Business Server Page (BSP) in transaction SE80.

Figure 1

Link the .swf file to a BSP and call it in the layout

In Figure 1 you also see that the system passes a parameter (in this case the partner number) to the Adobe Flex component. The component uses it as an input parameter to call the Web services or function modules in the SAP CRM system. In transaction SE37, select Remote-enabled module for the function modules that the system calls from the Adobe Flex screen (Figure 2). This is needed because, from the technical point of view, the Flex application runs on the local Web client and from there it calls the function module.

Figure 2

The function module attributes in transaction SE37

Figure 3 provides an overview of the architecture. In the diagram you can see that the only new step introduced is the Flex object. Instead of having the BSP logic call the function modules, you let the Flex screen call them.

Figure 3

Overview from the portal down to the business logic

A few of the benefits to designing your own screen are:

Data on the screen: You can show only fields that are relevant to your organization. Without a custom screen, the standard screen may show irrelevant data or the system may spread the necessary fields over multiple screens or even multiple systems.

Performance: You can set up your new screen so that it retrieves all the possible data at once from the Web client. In PCUI for every action you do, such as show a drop-down list, the system sends your action to the server and the server sends its response back. Obviously, this takes some time. A custom screen allows the user to work within the screen without having to go back to the server multiple times. In my experience, users see this as a big improvement in performance because the Web client performs all the processing necessary for the user interface.

Look and feel: You can create screens that align the application with your company branding or to make it look simpler or more attractive to the user. Adobe Flex provides unlimited possibilities for the look and feel of your screens. Imagine you are a paint company — wouldn’t it be nice to have the exact color the customer requested on the screen in an opportunity or order instead of selecting “dark red” from a drop- down list

Screen flow: You can simplify the sequence of the screens. This allows you to, for example, guide the user through a series of steps. The user works in the custom screen and does not see what occurs behind the screens in SAP CRM.

Real-Life Cases

Here are some xApps and composite applications that my team and I recently created for our SAP CRM customers.

Case 1. Access marketing attribute maintenance with only two clicks. Regardless of the UI, a screen that users often complain about is the marketing attribute maintenance screen. This is a typical UI designed in the same way as the data model.

To maintain marketing attributes, we created an Adobe Flex component that retrieves all the possible marketing attribute sets and displays them on the custom screen. If the user clicks on one of the attributes, the system displays all of them in a grid. You can then change the value of any of the attributes directly within the grid.

This Adobe Flex component is completely integrated into the BSP in which you maintain customer master data in PCUI. This means that when the user selects a business partner in the standard PCUI screen, one of the tabs links to the new component. For the user it is just one of the available screens — the user has no idea that it is a separate component, which you can see in Figure 4. Compare this screen to the standard screen in Figure 5. Instead of needing at least six clicks in the standard system, the user now only needs two clicks by using this composite application.

Figure 4

A new Marketing Attributes screen fully integrated in PCUI

Figure 5

The standard Marketing Attributes PCUI screen

Case 2. Better notes text functionality. Say you want to add formatting to your business partner notes to make them more readable or to emphasize important points, such as to highlight the name of a contact that requested a new price list. In the standard PCUI, you cannot add formatting to text linked to a business partner or activity.

With a new composite application, you can replace the standard notes maintenance screen with a free notes editor that is based on Flex, which you can find at www.adobe.com/devnet/flex/. The Flex component generates HTML, so you can save it just as plain text via the standard SAP function modules. When you look via the standard notes screen you see the HTML coding, but the Flex component shows you the formatted text (Figure 6).

Figure 6

Enhanced notes functionality that allows you to format note text

Case 3: Price management. This composite application creates a custom screen that provides users access to customer-specific prices using data from CRM, ECC, and BI — therefore it is an xApp. In Figure 7, SAP CRM retrieves the customer’s price information via a Web service and displays it in the custom screen. To determine a new price, the user reviews turnover data from BI within the custom screen. Then the user updates the prices in the screen, which updates the prices in ECC. Finally, the controller approves the changes and ECC reflects these updates. The user only works in SAP CRM and doesn’t see the movement among the various systems.

Figure 7

Price management xApp

This example shows how a business application can be easy to use and at the same time contain a lot of functionality. We set up the custom screen so that Web services retrieve all the data at once when the user accesses it. The system doesn’t slow down while the application is running because the data exchange occurs in the local Web client.

Upgrades and the New Web UI

After reading this, you may wonder if these newly designed screens are a roadblock for an upgrade to your CRM system or if they conflict with the new SAP CRM 2006s Web UI.

Fortunately, this new Web UI (which is a further development of the IC WebClient technology) is based on BSPs and is perfectly suited for Adobe Flex enhancements. They integrate in the same way as in the PCUI interface. With minor changes you should be able to use the same Adobe Flex components. The way they integrate into the UI will presumably change a little, but the underlying services still work. However, if you change or add to the original PCUI screen, you will probably need to redo these changes in the new Web UI. The effects on upgrades (e.g., to SAP CRM 2007 or later) is more difficult to estimate because this depends on the amount of changes that SAP plans in its future releases. In the cases I described, we originally designed the Adobe Flex components in an SAP CRM 4.0 system. When we upgraded the system to SAP CRM 2005, we didn’t need to make a single change to the Adobe Flex component or the underlying services.

For the xApps and composite applications that I described, we used standard SAP function modules and methods in our Web services as much as possible. The effects also depend on how well you have built your Web services. In general, I expect the trend separating the UI and the underlying services to continue.

Additional Resources
Kupke, Markus and Thilo Berndt, “SAP CRM 2006s: Create Web Services Quickly with the New Web Service Tool,” in the CRM hub of SAPexperts.

Lorenz, Arim and Gunther Schöppe. 2007. Developing SAP Applications with Adobe Flex: SAP PRESS

Weilbach, Jo. 2005. SAP xApps and the Composite Application Framework: SAP PRESS

SAPPHIRE 2007 presentation, “Adobe Delivers Engaging User Experiences for SAP Software,” by Matthias Zeller, Adobe Systems www.sap.com/community/pub/showdetail.epx?itemID=8914

SAP NetWeaver Visual Composer Installation and Configuration Guide https://help.sap.com/bp_epv170/EP_US/Documentation/How- to/Installation/Install_NW_Visual_Composer.pdf

Boris Dingenouts

Boris Dingenouts is a senior SAP CRM consultant for the Dutch consulting company Exxap. Boris has more than 11 years of consulting experience in SAP, with more than six years in SAP CRM. Exxap is an innovative SAP consultancy company with a focus on SAP xApps.

You may contact the author at boris.dingenouts@exxap.com.

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