Flexible User Interface Designer (FLUID)

The flexible user interface designer (FLUID) is the browser-based editor for FPM application configurations, and their individual components. It replaces all previous FPM configuration editors.

You use FLUID to edit and enhance FPM applications, and their user interfaces, and to fit them to your business needs.

You can edit the following component configurations within an application using FLUID:

• Floorplan (Structure)

  Floorplans provide the structure of your application. Depending on the floorplan instance, you can add extra pages, steps, and views to your application.

• UIBB within the floorplan (Content)

  UIBBs provide the content of the user interface in your application. You can attach your UIBBs to the relevant pages, steps, views, and define how the UI looks at each stage of the application.

Amongst other things, you can also configure Quick Help for your application, change the global settings for your application, set variant parameters, and configure toolbars with predefined buttons and navigation menus, and attach events to these elements.

You launch FLUID in administrator (Customizing) mode or in expert (Developer) mode, depending on the types of changes you want to carry out, and for whom the changes are applicable.

For information about the individual fields in FLUID, see the context-menu option (right mouse-click) More Field Help in the system.

The following figure illustrates the layout of FLUID. However, as it can be personalized, it may not appear exactly as it does here:

The toolbar in this panel is also component-dependent. It provides you with access to a number of actions for both the floorplan and GUIBB component. Menu options for the floorplan components include Application Controller Settings, Event Action Types and Message Mapper Settings. Menu options for the GUIBB components include settings for Final Flags, Feeder Class, Drag-and-Drop as well as settings for sorting, grouping and aggregation.

Illustrates how the application looks at runtime. It displays the interface of the application as a set of configurable components (the UIBBs), which you can individually select to edit their attributes. You can drag-and-drop the individual UIBBs around this panel. You can also access the attributes of toolbar elements from this panel, and move elements around in the toolbar.

The way objects are displayed in this panel depends on which level of your application (floorplan or UIBB) you are. From the floorplan level, you can navigate directly into the individual UIBBs (to find out if a UIBB is configurable, move the mouse over the UIBB box; the box changes color, and an icon appears in the top right corner of the box). Choose the icon to navigate directly to the UIBB component. If the UIBB component is actually an FPM GUIBB component, you remain inside FLUID; otherwise, you are transferred to the standard Web Dynpro editor.

On both floorplan and UIBB levels, a context menu allows you, for example, to navigate to and configure the different components in your application, add or delete UIBBs, and add new sections and toolbar elements.

This panel also contains the Show/Hide UIBB Preview button. This allows you to change how the UIBB is displayed in the Preview panel; UIBBs can be displayed as abstract boxes with their most important technical details, or they can be displayed as they would appear at runtime. Only UIBBs that have implemented the interface IF_FPM_CFG_UIBB_PREVIEW can be displayed as they would appear at runtime. This feature is available for all floorplan components (except the OVP floorplan), and the tabbed component.

Outlines the structure of the individual GUIBB or floorplan configuration, and displays its UI elements in a tabular form. You can move elements within the table by using the Up and Down buttons, or by dragging them to a new location. You can select elements in the table, and edit their attributes in the Attributes panel.

Allows you to move between, and select, the pages you would like to edit in your application, for example, the initial screen, the main screen of an application variant, an edit page, or a dialog box. Here, you can also add new, delete, and copy pages in your application. The type of pages available in the Navigation panel is floorplan-dependent.

This panel is available only for the floorplan configurations.

Provides you with a list of repository items that can be dragged to the object schema, and Preview panels. The list of repository items is component-dependent, and includes, for example, form fields, list columns, search criteria and search result list items, and UIBBs for the floorplan, composite and tabbed components. You can search for specific component configurations by entering values in the Component, View or Configuration fields, or you can display all component configurations for a specific type of UIBB.

This panel may also contain a Buttons section from which you can drag various toolbar elements to the object schema, Toolbar Schema, and the Preview panels.

Allows you to easily create adaptations of existing configurations based on different user contexts, for example, country or role. These adaptations are known as Context-Based Adaptations (CBA). CBA is covered in more detail in another section of this document.

Indicates the changes that have been made to a configuration, and on which level of the Web Dynpro ABAP configuration framework they have been made (for example, on the Customizing level, or on the configuration (developer) level). Comparing configurations is covered in more detail in another section of this document.

Displays the toolbar plan, and individual toolbar UI elements of your application. You can add additional elements to the toolbar (such as and buttons, button-choices and links), and edit their attributes in the Attributes panel. Note that the available toolbar elements vary according to the type of page you are working on. The position of some toolbar elements is determined by the FPM framework, and is unchangeable. Toolbars are covered in more detail in another section of this document.

Displays the individual wires (connections) between the UIBBs in a floorplan component. It is available only for the floorplan components, and the Composite UIBB component. It also displays the transaction handler class. It allows you to add and remove wires, and also gives you access to the Graphical Wire Editor; a tool for creating and editing wires within your application in a graphical, easy-to-understand way. Wires are discussed in more detail in the Sharing Data Between UIBBs section of this document.

Displays details of any quickviews that might be anchored to particular elements of a GUIBB. Hence, this panel is visible only for the GUIBB configurations, and not for floorplan configurations. Quickviews are covered in more detail in another section of this document.

Displays details of action menus and context menus that are used in the application. This panel allows you to configure existing menus, and to create and define new menus of both types. These menu types are covered in another section of this document.

For most floorplan and UIBB configurations, you can add items from the Repositories panel to the Preview and the object schema panels using drag-and-drop; you can remove them too by dropping them back on to the Repositories panel.