Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member193369
Active Participant

WebDynpro and FPM are designed for the creation of desktop applications. Nevertheless it was always technically possible to run FPM based applications on a tablet or even on a smartphone. But as there are a lot of limitations this wasn't supported by SAP. This has changed now. With note 1853087 SAP offers "conditional" support for running WebDynpro/FPM in Safari on iPad.

In this blog I want to explain a new feature of FPM which might help you in running existing applications on a mobile device. It is available with Netweaver 7.03/7.31 SP9 (+ note 1893651) and with Netweaver 7.40 SP4.
Besides the usage of "touch" instead of keyboard and mouse, the main difference between a mobile device and a desktop is the much smaller screen space. Therefore normally you want to have simpler screens on the device - there should be only the fields available which are really needed, it might be better to split the content of one crowded screen into several screens which much less content, ...
This is all possible, because in FPM the UI is mainly defined by configuration. Such adjustments to the UI can be done easily via configuration. In the document How to Create, Enhance, and Adapt Floorplan Manager Applications on SAP NetWeaver 7.31 we give an introduction to the multiple methods available for adaptation of applications.
But with all these options one issue remains:
If you adapt your application to the needs of an iPad user the desktop user has to live with the reduced functional scope configured for the tablet as well. Or you create a copy of your application and adapt the copy to the iPad's needs. Then you have to maintain 2 applications and the user has to launch separate applications on the iPad and on his desktop, ...
Luckily there is a solution for this: Using Context-Based Adaptations (CBA) combined with device detection. This means that you only have to maintain a separate delta configuration for the tablet where only the differences are stored compared to the desktop configuration. FPM automatically detects the device type the application is running on and automatically applies the delta or not. This way you have to maintain only one application. The user always uses the same application but on the mobile device he sees the leaner UI.
As this technique is modification-free there is no problem to adapt SAP delivered applications as well.

Step-by-Step Description

In the rest of this blog I will show you with a small example how this works. We will use an existing SAP delivered application and simplify it, so that it can be used on a mobile device. The application we are using is FPM_DEMO_PLAYER. This is a quite stupid application as it only shows 2 lists, one with famous football players and one with famous tennis players. On selecting an entry in the list a form with details of the selected player is displayed.

0. Creating an Adaptation Schema

This preparatory step is only necessary if you are on Netweaver 7.03/7.31 SP9 - else you can skip it and use the SAP delivered scheme FPM_DEVICE.
Context Based Adaptations need an adaptation scheme, which defines based on which dimensions (characteristics) the application shall be adapted. For our purpose we only need one dimension - the device type (Desktop, Tablet or Phone).
The adaptation scheme is defined via view cluster maintenance:
  1. Call Transaction SM34
  2. Enter FPM_VC_ADAPT_SCHEMA as View Cluster and press 'Maintain'
  3. Add a new Schemata entry (name is arbitrary e.g. ZDEVICE)
  4. Mark the new entry and select in and then select Dimensions in the left-Hand tree
  5. Add 1 Dimension (Name DEVICE, Index 1 and Data element FPM_DEVICE_TYPE)
  6. Don't forget to save everything

1. Enable CBA

The first thing to do is to convert the original desktop application in to an adaptable one, where we can create separate flavors for the different device types.
  1. Call up the FPM Workbench via Transaction FPM_WB. When launched from SAPGui the FPM Workbench will open up in a stand-alone browser  window.
  2. Click on the Link Enable FPM Applications for Context-Based Adaptations in the section Context Based Adaptations.
  3. This will bring up the CBA Enabler. On the first step you have to enter the application configuration name of the application you want to convert (FPM_DEMO_PLAYER), the adaptation schema you want to use (use the one created in Step 0 or if skipped use FPM_DEVICE) and 2 names for 2 to be created objects (the adapted application and the adapted application configuration) . These names are arbitrary, however I recommend to use the same for both objects e.g. ZDEMO_PLAYER. Then press Next.
  4. On the 2nd step of the CBA Enabler you have the option to assign a package or a transport request. You can simply press Save without changing any data here. Now the application is prepared for being adapted and you see a very simple screen with 2 links.

Before adapting our application let me explain what has happened after pressing Save:

We didn't really convert the existing application FPM_DEMO_PLAYER. Instead we wrapped the existing application into a new one (ZDEMO_PLAYER). This new one embeds the original functionality (this is no copy it's still the original application) and adds the necessary adaptation capabilities. So if you would start now the new application (via the link Execute Application) it would still look the same as before.

Now let's start the Configuration Editor (by pressing the link Launch Configuration Editor) to make the adaptations for the iPad.

2. Adapting the UI

After pressing Launch Configuration Editor you will be directly brought to the FPM configuration editor ("FLUID"). In case you closed the CBA enabler you can launch it via SE80. Go to your local objects and select the new FPM application configuration ZDEMO_PLAYER there and then press Start Configurator or F7. The Configurator will start in the browser. Enter in display mode and navigate to the floorplan configuration by pressing the Link FPM_DEMO_PLAYER_OIF.

In the toolbar you see 3 icon buttons allowing to show additional editor views.

Press the left one to open up the adaptation panel. The Configuration Editor should look now more or less like this:

To create a new adaptation for the iPad press the Add Button in the header of the adaptation panel. You will get now a popup. There you should uncheck the Checkbox Applies to all values, enter TABLET as Device Type and Z as Namespace.

After pressing OK the system creates an adaptation specific for tablets for you. You can now adjust the configuration using the whole set of functionality the FPM configuration editor offers. Feel free to do any changes you think suitable.

In the end the application might look like this on the tablet:

What did I do to get this result:

I removed the tennis player mainview completely, then I created a new mainview for the Detail UIBB and moved the form UIBB there.

I removed the Edit and Check button from the toolbar.

To remove the list  and form title I created additional adaptations for the list configuration FPM_DEMO_PLAYER_LIST_FOOTBALL and the form configuration FPM_DEMO_PLAYER_FORM_FOOTBALL. This works the same way as for the floorplan configuration.

All these changes were done completely within the FPM configuration editor, without the need to modify any SAP delivered object. And you will only see these changes when running the application on a tablet. If you launch it from your desktop PC you will still get the unchanged application.

Summary

WebDynpro and FPM weren't designed for use on mobile devices and if you want to have apps with optimal mobile user experience you should not use FPM to create them. Nevertheless for existing applications this approach offers a way to use them  on a mobile device as well. There are several advantages:

  • The desktop application isn't touched at all
  • The adaptation for mobile only consists of the changes to the original application. So bug-fixes or functional enhancements will still be applied to the "mobile application" as well
  • Although you have a rather different UI the application is still the same and the business logic isn't changed at all
  • The effort for such adaptations is low

5 Comments