Working With FPM&WDA

Enhanci ng an exi sti ng Web Dynpro Appl i cati on
wi th the Fl oorpl an Manager

Technical Premium Enablement (TPE3.1)
Step-by-step guide for enhancing an existing SAP
application with additional fields and simplifying the layout of
an application

V1.21, March 2013
Document based on ERP 6 EhP6, NW 7.31 and NWBC 4.0

STEP-BY-STEP GUIDE: EXHANCING AN EXISTING WEB DYNPRO APPLICATION WITH THE FPM

2
TABLE OF CONTENTS

RETRIEVING THE WEB DYNPRO APPLICATION NAME .......................................................................... 3
ANALYZE THE HIERARCHY OF THE TECHNICAL OBJECT .................................................................... 5
Analyze the application ............................................................................................................................. 5
If a Service cannot be started .................................................................................................................... 6
Copy the application .................................................................................................................................. 9
Starting the Application ............................................................................................................................11
Enhance the application ...........................................................................................................................12
Testing the enhanced application ............................................................................................................14
SIMPLIFYING THE LAYOUT OF AN APPLICATION .................................................................................15
FPM Workbench ........................................................................................................................................29

3
RETRIEVING THE WEB DYNPRO APPLICATION NAME

Lets assume, youve found an interesting Web Dynpro Application (WDA) included in a SAP standard role
which you like to re-use in an altered fashion in your own developments. For our example, we use the new
Sales Order application, the Lean Order which you can regard as a replacement for e.g. TAs:VA01, VA02
and VA03.

Use TA:PFCG, choose the standard role SAP_SR_I NT_SALES_REP_5, and select the Display button.
Select the Menu tab, expand the Role Menu tree and double-click on the Create Sales Order (Lean Order)
entry. On the right-hand side you can now retrieve the technical name of the WDA, LO_OI F_MAI N_APP.

To test this application, just do a right mouse button click and choose Execute

The URL for directly calling this Web Dynpro application is
ht t p: / / <syst em>. <domai n>: <ht t p- por t >/ sap/ bc/ webdynpr o/ sap/ l o_oi f _mai n_app?TRTYP=
H&TRVOG=0&BP_VERSI ON=15&sap- l anguage=EN&WDCONFI GURATI ONI D=LO_OI F_SDOC_APPL
Interestingly, the mode of this application (create/change/display) can be influenced via the parameter
TRTYP
Value for parameter TRTYP Mode
H Create (derives from German Hinzufgen)
V Change (derives from German Verndern)
A Display (derives from German Anzeigen)

4
Enter some basic data and choose Continue

100000
OR
1000
10
10

In the tab Main View, switch to sub view Business Partner. This is the place where wed like to see additional
Business Partner related information.

5
ANALYZE THE HIERARCHY OF THE TECHNICAL OBJECT
Analyze the applicati on

To get an overview of the applications structure, we have to launch the WDA
FPM_CFG_HI ERARCHY_BROWSER. Therefore, we start the Object Navigator, TA:SE80. Afterwards, select
Package, enter the package APB_FPM_CONF, and expand the Web Dynpro tree until you can access the
Web Dynpro Application FPM_CFG_HI ERARCHY_BROWSER. Select the entry and press [F8] to execute the
application or alternatively do a right mouse click and select Test.

6
If a Servi ce cannot be started

It may happen that you run into an error if youve never called up this application before:

The solution is pretty simple (and applies in principle to any Web Dynpro Application). Go to TA:SI CF and
activate the respective Service. Which one is displayed as part of the URL, here:
SAP/ BC/ WEBDYNPRO/ SAP/ FPM_CFG_HI ERARCHY_BROWSER

Go to TA:SICG and just hit Execute or [F8]

Expand the tree as displayed in the error message / URL, starting with def aul t _host
def aul t _host
sap
bc
webdynpr o
sap
f pm_cf g_hi er ar chy_br owser

Do a right mouse-click on fpm_cfg_hierarchy_browser and select Activate Service

7

In the following pop-up, select Yes

Retry to start the Web Dynpro Application from TA:SE80, it will now launch.

8
Since this is a Web Dynpro application, a new browser window opens up. Here, use the F4-help on field
Application Configuration, insert the Application ID retrieved in TA:PFCG (i.e. LO_OI F_MAI N_APP), and click
Start Search.

As a result, we see that theres only one Application Configuration existing for LO_OI F_MAI N_APP:
LO_OI F_SDOC_APPL. Select this line and choose OK

9
The configuration name is transferred to the initial window and we click Continue

Copy the application

The Application Hierarchy Browser allows us not only to analyze the structure of an FPM-based application,
but to copy the configuration hierarchy, too. The 'Deep-Copy Mode' gives you two additional columns; the
'Copy' checkbox column allows you to determine whether to copy a configuration or not, and the 'Target
Configuration ID' allows you to enter a name for the copied configuration.

Next, change to Deep-Copy Mode and click the Expand All button to access the complete structure

10
Click on the Change Affixes button and enter the Prefix Z, and delete any existing Suffix. With this, all the
configurations we copy will be created in the Z namespace.

For this example we will only copy the configurations we want to adapt and keep the original configurations
for those we will not change. This is a good idea if you are sure that you will never adapt the other parts. If
you think that you will adapt the others in the future too, it is easier to copy the configurations now rather than
later.
For now, only select to copy the Application Configuration, the Object Instance Floorplan, and the parts from
the Main View UIBBs as shown in the screenshot. Basically, we focus on the LO_OI F_FORM_PARTY_HEAD
where the Business Partner is displayed. Be sure to scroll down and de-select all the other Copy
checkboxes!

11
Finally, we start the copy process with clicking on the button.
When the system asks you for a transport request, you can just select the Local Object button

After the copy process finishes, you should receive the following message:

After this, you will come back to the hierarchy, but now you will have links in the 'Target Configuration ID'
column which will navigate you to the editors for these configurations.

Try to keep this window open for the rest of this exercise, as we will use it to launch the different
configuration editors (In case you mistakenly closed this window, you can re-launch it by starting Web
Dynpro application FPM_CFG_HI ERARCHY_BROWSER again and enter the name of the copied application
configuration on the initial screen (in the example this is Z_LO_OI F_SDOC_APPL)).

Starting the Application

Firstly, we will start the copied application. Within the application hierarchy browser, click the link for the
copied application configuration (which is in the first line).

Another window will open, displaying the copied application configuration. In the toolbar there is a 'Test'
button pressing it will launch the application. It should look exactly like the original one.

12
Enhance the applicati on

Lets start with enhancing the previously mentioned part of the screen. Therefore, we click on the Target
Configuration ID Z_LO_OI F_FORM_PARTY_HEAD to directly alter this Component Configuration in the
respective editor.

The editor window: apparently, a large screen is beneficial for working with this tool

First step is to enter change mode by pressing the button.

Select the whole group by selecting the topmost line

13
Then, add an Element of type Melting Group

Move this element up in the hierarchy with the respective button until it is located below Postal
Code/City. Then, drag and drop the fields COUNTRY (Country Key) and COUNTRY_T (the description) from
the fields list on the left-hand side into the newly created Melting Group. If the fields list isnt accessible, click
on Navigation & Repositories.
The result should look like this:

Make sure that the line with the element COUNTRY_T is selected

and change the Display Type from Input Field to Text View

Heres what you should see in the preview section:

Save your changes and close the editor window.

14
Testing the enhanced application

Back in the Application Hierarchy Browser window start the application once more with clicking on the
Hyperlink for Z_LO_OI F_SDOC_APPL and choose the Test button in the Application Configuration window.
Enter the same data as in the first run

100000
OR
1000
10
10

In the screen Standard Order: New, in the tab Main View, select the sub tab Business Partner and choose a
Partner Function, e.g. Payer

You see that the additional fields are displayed and the values are transferred from the database tables

Youre done!

15
SIMPLIFYING THE LAYOUT OF AN APPLICATION

In the next steps we will simplify the layout of this application through rearranging of fields and deleting
unused parts. Heres for reference a screenshot of the original Lean Order application

And heres the result wed like to achieve

16
Again, we use the Application Hierarchy Browser to access the original Application Configuration
LO_OI F_SDOC_APPL of application LO_OI F_MAI N_APP.

We change to Deep-Copy Mode and click on Change Affixes. We like our copied components to reside in
the Z namespace and add QO (for Quick Order) as Suffix. Since we dont know yet which components we
have to change, we dont make any restrictions but rather copy all the components.
Finally start the Deep-Copy mode.

17
Choose a package or select Local Object.

Once the copy process is finished we receive a lot of hyperlinks pointing to the newly created configurations.
Leave this window open for further access.

As a first step we change the main configuration with clicking on Z_LO_OI F_SDOC_QO, the 2
nd
entry from
top.

Select Edit mode

Lets start with deleting the unused tab strips. Therefore, multi-select (with shift key pressed) all Main Views
except the Main View Main View. Maybe its a good idea to maximize the window for accessing all the
objects.

18
Confirm the warning popup.

Change the name of the Main View to Dat a Ent r y. Admittedly, this step is somehow obsolete because
this Main View label will not be displayed. The reason is that if only one Main View is available, there will be
no tab strips.

your work

At any time (after you have saved your changes) you can choose Additional Functions Test to test the
application

:

19
Lets move on with changing the way the header data is displayed. Once you move the mouse cursor over
e.g. the UIBBs, the editable areas are highlighted with a deeper blue color and a wrench symbol appears in
the upper right corner to indicate that this region is editable. Edit the Tabbed UIBB
Z_LO_OI F_HEAD_TAB_QO.

In principle, wed like to delete all the tabs. Unfortunately, this isnt possible here unless wed make some
deeper going changes like exchanging the underlying Tabbed UIBB with one of different type. Since wed
like to keep things simple, we delete all tabs except the tab Texts and later on just replace the texts with the
item details. Again, use the shift key for a multi-select and delete according to the screenshot.

Confirm the warning popup.

20
your work

Lets alter the Form UIBB to re-arrange the header fields. Click as shown:

We only want internal numbering, not external and thus can delete the input field for the Sales Document
Number:

Change the Display Type of field Sales Document Type from
Input Field to Text View

Then we want to group the two fields PO Number and PO date and therefore have to add a so-called Melting
Group. For doing so a prerequisite is to select the topmost hierarchy level and afterwards add an Element of
type Melting Group

Select and add

The new melting group is added at the bottom of the elements list and we have to move it upwards to the
right position.

21
Press the Up button many times until the melting group is located above the element BSTKD (the PO
number).

Next, drag and drop the fields BSTKD and BSTDK below the new Melting Group. Drop the element once a
black horizontal line is visible.

The result should look like this:

22
Next step is to drag the field VDATU (the requested delivery date) to the Melting Group with the plant.

Then we want to group Oder Reason and Delivery Block. As already done, we have to select the topmost
element, add a Melting Group and move it upwards with the Up button. Finally drag fields AUGRU (Order
Reason) and LI FSK (Delivery Block) to this Melting Group-

For the repositioning of complete lines, select the Melting Group with the date and plant fields, and change
the row from 7 to 5.

Change the row for the Melting Group with Order Reason and Delivery Block to 6.

Finally delete the fields Valid From and Valid To

For the group itself, change the title to Header data entry area

23
So your result should look like this, clean and tidy:

your work

Use the breadcrumb navigation to go back

Select the line with the UIBB W_TEXTS and add a new UIBB of type List Component.

Select the Component FPM_LI ST_UI BB and the Configuration Z_LO_OI F_LI ST_I TEM_QO

This represents the Item Overview which originally was located in the lower left part of the application
window and will now be relocated into the tab area.

24
Now we can delete the UIBB with the texts

Select the Element Tab: Texts and change the Tab Name to I t emdat a ent r y ar ea.

Save your work.
In the preview area click on the wrench symbol or press alternatively the button

Perform the following steps:

Do a multi-select with pressed CTRL (Strg) Key and delete the following Elements:
POSNR
ZMENG
ZI EME
LSSTA_I ND
ABGRU_I ND and
PSTYV

25

Change the header and the sequence how the columns are displayed as shown:

Of course can the end-user later on influence the width of each table row individually but for now you can
play around a bit with the attribute of UI Element Width. E.g. assign the following values:

MABNR 60
KWMENG 40
VRKME 40
NETWR_R 100
WAEK 40
ARKTX 200

26

Last actions to perform are the deletion of the Update Prices functionality and delete the Other Functions.
So, select the tab Toolbar Schema and delete as shown.

your work

Again use the breadcrumb navigation to go back two levels.

Now we can delete the complete Tabbed UIBB with the item data since we already included the most
relevant part the Item Overview in the tab on the right-hand side.

27
Lets clean up the button bar and delete two entries. Select the tab Toolbar Schema and set the Visibility of
the two buttons shown in the screenshot to Is Not Visible.

Now youve finished the adjustments for this application

your work a last time and test the application.

After you passed the initial screen, the result should be a much leaner Sales UI:

28
One last tip: if you set (in TA:SU3) the user parameter FPM_CONFI G_EXPERT to X, you will have access to
three additional buttons in the header area of a FPM based application.

The buttons look like this: and access
Configure Page
Show Configurable Areas
Application Hierarchy

Example:

Of course the appropriate authorizations are a prerequisite!

29
FPM Workbench

In newer releases, theres a really helpful transaction combining access to many Floorplan Manager tools,
TA:FPM_WB, the Floorplan Manager Workbench:

2012 SAP AG. All rights reserved.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP
BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP
products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of SAP AG in Germany
and other countries.
Business Objects and the Business Objects logo, BusinessObjects,
Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and
other Business Objects products and services mentioned herein as
well as their respective logos are trademarks or registered trademarks
of Business Objects Software Ltd. Business Objects is an SAP
company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL
Anywhere, and other Sybase products and services mentioned herein
as well as their respective logos are trademarks or registered
trademarks of Sybase Inc. Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360, and B2B 360 Services are
registered trademarks of Crossgate AG in Germany and other
countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of
their respective companies. Data contained in this document serves
informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials
are provided by SAP AG and its affiliated companies ("SAP Group")
for informational purposes only, without representation or warranty of
any kind, and SAP Group shall not be liable for errors or omissions
with respect to the materials. The only warranties for SAP Group
products and services are those that are set forth in the express
warranty statements accompanying such products and services, if
any. Nothing herein should be construed as constituting an additional
warranty.

w w w .sap.c om

Working With FPM&WDA

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Working With FPM&WDA

Загружено:

Авторское право:

Доступные форматы

Enhanci ng an exi sti ng Web Dynpro Appl i cati on

wi th the Fl oorpl an Manager

Вам также может понравиться

Working With FPM&amp;WDA

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Working With FPM&amp;WDA

Загружено:

Авторское право:

Доступные форматы

Enhanci ng an exi sti ng Web Dynpro Appl i cati on

wi th the Fl oorpl an Manager

Вам также может понравиться

Working With FPM&WDA

Working With FPM&WDA