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.

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

4This 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.