GRC
HR
SCM
CRM
BI


Article

 

Developing iViews for SAP Enterprise Portal with the Portal Development Kit for .NET

by Karl Kessler | SAPinsider

April 1, 2005

by Karl Kessler, SAP AG SAPinsider - 2005 (Volume 6), April (Issue 2)
 

 

Karl Kessler,
SAP AG

One of the hallmarks of the SAP NetWeaver platform is not just its integration capabilities, but its flexibility for developers, including its interoperability with development platforms such as Microsoft .NET and IBM WebSphere. This interoperability allows customers and partners to leverage their existing .NET-based solutions and skills in the context of SAP NetWeaver. What does that mean for developers who are working in Visual Basic or C# in Microsoft’s Visual Studio, but want to quickly and easily build applications with backend connectivity to SAP systems? It means that you can combine your existing .NET-based components or applications with data retrieved from SAP systems and run them in SAP’s Enterprise Portal, with all the portal services offered by SAP’s portal runtime environment.

There are a number of ways to create a new portal application with connectivity to your SAP backend systems: Use Web Dynpro Java with the help of the SAP NetWeaver Developer Studio, generate iViews with Visual Composer, or use the Java Portal Developer Kit. There is also a way to build interfaces directly from a .NET development environment — and with minimal training — by using the SAP Portal Development Kit for .NET (.NET PDK).1 The .NET PDK allows developers to use Microsoft development tools such as Visual Studio .NET to create application content for SAP Enterprise Portal that has the look and feel of iViews built with SAP development tools — but without leaving Microsoft’s development environment. In addition, all of the portal services, such as user management, single sign-on, and content management, among others, can be accessed from within a .NET application. Thus .NET developers can continue to leverage their .NET skills.

What .NET PDK Brings to Your Visual Studio Environment
As a .NET developer, you can select from various programming languages, including Visual Basic and C#, and use the many graphical tools contained in the Visual Studio development environment. With the .NET PDK, SAP provides an add-on for the Visual Studio that makes iView development easy, directly from Visual Studio.

By installing the .NET PDK, you gain:

  • A powerful set of SAP NetWeaver controls derived from ASP.NET controls: You can use these controls to design the user interface of your iView. The controls are implemented by SAP and support “Unified Rendering,” which ensures a consistent look and feel to your application. As a result, a user won’t see any difference between a service in the Enterprise Portal, whether it was originally developed with .NET, Java, or ABAP.

  • Deployment to SAP Enterprise Portal: Once you have implemented an iView, you can easily deploy it to the portal from within the Visual Studio and test it.

  • Backend connectivity: Backend connectivity to SAP systems is primarily reached by using the .NET Connector in conjunction with the PDK. The .NET Connector provides access to backend systems by means of the RFC (remote function call) protocol, with tools to help you browse for existing function modules, BAPIs, and type definitions right from inside the Visual Studio.

  • Thorough documentation, tutorials, and sample code: With the PDK installed, you have access to a rich variety of tutorials and samples, along with online documentation, including a complete control reference to get started quickly building, deploying, and running Enterprise Portal Services.

Exploring the .NET PDK
Visual Studio is an impressive tool set for all kinds of development targeted to the .NET runtime platform. I remember quite well when I was first introduced to Visual Basic and Visual C++ back in the 1990s, and I was very excited about how easy this development environment was to learn and use. This still holds true when used with the .NET PDK, which is designed to fit nicely into the Visual Studio look and feel and work seamlessly with its development features.

From the Visual Studio (see Figure 1), you can carry out all tasks from the views, editors, content, and tools — there is no need to leave this integrated environment. In Figure 1, the PDK has been installed, so the PDK documentation offers a thorough description of its various features, including samples, user guides, and control reference (the .NET Connector documentation is shown as well).

Figure 1
Opening a Project in Visual Studio Installed with the .NET PDK

First, Check Out Some Sample Services
The .NET PDK comes with a set of samples that you can build, deploy to the portal, and run immediately. You’ll find them in the PDK installation directory, typically under Program Files\SAP. They include samples such as “Hello World,” Web Service examples, simple and more advanced examples that handle SAP connectivity, and much more. The samples are available for both Visual Basic and C#. (Although Visual Basic is easy to use, I preferred to test out the newer language, C#.)

The first sample I deployed was a Web service for weather forecasts. When it’s executed, the user can pull up the weather details of all airports, grouped by country, and view them from within the portal. It’s a simple example that requires only basic Internet connectivity.

To start, make sure that your portal properties are properly defined in the Visual Studio’s Server Explorer (see Figure 2). The Server Explorer shows the portals you are working with (in our case, the Demo Portal in an SAP IDES airline reservation demo system) and the destinations maintained inside that portal — your SAP backend system. In Figure 2, a function filter is opened showing a few remote function modules.

Figure 2
With the PDK Installed, Check Your Available Systems from Visual Studio's Server Explorer

Now you can open the Web service sample project in design mode (see Figure 3), then use the context menu to deploy it and open the start page of the project in your Web browser.

Figure 3
Preparing to Deploy the Weather Portal Application Available from SAP PDK Samples

Then, Build in Backend SAP Connectivity
Next, let’s study some samples that actually require backend connectivity to SAP environments. A couple of these will show the various levels of complexity. I’ll start with the most simple sample, which allows the user to select a list of customers from the IDES system.

The only real challenges here are simply to:

  • Make sure that the system is properly maintained in the system landscape editor of the portal

  • Make sure that your portal user is mapped to the IDES user in your personal settings4
Note!
  Don't forget to create a system alias in the portal before going any further!

Once you have these steps in place, the rest is easy. Open the project as before (see Figure 4) and deploy and browse your iView, yielding a result you can view in your browser via the Enterprise Portal, as shown in Figure 5.

Figure 4
Opening the Portal Component Project

Figure 5
Viewing the Resulting Customer List in SAP Enterprise Portal

Developing Your Own iView
Now I will show you how to create your very own iView. I will use the function module BAPI_SFLIGHT_GETLIST; this displays a list of flights from the IDES system that matches the search criteria entered by an end user. The Visual Studio with the .NET PDK makes these basic steps easy.

Step 1: Create Portal Components
First, you must create your new project. The Visual Studio’s project wizard (Figure 6) offers you various template choices and project types, including built-in SAP portal application options. Here again I chose Visual C#, and then the template for an SAP portal application. The project is then created and the project’s outline is shown.

Figure 6
Building a New Application for SAP Enterprise Portal with C#

Step 2: Add an SAP Proxy
To call the BAPI you’ll need later, you must first populate your environment with BAPI metadata. To do this, you can add a so-called SAP Connector Proxy (see Figure 7) from the templates available to you. This new proxy will be named automatically and hold your BAPIs, fields, and any other elements needed to connect your iView with the SAP backend system.

Figure 7
Adding an SAP Connector Proxy to Your Portal Application

Before you continue, check the function filter for BAPIs (which we saw back in Figure 2) — it needs to be changed to include our flight BAPI.

Step 3: Fill the Proxy with Functions
Once those steps are complete, you can simply drag the BAPI from the Server Explorer and drop it into the modeling pane for the SAP Connector Proxy (which is named SAPProxy1.sapwsdl). Automatically, all the metadata of the BAPI, such as input and output parameters and corresponding data types, are made visible (as shown in Step 1 of Figure 8), making it easy to see exactly what is contained in the BAPI.

Figure 8
All Variables are Visible Directly in the Modeling Pane

Step 4: Add Fields and Mapping Parameter Collections
You also need to create runtime instances of your BAPI and add them to your modeling pane. These instances will serve as variables that are properly typed to pass parameters and receive the BAPI’s results later on. In our flight example, I added four simple fields for departure and arrival, shown in Figure 8 (step 2), including city and country fields.

The list of found flights are received in a table-typed variable (FlightTab in Figure 8, step 3), which is also added here. The Visual Studio’s parameter collection editor helps you to map your variables as default input and output parameters to the BAPI call.

Step 5: Add Controls and Binding Data
Now, define the layout of your iView by means of the Visual Studio’s embedded designer tool. The designer has its own toolbox. Figure 9 shows the SAP NetWeaver controls listed and available directly from the Visual Studio toolbox.

Note!
  Of course, you’re not limited to using these SAP NetWeaver controls — you could also use any arbitrary .NET controls you choose. However, you’d then lose the benefit of unified rendering.

Figure 9 also provides a good overview of the entire set of Visual Studio tools at your disposal: toolboxes at the left, the graphical layout of the user interface, the list of components in the Solution Explorer, and the Properties pane.

Figure 9
Working with Controls and Fields to Design the User Interface

From here, designing the user interface is straightforward: You simply drag a control element from the toolbox and drop it into the designer pane. The control is displayed immediately and allows property editing in the usual way. For example, I set all input fields of the BAPI to “REQUIRED” to make sure the BAPI can properly be invoked, as reflected in the Properties pane.

Step 6: Add Code
Last but not least, we do need to add some code. Although the environment is highly model-driven and uses a declarative approach, the power of this design approach stems from the fact that event logic can also be implemented using C#, or Visual Basic, if you chose that earlier. (C# has the same expressive power as Java, but certainly requires more coding skills than Visual Basic.)

By double-clicking the form in the Designer pane, you enter the code editor for the page load event, which initializes the iView. Likewise, by double-clicking a button on the screen, you can code the specific action event associated with that button (see Figure 10). In both cases, I add the code needed to the framework provided. In Figure 10, the code I added fetches the values entered by the user into the input fields, executes the BAPI, and stores the results in the table control.

Figure 10
Manually Add the Final Pieces of Code Needed for the Web Form

If you deploy and run the iView, the result should look similar to Figure 11. That’s it — you’re done.

Figure 11
The Final iView Displayed in the Portal

Summary and Outlook
Now you have seen how easy it is to work in a .NET environment and create application content for SAP Enterprise Portal.

The .NET PDK already provides a rich set of controls, but experience shows that control libraries will continue to be enhanced as the Web Dynpro controls and other SAP design functions continue to grow. In upcoming updates of the .NET PDK, you will see additional controls, properties, and methods, and gain access to further services exposed by the portal.

For more information on the SAP PDK for .NET, see the SAP Developer Network (http://sdn.sap.com) in the Enterprise Portal download area, with downloads and installation guides to help you install and register a trial PDK with your Visual Studio installation.

Prerequisites

Before starting your first iView development project based on .NET, make sure that the following components are properly installed:

Microsoft Visual Studio .NET 2003: You need a complete local installation of the Visual Studio on your desktop.
SAP Portal Development Kit for .NET: Download a 90-day trial version from the SAP Developer Network (http://sdn.sap.com) in the Enterprise Portal download area, and follow the installation guide to set up and register the PDK with your Visual Studio installation.
SAP .NET Connector 2.0: Download the .NET Connector from the SAP Service Marketplace (http://service.sap.com/connectors) and install it in the Visual Studio following the detailed steps in the installation guide.
SAP .NET Runtime Engine: Although the runtime environment of SAP Enterprise Portal is implemented in Java, your application is targeted to the .NET runtime (common language runtime), so calls between Java and .NET need to be marshaled back and forth. Check with your administrator to register the SAP .NET Runtime Engine as a Windows service, so that it will handle communication between Java and .NET in an efficient manner.2
SAP Enterprise Portal (SAP EP) 6.0: You will need access to an SAP EP 6.0 SP9 with an installed PDK Runtime. Then, to be interoperable with the SAP .NET Runtime Engine, SAP EP needs to be configured for .NET development. Your administrator can take care of this for you with just a few steps.3
Once all these requirements are met, you are ready to jump-start building SAP Enterprise Portal content created in your .NET development environment.

2 The .NET runtime uses a Java-.NET bridge to communicate between Java and .NET in an efficient manner.

3 The administrator simply has to deploy two software delivery archives (SDAs), contained in the PDK download, to the portal by means of the software delivery manager (SDM).


Architecture of the .NET PDK

You might wonder how all the pieces work together under the Visual Studio design environment. The actual implementation is based on a Java-.NET bridge. The figure below shows the overall architecture.

Architecture of Visual Studio with the PDK for .NET

The Portal runtime takes any requests to iViews implemented in .NET and dispatches them to the SAP .NET Runtime Engine through the Java-.NET Bridge . The Portal maintains Java proxies to the corresponding .NET objects.

Method invocations are marshaled through the Java-.NET bridge. The SAP .NET Runtime Engine instantiates a .NET runtime environment that, in turn, executes the .NET application developed inside the Visual Studio. This sends the rendered HTML output back to the Portal , which embeds the iView in a Portal page . Since unified rendering is used, the processing is fully transparent to the end user.


1This is not to be confused with SAP’s PDK for Java, which was delivered with SAP Enterprise Portal 5.0 and 6.0 and offers simply a library of examples and limited tool capabilities for portal application execution. Other alternatives for developing more sophisticated J2EE-compliant iViews are available through SAP NetWeaver Developer Studio.

4 This simple process is detailed in the documentation.


Karl Kessler joined SAP in 1992. He is the Product Manager of the SAP NetWeaver foundation including SAP Web Application Server, Web Dynpro, ABAP Workbench, and SAP NetWeaver Developer Studio, and is responsible for all rollout activities. You can reach him via email at karl.kessler@sap.com.

An email has been sent to:






More from SAPinsider



COMMENTS

Please log in to post a comment.

No comments have been submitted on this article. Be the first to comment!


SAPinsider
FAQ