Carousel GUIBB

This blog describes the Carousel GUIBB which is available within NW 7.40, SAP_UI SP 8.

UI5 provides a control where several visible sections can be specified. The navigation is done though the arrow buttons. The carousel can be displayed either vertical or horizontal.

Picture 1: Carousel UIBB

In the Carousel several pictures can be added and when clicking on the picture an FPM Event is raised so an additional UIBB can show the details to the selected picture.

Test Application

Application: FPMGB_TEST_OVP_CAROUSEL_UIBB

Application configuration: FPMGB_TEST_OVP_CAROUSEL_UIBB

Feederclass Carousel: CL_FPMGB_CAROUSEL_EPM_FEEDER

Feederclass Detail UIBB: CL_FPM_CAROUSEL_UIBB_FORM

Technical concept

Interface IF_FPM_GUIBB_CAROUSEL

If the application wants to have a carousel UIBB it has to implement the interface IF_FPM_GUIBB_CAROUSEL in a class.

The method GET_DATA needs to fill the table CT_CONTENT with the ID, the IMAGE which should be shown and the tooltip for the picture.

All other methods can have an empty implementation.

Integration into FPM event loop

When selecting a picture the event “FPM_CAROUSEL_SELECT” with the constant IF_FPM_GUIBB_CONSTANTS=>GC_GUIBB_CAROUSEL_ACTIONS-SELECT_IMAGE is raised.

The index and the id of the selected picture are added to this event. The constants are

GC_GUIBB_CAROUSEL_ACTION_PARAM-INDEX VALUE 'FPM_CAROUSEL_SELECTION_INDEX' and

GC_GUIBB_CAROUSEL_ACTION_PARAM-ID VALUE 'FPM_CAROUSEL_SELECTION_ID'.

The corresponding UIBB can react on this event e.g. in method GET_DATA and show in the example case the details for the device.

Configuration Carousel GUIBB

The configuration of the carousel is really simple. It has some general settings which need to be set.

Carousel orientation: if the pictures should be in horizontal or vertical order
The size of the pictures: Height and widths
Additional settings for a no data text it the standard one does not fit into the application