working with fpm&wda

Enhancing an existing Web Dynpro Application with the Floorplan 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_INT_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_OIF_MAIN_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 http://.:/sap/bc/webdynpro/sap/lo_oif_main_app?TRTYP=H&TRVOG=0&BP_VERSION=15&sap-language=EN&WDCONFIGURATIONID=LO_OIF_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 application To get an overview of the applications structure, we have to launch the WDA FPM_CFG_HIERARCHY_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_HIERARCHY_BROWSER. Select the entry and press [F8] to execute the application or alternatively do a right mouse click and select Test.


6

If a Service 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:SICF and activate the respective Service. Which one is displayed as part of the URL, here: SAP/BC/WEBDYNPRO/SAP/FPM_CFG_HIERARCHY_BROWSER Go to TA:SICG and just hit Execute or [F8]

Expand the tree as displayed in the error message / URL, starting with default_host default_host sap bc webdynpro sap fpm_cfg_hierarchy_browser 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_OIF_MAIN_APP), and click Start Search.

As a result, we see that theres only one Application Configuration existing for LO_OIF_MAIN_APP: LO_OIF_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_OIF_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_HIERARCHY_BROWSER again and enter the name of the copied application configuration on the initial screen (in the example this is Z_LO_OIF_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 application Lets start with enhancing the previously mentioned part of the screen. Therefore, we click on the Target Configuration ID Z_LO_OIF_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_OIF_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_OIF_SDOC_APPL of application LO_OIF_MAIN_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_OIF_SDOC_QO, the 2nd 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 Data Entry. 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_OIF_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 LIFSK (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_LIST_UIBB and the Configuration Z_LO_OIF_LIST_ITEM_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 Item data entry area.

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: x POSNR x ZMENG x ZIEME x LSSTA_IND x ABGRU_IND and x 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: x MABNR 60 x KWMENG 40 x VRKME 40 x NETWR_R 100 x WAEK 40 x 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_CONFIG_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 x Configure Page x Show Configurable Areas x 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.

www.sap.com

working with fpm&wda

Documents