Developing Custom Applications for SAP Enterprise Portal

Developing Custom Applications for SAP Enterprise Portal — Starting with the “Right” Options in Light of SAP NetWeaver

Developing Custom Applications
for SAP Enterprise Portal —
Starting with the “Right” Options
in Light of SAP NetWeaver
Patrick Dixon

In my previous SAP Professional Journal articles,1 we explored how to
use the standard iView wizards within SAP Enterprise Portal (SAP EP)
to integrate data, transactions, and content from SAP, non-SAP, and Web-
based systems. We also explored how to use the SAP Connector iView to
automatically generate iViews from a function module or BAPI in an SAP
system. These standard options will work in the majority of cases, such
as when you want to quickly provide access to SAP transactions or data.

But what if you want to customize or simplify the user interface
or call more than one function module in sequence? In these cases
(and others), you’ll have to develop a custom application. For most
SAP teams, developing custom applications has always meant writing
Patrick Dixon is a manager a custom ABAP report or module pool on one of their SAP systems
with Deloitte specializing in (e.g., SAP R/3 or SAP BW).
SAP Enterprise Portal and
With the advent of SAP NetWeaver, however — and its broad
Web integration. He has
support for Java and .NET, as well as SAP technologies — the menu
more than five years of of languages, tools, and approaches from which SAP teams must choose
experience Web-enabling has increased dramatically. Each option has important pros, cons,
and integrating SAP systems prerequisites, and strategic implications that will affect your long-term
with SAP Enterprise Portal, costs and the lifetime of your code, and each yields an important lesson:
SAP Internet Transaction All modern SAP teams need to define a deliberate development strategy
Server, SAP Exchange to avoid ending up with an inventory of disparate applications that
Infrastructure, and Plumtree cannot be easily maintained or upgraded. Unfortunately, few companies
Software solutions. Patrick have found time to do a true apples-to-apples comparison to serve as the
basis for developing this strategy.
was a key speaker at SAP
BW and Portals 2004 and 1
“Integrating SAP Transactions, Reports, and Data into Your SAP Enterprise Portal — A Guided
SAP Portals 2003. Tour of Your Options, Which to Use, and When” (July/August 2004) and “Integrating Non-SAP
Data and Web Content into Your SAP Enterprise Portal — A Guided Tour of Your Options, Which
to Use, and When” (January/February 2005).
(complete bio appears on page 112)

For site licenses and volume subscriptions, call 1-781-751-8799. 81

SAP Professional Journal March/April 2005

Figure 1 Custom Development Options Overview

SAP Web AS ABAPb
Portal Client SAP Enterprise Portal 6.0 Server
(Web Browser) 6.10
SAP BSP HTTP BSP RFCe
3 Application
iView

Future
Tabs Web RFCe
Page 5 Dynpro (ABAP)
Web Server Builder Application
iPanel

Pages HTTP
iView SAP Web
Server Dynpro
iView
HTTP
SAP Web AS Javac
6.30 SAP
Web
Java RFC System
4 Dynpro (Java)
Application Connector

SAPGUI SAPGUI SAPGUI
for for for
Windows Java Java SAP Web AS Java 6.30
or Other Java Serverd
BAPI or
URL HTTP JSP/Java Java RFC RFC-Enabled
7 Application Connector Function
iView
Module

Visual RFC
1
Composer

SAP RFC
Connector 1b
New > iView
URL iView Custom
iView from PAR ABAP
HTTP SAPGUI DIAG
SAP 2 for HTML Report,
Transaction (WebGUI) Module,
(WebGUI) or Query
8 6 iViewa
Standalone
SAP ITS or Built-In
Transaction
SAP Web AS
HTML

HTML

(WinGUI)
iViewa with Integrated
ITSa
SAP
Transaction
Portal (JavaGUI)
Component iViewa
(Java)
ASP/.NET .NET RFC
Application Connector

Windows Server
DIAG

NOTES: c Can be a standalone SAP Web AS (Java) server, or one that is underlying an
a The Integrated ITS within SAP Web AS 6.40 currently can be used only to Web- SAP application like SAP R/3 Enterprise or mySAP ERP, or one that is underlying
enable transactions, reports, etc., running on its server. To render transactions, SAP EP 6.0 SP3 (now called SAP Enterprise Portal running on SAP Web AS 6.40).
reports, etc., in a remote system, you still need a standalone ITS. d Can be the SAP Web AS underlying SAP EP 6.0 SP3.
b Can be a standalone SAP Web AS (ABAP) server, or one that is underlying an SAP e BSP (and Web Dynpro for ABAP) applications running on an SAP Web AS that
application like SAP R/3 Enterprise or mySAP ERP. The SAP Web AS underlying underlies the target SAP system can access that SAP system’s database directly
SAP EP 6.0 SP3 cannot be used since it does not offer an ABAP runtime. via Open SQL, instead of having to call a remote function module.

Over the course of this two-part article series, 3. Write a custom Business Server Pages (BSP)
I will compare your eight main options for develop- application and deploy it via an SAP BSP
ing custom content and applications for delivery iView.
via SAP EP:
4. Write a custom Web Dynpro for Java application
1. Write a custom SAP function module and deploy and deploy it via an SAP Web Dynpro iView.
it via the SAP Visual Composer.
5. Write a custom Web Dynpro for ABAP applica-
2. Write a custom SAP transaction or report and tion and deploy it via an SAP Web Dynpro iView
deploy it via an SAP Transaction (SAPGUI) iView. (future option).

82 www.SAPpro.com ©2005 SAP Professional Journal. Reproduction prohibited. All rights reserved.


6. Write a custom portal component in Java and remaining options (6-8) are covered in the second
deploy it via a PAR-based iView. installment. Since the most effective way to under-
stand a technology is to see it used in practice,
7. Write a custom J2EE application and deploy it via throughout the article series we will use each technol-
a generic URL iView. ogy to build the same simple application so you can
clearly see how each of the options differs in terms of
8. Write a custom ASP or .NET application and platform and skill set requirements, level of effort, and
deploy it via a generic URL iView. ease of coding.

Figure 1 provides a graphical overview of these Let’s get started by describing the application that
options and how they fit into an SAP EP landscape. we will develop.
This first installment of this article series covers
options 1-5, which are the easiest to implement; the

Note!
Note! While it sounds obvious that IT teams should
2
My previous articles included a parallel develop a company-wide menu of approved
discussion for customers running SAP EP 5.0 SP5. development options, and evaluate which of these
Since most customers have by now upgraded, I options is most appropriate for each development
will limit the discussion to SAP EP 6.0. Most of request, few do so in practice. Instead,
the discussion still applies to SAP EP 5.0, but the development requests are met with whichever
menu paths and iView types will differ. option is most familiar or most convenient, instead
of most strategic. Hopefully this article will help
change this way of thinking (see the sidebar below
for some additional pointers on the characteristics
of successful IT teams).
2
See the July/August 2004 and January/February 2005 issues of SAP
Professional Journal.

Three Custom Development Habits of Successful IT Teams

In my experience, the most successful IT teams do three key things with regard to custom development:

ü They choose a small number of options that are easy to administer, easy to maintain, integrated
with their backend data, security, etc., and have a relatively predictable future. For example, they use
ABAP for SAP development, Web Dynpro for Web-based SAP applications, and JavaServer Pages
(JSP) for non-SAP Web development.

At the other extreme, trying to mandate a single development approach almost always has disastrous
results — i.e., an excessive amount of code to accomplish easy tasks, inefficient performance, or
attempts to circumvent the standard. A common example is the mandate that SAP developers are
not permitted to make modifications to standard SAP code (a.k.a. “core mods”) under any conditions.

(continued on next page)



(continued from previous page)

In some cases, unique, company-wide business requirements can be met most strategically by
changing a line of code in an SAP program.* SAP’s Modification Assistant, Modification Browser,
and automated adjustment tools make tracking these changes — and adjusting them during upgrades
or hot package applications — easy.** In most cases, this approach is less costly and less risky than
copying an SAP program and then making the modifications to the copy, which means you must
manually apply all hot packages and upgrades.

ü They encourage their developers to learn about
and experiment with new technologies, even Caution!
if they don’t use them. Programming is an An industry-wide pitfall is to let developers try out
interesting thing — concepts and techniques new technologies on actual projects to gain practice.
cross-pollinate. Only by gaining experience While it’s true that you can’t know the true limitations
with multiple languages and technologies can of a technology until you kick the tires a bit, it is
developers really master their craft. A good catastrophic to end up with an arsenal of “one-off”
applications developed with different technologies.
working knowledge of multiple technologies also Instead, isolate learning to building test projects or
gets developers used to change — if a developer prototypes, and if a technology seems promising,
has been writing ABAP interfaces for 15 years, and seek to have it officially added to your company’s
you want to shift to Web Dynpro, you will inevitably strategic list of development options.
meet with resistance.

ü They avoid custom development whenever possible — a wise man once said “every additional
thing I own is another noose around my neck,” and the same is true for custom code, which must
be administered, maintained, enhanced, upgraded, tracked, and eventually migrated or retired.
If your custom development is spread across multiple systems and languages, and has different
dependencies (e.g., platform settings, configuration, etc.), the situation is exacerbated. If this sounds
like your company, the road to recovery starts by implementing defined initiatives to reduce the
number of platforms and technologies you use and to consolidate and harmonize your existing
custom code.

* You do this by requesting a modification key from the SAP Service Marketplace (http://service.sap.com). This is a simple,
painless procedure that many mistakenly fear more than a root canal.

** See the article “The Basics and Beyond: Manage Modifications Effectively with the SAP Modification Assistant, Modification
Browser, and Object Adjustment Tools” in the May/June 2003 issue of SAP Professional Journal.

Note!
Choosing the “best” option requires careful consideration of the predominant skills of the team members within
your organization, the platforms you have available (or plan to upgrade to), the systems you need to access, and
how your landscape (and available technology) will evolve in the future. Indeed, custom code tends to live longer
than most people think, and which options are strategic can change over time.



Figure 2 Example Application Flow

Web Browser SAP Custom SAP R/3 System
Enterprise Portal
Application
Invoking Portal Page Web browser Portal launches (platform
User clicks requests the varies)
on the link Link to the iView iView application
to launch
the iView Function Module
ZEPO_ADDRESS_LOOKUP
Search Screen
Portal loads Application Application
Street* <entered street> calls the
the search returns
page into the search function
City* <entered city> module,
User enters the iPanel page
Portal Custom passing
a street, city, ZIP* <entered ZIP> Application the input Imports Street, City,
and ZIP and Server parameters and ZIP
clicks on Code (specify “*” for all
Search Search
fields to get a full list
* All fields are required Browser Portal of companies)
submits the passes the
form form data
Results Screen to the
application
Exports Table of
Street <entered Street> Company Names
Table of (that match the
City <entered City> address information)
company
names is
ZIP <entered ZIP> returned

List of company names Portal loads Application
Company 1 the results generates
page into the results
Company 2 the iPanel page

...

Example Application Overview the address values submitted by the user, call the func-
tion module, and generate the results page. SAP EP is
Consider the following scenario: A user knows the responsible for managing the navigation details, com-
address of a company and wants to look up the com- municating with the user’s Web browser, and loading
pany name. The user logs on to SAP EP and clicks on the search and results HTML pages into the appropri-
a link to a directory lookup application. On the search ate iPanel on the user’s portal page.
page that appears, the user enters the street address,
city, and ZIP code for the company and clicks on the
Search button; the application then retrieves a list of
companies with that address from the SAP R/3 data- Note!
base. This is the example application we will build to
illustrate the options discussed in the article. When contemplating the demos to build for this
article, I felt it was important that the demo
The flow of the application is illustrated in programs provide three fundamental functions:
Figure 2, where you can clearly see the example accepting data from the user, interacting with a
sequence of actions play out. You’ll notice that the backend database, and displaying database
root of the application is a function module in information to the user. These are characteristics
of enterprise applications and will provide a useful
SAP R/3 called ZEPO_ADDRESS_LOOKUP, which
illustration of the differences between the
takes in the values in the search fields and returns a demonstrated portal development options.
table of matching company names. It is up to our
application to generate the search HTML page, parse



Figure 3 SAP R/3 Address Lookup Function Each Example Will Call

FUNCTION ZEPO_ADDRESS_LOOKUP.
*"-------------------------------------
*"*"Local interface:
*" IMPORTING
*" VALUE(STREET) TYPE STRING
*" VALUE(CITY) TYPE STRING
*" VALUE(ZIP) TYPE STRING
*" TABLES
*" EPOCOMPANY STRUCTURE ZCOMPNAMES OPTIONAL
*"-------------------------------------

DATA: A TYPE STRING, B TYPE STRING,
C TYPE STRING.

A = 'NO ORGANIZATION NAME FOUND FOR YOUR INPUTS. PLEASE TYPE '.
B = ' * AS WILDCARD FOR ALL THE INPUT FIELDS'.

CONCATENATE A B INTO C.

TRANSLATE STREET TO UPPER CASE.
TRANSLATE CITY TO UPPER CASE.
TRANSLATE ZIP TO UPPER CASE.

IF STREET EQ '*' and CITY EQ '*' AND ZIP EQ '*'.
EPOCOMPANY-COMPANYNAME = ' DELOITTE USA LLP '.

Figure 3 shows the code for function module
ZEPO_ADDRESS_LOOKUP. Whether you are adept Note!
at ABAP or not, the code is pretty self-explanatory.
After some initial declarations and preparation, the Given that the function module is written in ABAP
function checks whether any asterisks (*) were and resides in an SAP system, I could have coded
entered as wildcard values. If so, three dummy it to retrieve the company name from an SAP table.
company names are added to the return table I chose to hard-code the values instead to keep the
EPOCOMPANY. If not, the function tries to match code simple and to ensure that it works the same
the input address information to some hard-coded for those who choose to create the demo code
themselves.
values, and returns the appropriate company name.
If no matches are found, a “no matches found”
message is inserted into the return table, along
with a reminder that you can retrieve a list of all
company names by entering asterisks for all three
input fields. Developing the Examples
Note that the search is not case-sensitive because Now that you understand the target design and the
we translate the input values to uppercase before function module we’ll call, it’s time to start develop-
doing any comparisons. ing the examples. As I mentioned earlier, in this first



Figure 3 (continued)

INSERT TABLE EPOCOMPANY.
EPOCOMPANY-COMPANYNAME = ' MICROSOFT USA '.
EPOCOMPANY-COMPANYNAME = ' HEWLETT AND PACKARD '.

ELSEIF STREET EQ 'VANENBURG' AND CITY EQ 'HYDERABAD' AND ZIP EQ
'500082'.
EPOCOMPANY-COMPANYNAME = 'DELOITTE CONSULTING INDIA PVT LTD'.
EPOCOMPANY-COMPANYNAME = 'BAAN INDIA PVT LTD'.

ELSEIF STREET EQ 'HITECH' AND CITY EQ 'HYDERABAD' AND ZIP EQ '500082'.
EPOCOMPANY-COMPANYNAME = 'MICROSOFT INDIA PVT LTD'.

ELSEIF STREET EQ 'USA' AND CITY EQ 'USA' AND ZIP EQ '50000'.
EPOCOMPANY-COMPANYNAME = 'SUN MICRO SYSTEMS'.
ELSE.
EPOCOMPANY-COMPANYNAME = C.
ENDIF.

ENDFUNCTION.

installment of the article series, we will build the For your reference, the pros and cons of each
example using the following five techniques, in order option are summarized in a download available at
of ease to most SAP teams (options 6-8 will be dis- www.SAPpro.com.
cussed in the second installment):
1. Write a custom SAP function module and deploy
it via the SAP Visual Composer.
Option #1: Write a Custom SAP
2. Write a custom SAP transaction or report
and deploy it via an SAP Transaction Function Module and Deploy it
(SAPGUI) iView. via the SAP Visual Composer
3. Write a custom Business Server Pages (BSP) For SAP teams with in-house ABAP development
application and deploy it via an SAP BSP iView. skills, the easiest way to create an application that
4. Write a custom Web Dynpro for Java application accesses data in an SAP system is to write one or
and deploy it via an SAP Web Dynpro iView. more custom function modules and deploy them
using the SAP Visual Composer tool (option ➊ in
5. Write a custom Web Dynpro for ABAP applica- Figure 1). The Visual Composer provides a Web-
tion and deploy it via an SAP Web Dynpro iView based WYSIWYG design tool for building custom
(future option). iViews based on one or more function modules in an



SAP system and gives you basic control over the
iView’s appearance (e.g., labels, layout, graphics, and Note!
colors). The Visual Composer design tool automati-
cally generates the Java code an iView needs to create Another key consideration is the awkward platform
its HTML user interface, accept user input, call an requirements for the Visual Composer’s design
SAP function module, and load results into screen tool, which runs only on Microsoft Internet
fields. All of the design is done using visual tools — Information Server (IIS) and requires access to a
you need to write ABAP code only if you can’t find an Microsoft SQL Server database to store design-
existing function module to provide or post the data time data. So you’ll need to set up a separate
server and database if your portal doesn’t already
you need, so non-programmers can build custom
use Microsoft Windows and Microsoft SQL Server.
iViews from existing function modules without much The good news is that Visual Composer iViews can
difficulty. The Visual Composer user interface also be deployed to and run on any SAP EP 6.0 SP3 or
shares the same native portal look and feel as other higher server without modification. These SAP EP
standard SAP EP iViews. All of these capabilities releases have the required Visual Composer
makes the Visual Composer a fast, affordable way to runtime support classes built in. If you have an
build custom portal content. earlier SAP EP release, you need to install
additional components on your portal server
As a maturing visual tool, the Visual Composer before you can run your Visual Composer iViews.
does have its limitations, however. For example, See the Visual Composer documentation for more
you can’t chain a series of function modules in details.
sequence — if you want to call one function module
to validate values and then another to post the data,
for example.3 Your iView can also have only a single
screen — i.e., the search page and the results page
in our example application must share a single 1. Download and install the Visual Composer
screen, so the results fields will always be visible, on your portal server. The Visual Composer
even when they contain no values. In addition, is available from the SAP Service Marketplace
expect to run into a few quirks here and there — for at http://service.sap.com and consists of a
example, the names of the columns in grid views are set of design-time and runtime components
dependent on the SAP R/3 technical field names, you need to install on a Microsoft IIS server.
which we all know are not always meaningful, even As mentioned previously, you’ll also need a
if you speak German. There are often workarounds Microsoft SQL Server available to complete
to these issues.4 the installation. Once you’ve installed the
tool according to the instructions, test your
Figure 4 summarizes the installation, develop- setup by navigating to the URL
ment, and deployment steps involved in writing a cus- http://<myIISserver>/vcserver,
tom function module and deploying it via the Visual where <myIISserver> is the IP address or
Composer (note that the steps in gray are executed host name of the Microsoft IIS server hosting
only once): the Visual Composer design-time components.

3
2. Build and test the function module you’ll
To be more specific, you can’t pass the value of an input field to more
than one function module, nor can you pass the output of one function call on your SAP system. Our application
module to another. You can, however, place input and output fields will call one function module, as shown in
from multiple function modules in your iView layout.
Figure 3. Function modules are built and
tested on the target SAP system using the
4
To work around the one-function-call-only limitation, just write a cus-
tom function module that, in sequence, accepts the input values and
calls the set of function modules you want to call. To work around the Function Builder (transaction SE37). All
table label issue, make a copy of the table and rename the fields. ABAP developers know how to create and



Figure 4 Writing and Deploying a Custom
SAP Function Module (Option 1)
Note!
Download the Visual Composer from Recall from my first article5 that if you don’t need
http://service.sap.com and install it.
detailed control over the user interface, an even
easier way to generate an iView for a function
Install the Visual Composer runtime module is to use an SAP EP 6.0 SAP Connector
components on your development, test, and iView (depicted as option 1b in Figure 1). The
production portal servers, and the design-time
components on a development and test iView creation wizard asks for the name of the
Microsoft IIS server.
function module you’d like to call and the names
of the input and output fields you want to display,
Develop and test your function module (or and it then creates a rudimentary user interface for
modules) on the target SAP system using you — that’s it!
transaction SE37.

Launch the Visual Composer design tool at
http://<myIISserver>/vcserver.

3. Launch the Visual Composer on your
Create a new iView by dragging the iView icon Microsoft IIS server. In your Web browser, navi-
onto the workspace.
gate to the URL http://<myIISserver>/vcserver as
described in step 1.
On the Design tab, define screens, function
module calls, and the flow between them.

On the Layout tab, visually define the layout of
each application screen. Note!
While you don’t need a user ID and password to
Save and test the iView. Saving the iView in launch the Visual Composer design tool, you
the Visual Composer automatically deploys it
to the portal server. will need a portal administrator user ID and
password to start using it productively. The tool
prompts you for logon information when you start
Transport the function module using standard designing an iView — specifically, when you
SAP transport tools, and the iView using
standard portal import/export tools. attempt to look up a function module to use as the
basis of your iView. This is because the Visual
Composer looks in your portal landscape directory
to build the list of potential SAP systems that can
be used as a target.
test function modules, so I will not discuss
how in further detail.

4. Create and name the iView. Simply drag the
iView icon from the Logic Elements pane on the
right onto the workspace, and overtype the default
Note! iView name that appears. See the Visual
Composer online help if you have any trouble.
Remember to RFC-enable your function modules;
otherwise, they cannot be called from the Visual
Composer. 5
“Integrating SAP Transactions, Reports, and Data into Your SAP
Enterprise Portal — A Guided Tour of Your Options, Which to Use,
and When” (SAP Professional Journal, July/August 2004).



Figure 5 Modeling an iView Using the Visual Composer

5. Visually define the application’s screens, func- pane on the right to the workspace, and connect
tion module calls, and flow. This is very easy to them with connectors to define the order of
do. Just navigate to the Design tab within the execution. Single-click on each object to modify
Visual Composer (Figure 5), drag-and-drop its properties — e.g., the screen names, the
screen and function module “objects” from the function module connection parameters, etc.

Note!
For a more detailed demo on how to use the Visual Composer, see my article in the July/August 2004 issue of SAP
Professional Journal.



Figure 6 Defining the Consolidated Layout of the iView

As you can see in Figure 5, I’ve added and con- layout area.6 Figure 6 shows our example iView
nected the search screen, the function module, — as you can see, I’ve added the search fields and
and the results screen. inserted a grid control to display the company
names returned by the function module.
6. Visually define the layout of each application
screen. To do this, switch to the Layout tab 7. Save and test the iView. Deploying and testing
(see Figure 6) by clicking on it. As I mentioned Visual Composer iViews is easy since the Visual
previously, all screens defined on the Design Composer does most of the work for you. All
tab will share a single iView, so you’ll have to you have to do is click on the Deployer button in
add all of the fields and buttons you’ll need here. the right-hand toolbar (see Figures 5 and 6) and
Adding fields is simply a matter of clicking on
the Fields button in the right-hand toolbar and 6
That is, the list of input and output fields for all function modules
dragging fields from the displayed list to the defined in the workspace.



Figure 7 Visual Composer iView at Runtime in a Portal Page

Note!
As you can see in the right-hand toolbar in Figures 5 and 6, the Visual Composer includes a debugger, but it has
a bit of a learning curve. If your iView doesn’t work as expected, go back and retest the function module in the
Function Builder (transaction SE37).

execute the compile and deploy functions in the can add it to a portal page, test it, and use it just
Code Compiler pane that appears. If the tool like any other iView. Figure 7 shows the com-
reports that the objects were deployed success- pleted example iView at runtime in a portal page,
fully, the iView will be added to your list of after a wildcard search for all companies has been
iViews in the portal administration tool, and you performed.



8. Transport the application. Two pieces need Figure 8 Writing and Deploying a Custom
to be transported for the application to work SAP Transaction or Report (Option 2)
in test and production: the backend function
module using standard SAP transport tools
(i.e., the SAP Change and Transport System), Develop and test your module pool, report, or
query on the target SAP system.
and the iView using standard portal import/export
tools. Ask your SAP Basis and portal administra-
Create a new SAP Transaction iView in the
tors, respectively, how to do this. Portal Content Studio.

In summary, developing custom iViews with
Test the iView in a portal page.
the Visual Composer is great when you need a fast,
simple, one- or two-screen user interface for display-
ing or entering a limited amount of SAP data from Transport the transaction, report, or query
using standard SAP transport tools, and the
one or more function modules, and you don’t need iView using portal import/export tools.
sophisticated frontend processing, flow control,
or layout requirements.

Note!
The drawbacks are that SAPGUI-based applica-
SAP has indicated plans to enhance the Visual tions lack a Web look and feel, may require you to
Composer to enable access to non-SAP systems via train and support new SAPGUI users, and may require
technologies including JDBC and XML. Details additional licensing costs to provide access to non-
on this solution are forthcoming. Check SAP users. SAPGUI also tends to consume a lot of
http://sdn.sap.com for the latest developments. screen real estate, and — unlike Visual Composer
iViews — SAP Transaction iViews do not use the por-
tal style sheets, which sometimes makes the iView
look like an alien application. Finally, if your strategy
is to consolidate all of your custom portal applications
onto a central application server (e.g., your portal
Option #2: Write a Custom SAP server), then distributing your applications across SAP
Transaction or Report and Deploy systems can be counterproductive.

It via an SAP Transaction As shown in Figure 8, the key steps in this
(SAPGUI) iView approach are:

For teams with ABAP expertise, the most familiar 1. Develop and test your module pool, report, or
way to build a custom application that accesses data query on the target SAP system.7 ABAP devel-
in an SAP system will be to write a traditional SAP opers are very familiar with the procedure and the
transaction, report, or query using ABAP (option ➋ in ABAP Workbench tools required to do this, so I
Figure 1). Benefits of this approach include a familiar will not go into the details here. Module pools are
development environment, accessibility by traditional created with the Object Navigator (transaction
(non-portal) SAPGUI users, and tight integration with
SAP security and administration tools. The ABAP
runtime also automates many tedious tasks, such as
7
Module pools are screen-based programs and are commonly referred to
as “SAP transactions.” Technically, however, SAP transactions are any
value formatting (e.g., removing leading zeros) and programs that can be launched by a transaction code, including module
validating date formats. pools, reports, and even queries.



Figure 9 Creating an SAP Transaction iView

SE80), reports with the ABAP Editor (transaction administration tool, navigate to the Portal
SE38), and queries with SAP Query or InfoSet Content Studio (menu path Content
Query (transaction SQ01). Since the program
will be accessed with SAPGUI, there are no
special development requirements other than
to keep the application as simple and stand- Note!
alone as possible and to design your screens I covered how to deploy an SAP Transaction iView
to fit the available real estate on your portal via SAPGUI for Windows (WinGUI), SAPGUI
page. Since it is the easiest option, I have for Java (JavaGUI), and SAPGUI for HTML
developed the example application as an (WebGUI) extensively in my July/August 2004
ABAP report. article. Refer to that article for further details and
tips, including how to have SAPGUI launch in its
2. Create a new SAP Transaction iView using own window instead of embedded within the
the portal administration tool. In SAP EP 6.0, browser window.
all that’s required is to log on to the portal



Figure 10 The Example Search Page Rendered as an SAP Transaction iView

Note!
If your target SAP system does not appear in the system dropdown list in the SAP Transaction iView wizard, have
your system administrator register the system in your portal’s System Landscape Directory.

Administration → Portal Content), and create assign the iView to a portal page, and access the
a new iView by right-clicking on the folder in page by logging on as a test user. Keep in mind
which you want to store the new iView. The that since SAP Transaction iViews consume
wizard shown in Figure 9 appears, asking for significant screen real estate, they should almost
the target system, SAPGUI, and transaction always be isolated to their own portal page.
code you wish to use. You can then provide a link to that page from
some conspicuous point. Figure 10 shows the
3. Test the iView. Testing is straightforward: Just search page for our example application, and



Figure 11 The Example Results Page Rendered as an SAP Transaction iView

Figure 11 shows the results page; both are ren-
dered as an SAP Transaction iView using SAPGUI
Tip for Windows (WinGUI).
Users often get confused when SAPGUI is brought
up within a Web browser since they see multiple 4. Transport the application. Your transaction,
sets of navigation controls — one set for the report, or query is transported using standard SAP
browser and one for SAPGUI. Some users transport tools, and the iView is transported using
accidentally hit the browser’s back button, thinking the standard portal import/export tools.
it will do the same thing as the SAPGUI back
button, causing their SAPGUI iView to disappear
(i.e., the browser navigates to the previous portal
page). It is therefore a good idea to place SAP Note!
Transaction iViews on a single page that launches
in a separate window. Since this new window Because the iView accesses data that resides in an
has no history, the browser’s back button will be SAP system, users will have to log on to the SAP
disabled. Another solution is to launch SAPGUI in system when they access the iView. Consider
standalone mode. See my July/August 2004 article implementing single sign-on to avoid this
for more on how to do this. inconvenience.



In summary, writing and deploying traditional custom Business Server Pages (BSP) application
ABAP reports, module pools, and queries is an excel- (option ➌ in Figure 1) is an excellent choice for
lent choice when building complex, SAP-centric accessing data in an SAP system. BSPs are very simi-
applications that you’ll roll out to experienced SAP lar to JavaServer Pages (JSPs) and Active Server
users. Consider one of the other options when writing Pages (ASPs) with three major differences:
less-complex, portal-only applications that will be
accessed by SAP and non-SAP users, when small real 1. You can write most of the application code in
estate consumption and a native Web look and feel are ABAP (or JavaScript).
important, or if your iView will draw heavily from
non-SAP systems. 2. The BSP runtime includes a library of HTML
Business tags that automatically generate complex
user interface elements like shaded tables, lists,
and graphs.9
Option #3: Write a Custom
3. BSPs offer a high level of integration with SAP
Business Server Pages (BSP) programming, security, and administration tools.
Application and Deploy It via an
With respect to development, writing and debug-
SAP BSP iView ging complex BSP applications can take a bit longer
For teams with ABAP expertise and an available SAP than writing traditional SAP applications (see the side-
Web Application Server (SAP Web AS) 6.10 or higher bar below for more on the reasons why), but it is
system (ABAP or ABAP+Java version8), writing a almost always significantly quicker than using .NET
or Java (more on these options in the second install-
8
SAP Web AS is available in three flavors: SAP Web AS Java, SAP Web ment of this article series).
AS ABAP, and SAP Web AS ABAP+Java. Since BSPs need an ABAP
runtime, they can run only on SAP Web AS ABAP or SAP Web AS
ABAP+Java systems. Unlike most SAP systems, SAP EP 6.0 has no
9
ABAP runtime — it runs on SAP Web AS Java. You already have SAP SAP extended the set of standard HTML tags with specialized HTML
Web AS if you have SAP R/3 Enterprise, mySAP ERP 2003 or 2004, Business tags to make building professional-looking user interfaces eas-
SAP BW 3.0 or higher, or SAP SCM 4.0, for example. You can also set ier for BSP developers. The ABAP Workbench features a Tag Browser
up and run SAP Web AS as a standalone system for running custom that enables you to explore HTML Business tags for elements like
BSP, Java, or Web Dynpro applications that access backend SAP sys- SAP grids, fields, and labels and then drag and drop them into your
tems via RFC. BSP code.

The BSP Learning Curve

ABAP developers will find BSP programming difficult at first, because the programming paradigm is very
different from traditional module pools and reports, and you need a good working knowledge of HTML
and JavaScript to build effective applications.

As an example, consider the code for the BSP versions of our search and results pages (shown in
Figures 13 and 14, respectively). In traditional ABAP programming, nearly all programming is on the
server side. When a user clicks on a button, the request is passed to the application server for processing
by the ABAP code. There is no division between processing that happens on the client and what happens
on the server.

(continued on next page)



(continued from previous page)

BSP (and all Web) programming is different — some code runs on the application server, and some code
runs on the client. In Figure 14, the code between the <% and %> markers is called “server-side” code.
This code runs on the server each time the page is requested by the Web browser and is written in ABAP
or JavaScript. The HTML tags and any other JavaScript code outside these markers are treated simply
as text and passed to the browser without being executed on the server. When the browser receives this
text, it “runs” it. When the browser encounters HTML tags, it uses them to render the user interface.
When it encounters JavaScript, it executes it. JavaScript can also be embedded within predefined
“hooks,” so when a user places the mouse over an image, for example, the browser runs a JavaScript
function that substitutes a different image.

For a detailed introduction to BSP programming, see the article “A Developer’s Guide to Creating Powerful
and Flexible Web Applications with the New Web Application Builder” in the January/February 2002 issue
of SAP Professional Journal.

Figure 12 Writing and Deploying a Custom
BSP Application (Option 3)
Note!
Keep in mind that BSP applications do not offer Develop your BSP application on either the
many of the niceties of SAPGUI, such as pop-up target SAP system running SAP Web AS or
on your standalone SAP Web AS system.
lists for choosing values. Unless you can find an
HTML Business tag for the desired function, you’ll
have to code all of these yourself. Test your BSP application by accessing it
directly from a Web browser.

Create a new SAP BSP iView for your
application in the Portal Content Studio.

The process for developing and deploying BSP
applications for SAP EP is outlined in Figure 12: Test the iView in a portal page.

1. Develop your BSP application. You can develop Transport the function module and the BSP
application using standard SAP transport tools,
the application either on the target SAP system and the iView using portal import/export tools.
running SAP Web AS or on your standalone
SAP Web AS system.10 Like module pools,
BSP applications are written within the ABAP
Workbench Object Navigator (transaction SE80).
Figure 13 lists the code for our BSP search page,
and Figure 14 lists the code for the results page. Even if you’re not familiar with HTML or ABAP,
you can probably tell what’s going on. The
companysearch.htm search page (Figure 13)
10
For a detailed introduction to developing BSP applications, see contains a single form with our three input fields.
the article “A Developer’s Guide to Creating Powerful and Flexible
Web Applications with the New Web Application Builder” (SAP The form’s action tag is set to process.htm,
Professional Journal, January/February 2002). which tells the browser to pass the field values to



Figure 13 BSP Code for the Search Page (companysearch.htm)

<%@page language="abap" %>
<html>
<head>
<link rel=stylesheet href="../public/bc/bsp/styles/sapbsp.css">
</head>
<h2> Company Name Search </h2>
<br>
<h3>Search Form</h2>
<form method="POST" action="process.htm">
STREET:  <input name="street" type=text value=""> <br>
CITY:       <input name="city" type=text value
=""> <br>
ZIP:         <input name="zip" type=text
value ="">
<br>
<input type="submit" name="sbutton" value="Search">
</form>
</html>

Figure 14 BSP Code for the Results Page (process.htm)

<%@page language="abap"%>
<html>     
<h2><b>Company Name List </b></h2>
<table border=3>
<%
TYPES ITAB1 TYPE STANDARD TABLE OF ZCOMPNAMES WITH DEFAULT KEY.
DATA ITAB type ITAB1.
DATA WA type line of ITAB1.
CALL FUNCTION 'ZEPO_ADDRESS_LOOKUP'
EXPORTING
STREET = street
CITY = city
ZIP = zip
TABLES
EPOCOMPANY = ITAB.

LOOP AT ITAB into WA.
%>
<tr> <td> <%=WA-COMPANYNAME%> </td></tr>
<%
ENDLOOP.
%>
</table>
</html>



Figure 15 The Search Page Generated by the BSP Code

our process.htm results page (Figure 14)
when the user presses the Search button. The
process.htm page contains server-side code, Note!
written in ABAP, that passes the input values to If you are running your BSP applications on a
the function module ZEPO_ADDRESS_LOOKUP standalone SAP Web AS system, append the phrase
and accepts the return values into a temporary AT DESTINATION <destination> to the CALL
table called ITAB. The code then loops through FUNCTION statement in order to execute the
the table, outputting each company name as a row function module on the desired (remote) SAP
in the HTML table. This code illustrates how system, where <destination> is the logical system
server-side code can be intermixed with HTML name of your remote backend SAP system, as
tags to produce a final HTML page for the defined in transaction SM59 (RFC Destinations).
browser to render.



Figure 16 The Results Page Generated by the BSP Code

2. Test your BSP by accessing it directly from a Content Studio offers a special iView template for
Web browser. It is best to test your applications BSP applications. While you can technically also
on their own before integrating them into the por- integrate your application as a generic URL iView,
tal (so there are fewer potential failure points in the SAP BSP iView option provides additional
case something doesn’t work properly). The URL BSP-specific settings that ease deployment. See
used to access your BSP application directly will my July/August 2004 article for specifics on how
depend on how your system is configured. Ask to create different types of iViews.
your SAP Web AS administrator for details.
4. Test the iView. Assign the iView to a portal page,
3. Create a new SAP BSP iView using the portal and access it by logging on. Figure 15 shows the
administration tool. As explained in my first search page generated by the code in Figure 13,
article in the July/August 2004 issue, the Portal and Figure 16 shows the results page generated



by the code in Figure 14. When users first access Option #4: Write a Custom Web
the iView, they will be presented with a logon
page in order to log on to the system (if single
Dynpro for Java Application and
sign-on has not been implemented). Users must Deploy It via an SAP Web Dynpro
enter a valid user ID and password for the back- iView
end system, not their portal user ID and password.
Our next option (option ➍ in Figure 1) brings us into
the Java world. Web Dynpro is a relatively new fea-
ture built into all SAP Web AS Java 6.30 and higher
Note! platforms. It is essentially a Web-native version of the
traditional Dynpro programming model that ABAP
Knowing which user ID and password to enter is
programmers have been using for years: You build an
a common source of confusion and error among
application as a set of screens and write code that exe-
portal users, and requires them to keep track of
which backend system is generating the iView in cutes either before the screen is displayed or upon a
question. This is why single sign-on is a “must- user event. The difference is that with Web Dynpro,
have” for most SAP EP teams. the code must be written in Java, and you can only
access SAP data by calling function modules via the
SAP Java Connector (JCo). You build and deploy
Web Dynpro applications using SAP NetWeaver
Developer Studio.11
5. Transport the function module, the BSP appli-
cation, and the iView. The BSP application is
transported using standard SAP transport tools.
Since BSP applications are built with the ABAP Note!
Workbench, all associated objects are added
to the transport automatically and can be trans- Web Dynpro resembles Visual Basic in many ways:
ported just like any other SAP object. The You draw screens visually and then insert logic
iView is transported using the standard portal into predefined event handlers. You never see
import/export tools. (or get to modify) the code that actually generates
the screens.
In summary, writing a BSP application is an excel-
lent option for SAP teams with extensive ABAP expe-
rience writing custom ABAP-based Web applications. If you have SAP EP 6.0 SP312 or higher, you can
The extensive library of HTML Business tags greatly host your Web Dynpro for Java applications locally on
simplifies the effort required to produce highly func- your portal server. Regardless of where they are
tional, professional-looking interfaces that share the hosted, however, Web Dynpro for Java applications
look and feel of other SAP EP content. On the other can be integrated into your portal using the SAP Web
hand, with the exception of HTML Business tags, user Dynpro iView template provided with SAP EP 6.0
interfaces must be coded entirely from scratch and can (SAP EP 5.0 does not offer this option).
be accessed only from the Web, and developers must
learn the BSP programming model and tools plus a bit
of HTML and JavaScript to be effective. Web Dynpro 11
SAP NetWeaver Developer Studio is a rebranded version of the Eclipse
for ABAP (discussed in an upcoming section) promises IDE that bundles Eclipse together with plug-ins for SAP Web Dynpro,
to be an even easier option for ABAP developers, but Web services, etc. For a detailed introduction to using this tool, see the
article “Get Started Developing, Debugging, and Deploying Custom
BSP development will remain your best option when J2EE Applications Quickly and Easily with SAP NetWeaver Developer
your needs cannot be met with Web Dynpro (e.g., Studio” in the May/June 2004 issue of SAP Professional Journal.
when you need more granular control over the user 12
Now officially called “SAP Enterprise Portal 6.0 running on SAP Web
interface than Web Dynpro provides). Application Server 6.40.”



Compared to the other Java options — writing a component development (option ➏) is discussed
portal component (option ➏), a J2EE application in the next installment of this article series.
(option ➐), or an ASP or .NET application (option ➑),
each of which will be covered in the next installment The development process for building Web
of this article series — Web Dynpro is the easiest way Dynpro for Java applications is summarized in
to write a Java application that accesses data in both Figure 17:
SAP and non-SAP systems. The Web Dynpro runtime
does many things for you — from drawing the user 1. Download and install SAP NetWeaver
interface, to flow control, to field formatting — that Developer Studio. SAP NetWeaver Developer
you would otherwise have to code yourself. Web Studio is SAP’s strategic tool for Java develop-
Dynpro also automatically gives you the standard SAP ment for the SAP NetWeaver platform and is
look and feel and provides a more “ABAP-like” pro- based on Eclipse, just like the PDK. SAP
gramming model. For example, each screen has a NetWeaver Developer Studio offers built-in tools
ProcessBeforeOutput method and a ProcessAfterInput for developing J2EE components, such as servlets,
method into which you insert each screen’s logic, just Enterprise JavaBeans (EJBs), Web Dynpro for
as in ABAP. In fact, there are only a few drawbacks Java applications, and Web services.
that might cause you to forego Web Dynpro:
• You are not permitted extensive control over the Figure 17 Writing and Deploying a Custom
HTML and JavaScript generated for each screen. Web Dynpro for Java Application
You are pretty much stuck with whatever HTML (Option 4)
and JavaScript the SAP Web Dynpro iView com-
ponent generates for the layout you draw. This Download SAP NetWeaver Developer
Studio from http://sdn.sap.com and install it.
can be an issue if you want to insert HTML
hooks or JavaScript code into your HTML —
e.g., to send messages to other iViews via Create a new Web Dynpro for Java project.

SAP EP’s “eventing” framework (more on this
in the next article).13 Visually define the models, views, and
controllers for your application in the Diagram
view.
• Web Dynpro applications can run only on SAP
Web AS Java 6.30 and higher systems, so you Design the layout of each of your iViews.
can’t run them on a non-SAP J2EE server.
• The product is still in beta release, so you may Code the view event handlers and application
controllers for the view in Java.
wish to avoid using it for mission-critical applica-
tions until it has established a solid track record. Visually map the data handoffs between the
controllers, views, etc.
• Web Dynpro applications do not run as fast as
specialized Java applications (the generic platform Deploy the project as an EAR file to your portal
introduces some overhead). server, and debug it with the SAP NetWeaver
Developer Studio debugger.

• Web Dynpro applications cannot access the portal
runtime user variables. These runtime variables Define a new SAP Web Dynpro iView for your
application from within the Portal Content
are useful for user-specific applications and are Studio, and test it in a portal page.
available when developing portal components
with the Portal Development Kit (PDK). Portal Transport the function module using standard
SAP transport tools, and the iView definition
and EAR files using the portal import/export
13
tools.
Since you can’t modify the HTML code, this also means that you can-
not use HTML Business tags in your Web Dynpro code.



Figure 18 Model-View-Controller Design of the Example Application

Note! Note!
Despite these drawbacks, teams should strongly The instructions in this section provide a brief
consider Web Dynpro if they are determined to use overview of how the example application works.
Java, since Web Dynpro applications involve A more detailed walkthrough, and a complete code
significantly less coding than the other Java listing, is available at www.SAPpro.com.
options, are much more maintainable, and will
benefit from future SAP enhancements to the
programming model. Teams with ABAP
experience should wait for the release of Web
Dynpro for ABAP (option ➎), which I’ll discuss in
with all the necessary project files, Java deploy-
the next section.
ment descriptor files, etc.

3. Visually define the models, views, and con-
trollers that make up your application. One
of the advantages of developing with Web
2. Create a new Web Dynpro for Java project. Dynpro is that the process is highly visual, and
Creating a project is easy — in SAP NetWeaver the tool handles as much of the coding for you
Developer Studio, simply navigate to File → New as possible. The key is to understand that Web
Project, choose the Web Dynpro category, select Dynpro applications consist of three components:
Web Dynpro Project, and follow the wizard views (the screens users interact with), models
instructions. The tool generates a starter project (the backend function modules or tables that



Figure 19 Drawing the Search View in SAP NetWeaver Developer Studio

serve as the data source/target), and controllers
(the Java code that defines the business logic).14
Note!
Of these components, only the controllers are
coded using Java. The views and models in In addition to views and models, the data handoffs
your application are designed using visual tools and control transfers between components are
and wizards, and the Java code for them is gener- defined visually as well. An example of this is
ated automatically by SAP NetWeaver Developer provided in step 6.
Studio. Figure 18 shows the Model-View-
Controller (MVC) architecture diagram for our
example application, which consists of two
views (CompanySearchView and
CompanyNameList), one controller Java API for accessing input and output parame-
ZCOMPModelController), and one model ters, executing the call, etc. Controller
(ZCOMPMODEL). The function of the views is ZCOMPModelController will be invoked
obvious. Model ZCOMPMODEL is bound to our when the user submits the search page, the func-
backend function module — tion module call is executed via the model, and
ZEPO_FUNCTION_MODULE — and provides a control is passed to the CompanyNameList
view to display the results.
14
This architecture is known as the Model-View-Controller (MVC) archi-
tecture, which is used heavily in the Java development world. For more
on the MVC architecture, see the SAP Professional Journal articles 4. Draw the views in your application. Views are
“Build More Powerful Web Applications in Less Time with BSP designed with a tool that functions much like the
Extensions and the MVC Model” (March/April 2003) and “Develop
More Extensible and Maintainable Web Applications with the Model-
Screen Painter within the ABAP Workbench.
View-Controller (MVC) Design Pattern” (January/February 2004). Figure 19 shows the view design for our search



Figure 20 Drawing the Results View in SAP NetWeaver Developer Studio

page. The view design for our results page is second statement fires a plug15 that tells the
shown in Figure 20. system to navigate to the results page to display
the results.
5. Code the view event handlers and application
controllers in Java. I mentioned previously that
when the user clicks on the Search button on the
search page, control passes to Note!
ZCOMPModelController to call our function
module via our model — as you can see in For more details on designing models, views, and
Figure 19, the value aNEWButton is entered for controllers, download SAP’s comprehensive Web
the onAction event of the search page’s Search Dynpro tutorials from https://sdn.sap.com/sdn/
developerareas/webdynpro.sdn?page=webdynpro_
button. When a user clicks on the Search button,
tutorials.htm.
the system calls the onActionaNEWButton()
event handler, which we’ve defined in Figure 21.
The first statement calls a method
(executeZEPO_ADDRESS_LOOKUP_INPUT)
on our controller class to execute our business
logic (make the RFC call to 15
Plugs are symbolic objects that represent a particular navigation
path — i.e., from one view to another. Plugs are defined visually,
ZEPO_ADDRESS_LOOKUP) — the code for which lets you change your application flow without having to recom-
this method is shown in Figure 22. The pile your code.



Figure 21 Coding the Event Handler for the Search View

Figure 22 The Controller Code

public void executeZepo_Address_Lookup_Input( )
{
//@@begin executeZepo_Address_Lookup_Input()
//$$begin Service Controller(-676183145)
IWDMessageManager manager = wdComponentAPI.getMessageManager();
try{
wdContext.currentZepo_Address_Lookup_InputElement().modelObject(
).execute();

wdContext.nodeOutput().invalidate();
} catch(WDDynamicRFCExecuteException ce) {
manager.reportException(ce.getMessage(), false);
}
//$$end
//@@end
}



Figure 23 Mapping the Controller Context and the Results Table in Our Results View

Note!
You may wonder where the RFC call is made in the code in Figure 22. In Web Dynpro, database accesses like RFC
calls are performed by the model, which is defined visually. So the call to
wdContext.currentZepo_Address_Lookup_InputElement().modelObject().execute() executes the RFC call and loads
the results into memory. Recall that models are built visually, meaning we don’t have to write any code at all.

6. Visually map the data handoffs between con-
trollers, views, etc. So far, we’ve described how
Note! control passes from the search view, to the con-
A more detailed walkthrough of how the Web troller, to the model, back to the controller, and
Dynpro for Java example works is available for then to the results view. Since the views, con-
download at www.SAPpro.com. troller, and model are separate, loosely coupled
components, however, you may be wondering
how data gets passed between them. After all, the


Developing Custom Applications for SAP Enterprise Portal

Developing Custom Applications for SAP Enterprise Portal

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Developing Custom Applications for SAP Enterprise Portal

Similaire à Developing Custom Applications for SAP Enterprise Portal (20)

Dernier

Dernier (20)

Developing Custom Applications for SAP Enterprise Portal