** Team FPM ** - Maximize Mode in the OVP floorplan

[J_R]

Maximize Mode in the OVP floorplan

Introduction

This blog describes the maximize and minimize functionality for UIBBs in the OVP floorplan, a pretty cool feature which is available as full-fledged version as of NW 7.40, SAP_UI SP08. With this functionality the end user is enabled to enlarge the display of a UIBB so that only this UIBB is visualized on the page and all other UIBBs are no longer displayed. The maximized UIBB may display its content in an enlarged manner. The end user can switch back to the standard display. For UIBBs which are based on a fixed height the maximize function may not make sense.

The main purpose of the maximize function is to let the user focus on a single UIBB if the available space on the page is not sufficient for proper visualization.

   Figure 1: OVP in standard display mode

   Figure 2: OVP in maximized mode

Please note that maximizing Tabbed and Composite UIBBs itself is not be supported as those 'layouting' UIBBs cannot properly enlarge their content. Of course, it is possible to enlarge UIBBs that are inside of a Tabbed or Composite UIBB.

Enabling the maximize/ minimize functionality in the configuration

In order to make use of the maximize mode there are just a few clicks required in the corresponding OVP component configuration. We will explain the required steps in the following by means of a local test application that does not use the maximized mode at all so far, as shown in the following screenshot.

Step 1:

Press the button 'Configure Page' in the page toolbar of the OVP.

Hint: If you don't have this button, you can promote yourself to an 'FPM Configuration Expert' by setting the user parameter FPM_CONFIG_EXPERT = X. The, you can find nice technical buttons in any FPM UI. With the first one, you can directly navigate to the floorplan configuration. With the second one, you get all configurable areas (FPM UIBBs) overlaid. By clicking in such an overlay area you can directly navigate to the respective UIBB configuration. With the third button you can navigate to the Application Hierarchy Browser.

Step 2:

In the configuration editor, open the panel 'Toolbar Schema' and select the UIBB toolbar to which you want to add the 'Maximize' button. In our case, this is the toolbar of the UIBB 'Map'. Press the button 'Toolbar Element'.

Step 3:

A dialog box will open. Just click on the icon for the 'Maximize' button.

Step 4:

Press the 'Save' button in order to save the configuration. That's it!

Step 5:

Restart the application. You will see a 'Maximize' button in the toolbar of UIBB 'Map'.

Step 6:

Now, click on the 'Maximize' button... and you will see a maximized map. Wow, that was easy!

Just note that the 'Maximize' button has now turned automatically into a 'Minimize' button. Moreover, the 'Page Master' toggle button as well as the 'Personalize' button have been disabled in order to avoid inconsistent UI states.

Step 7:

In the configuration editor, you can now add 'Maximize' buttons to all other UIBBs on the screen. We will not describe it here in detail again.

However, for stacked panels there is an additional special feature in the OVP regarding the maximized mode. In our test application, we have several Chart UIBBs within a stacked panel. These are the UIBBs 'Combination', 'Column', 'Pie', 'Boxplot',... and so on. It would be cool if it was possible to maximize the expanded UIBB of a stacked panel not as single UIBB but together with its stacked panel, keeping the full functionality of the stacked panel. And here is how you can do it...

Open the configuration editor again, go to the UIBB toolbars of all those UIBBs that should be maximized together with their stacked panel, add the 'Maximize' buttons as already described above, but add an additional event parameter FPM_MAXIMIZE_STACK = ‘X’ in the button attributes as shown exemplary for the toolbar of UIBB 'Combination' below. Save the configuration.

Step 8:

Restart the application again. You will see the new 'Maxmize' buttons that you have configured. Press the 'Maximize' button of the UIBB 'Combination'.

Step 9:

The UIBB 'Combination' has been maximized together with its stacked panel.

Just note that you can open any other UIBB of the stacked panel, still staying in maximized mode. When minimizing again, the currently opened UIBB of the stacked panel will be kept open.

Maximizing UIBBs without panel and UIBBs inside Tabbed or Composite UIBBs

In the case that there is no panel around a UIBB (typically the UIBBs on Initial Pages or Edit Pages of the OVP do not have panels) the 'Maximize' button for such a UIBB cannot be placed into a panel header within the OVP. Therefore, it is also possible to add a 'Maximize' button to the UIBB's internal toolbar. For this, you just have to mark the checkbox 'Maximize Button' in the General Settings of the respective UIBB configuration, as shown for a Visual Business UIBB in the following screenshot.

This functionality is available for the FPM UIBBs List ATS, Tree, Chart, and Visual Business. The 'Maximize' button in the UIBB toolbar will automatically be fully controlled by the UIBB logic. The application feeder class does not have to take care about it at all. By enabling the 'Maximize' button in the UIBB toolbar it is also possible to maximize UIBBs that are positioned inside a 'layout' UIBB, such as the Tabbed or the Composite UIBB.

It should be clear, of course, that it doesn't make sense to have both, a 'Maximize' button in the UIBB panel header (if there is one) and another 'Maximize' button in the internal UIBB toolbar.

Technical Concept

General Principles

Maximizing and minimizing a UIBB is triggered by a corresponding ‘Maximize’ and ‘Minimize’ button in the panel toolbar. A dedicated FPM event is assigned to the respective button. The FPM event for the ‘Maximize’ button has the ID ‘FPM_MAXIMIZE_UIBB’; that for the ‘Minimize’ button has the ID ‘FPM_MINIMIZE_UIBB’.

By default, only the single UIBB for which the ‘Maximize’ button is pressed is maximized. However, if the corresponding FPM event is furnished with the event parameter FPM_MAXIMIZE_STACK = ‘X’, then the entire stacked panel of the UIBB is maximized.

Integration into the FPM event loop

After the maximize event has been successfully processed only the maximized UIBB is visible. The event loop switches logically to the single maximized UIBB. The currently maximized UIBB can be retrieved via interface method IF_FPM->GET_MAXIMIZED_UIBB.

In case a stacked panel is maximized, the currently expanded UIBB of the stacked panel stays expanded and is exposed via interface method IF_FPM->GET_MAXIMIZED_UIBB. However, the event loop switches logically to the set of UIBBs contained in the maximized stacked panel.

In maximized mode, the FPM framework replaces the ‘Maximize’ button automatically with a ‘Minimize’ button, triggering the minimize event which switches back to the original display and the original set of UIBBs participating in the event loop (unless there are manipulations done by an Application Configuration Controller).

Behavior of UIBBs in maximized mode

In maximized mode the UIBBs may either display more or enlarged content. This is meaningful in the case of "expandable" UIBBs, such as the List UIBB, Tree UIBB, Chart UIBB, Visual Business UIBB, and so on. But it wouldn't make sense for UIBBs such as the Form UIBB. In maximized mode, the FPM Chart and Visual Business UIBB enlarge their height from the configured height to a 100% display; the FPM List and Tree UIBB switch from the configured height mode to the variable height mode (“Fit to Height of Surrounding Container”).

If freestyle UIBBs shall be maximized they have to take care of appropriate behavior themselves. There will be no interface pattern which allows exposing whether a UIBB can be appropriately maximized or not, i.e. there will be no check in the configuration editor.

Behavior of the OVP in maximized mode

The OVP runtime stores the maximized UIBB by page. As a consequence, navigation from a maximized UIBB to a different page keeps the UIBB maximized when returning to the original page.

If the ‘Maximize’ button belongs to an OVP panel toolbar, the OVP runtime automatically replaces the ‘Maximize’ button with a ‘Minimize’ button and the corresponding minimize event.

If the ‘Maximize’ button belongs to a GUIBB internal toolbar, the respective GUIBB runtime replaces the ‘Maximize’ button with a ‘Minimize’ button and the corresponding minimize event.

The OVP runtime disables the personalization and the page master toggle button in maximized mode in order to prevent an inconsistent UI state.