LightBox
Displays several image thumbnails. Clicking on each of them will open a LightBox.
Z2UI5_CL_SMPC_APP_059
Controls
sap.m
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_059- Source file
z2ui5_cl_smpc_app_059.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.LightBox- Demo kit sample
sap.m.sample.LightBox- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: lightbox, light, box, sap.m, image, thumbnails, opening, messagestrip, list, customlistitem, hbox, lightboxitem
Controls it builds
- sap.m.CustomListItem
- sap.m.HBox
- sap.m.Image
- sap.m.LightBox
- sap.m.LightBoxItem
- sap.m.List
- sap.m.MessageStrip
- sap.m.Text
- sap.m.Title
- sap.m.VBox
- sap.ui.core.mvc.View
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_059.clas.abap — 266 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords lightbox light box sap.m image thumbnails opening messagestrip list customlistitem hbox lightboxitem
" @summary Displays several image thumbnails. Clicking on each of them will open a LightBox.
CLASS z2ui5_cl_smpc_app_059 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_059 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_navigated( ).
view_display( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
" the six identical filler paragraphs share this literal; attribute whitespace is normalised to single spaces (see sidecar)
DATA(lorem) = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum lectus et tempus blandit. Sed porta ex quis tortor gravida, ut suscipit felis dignissim. Ut iaculis elit vel ligula scelerisque, et porttitor est pretium. ` &&
`Suspendisse purus dolor, fermentum in tortor eu, semper finibus velit. Proin vel lobortis leo, vel eleifend lorem. Etiam ac erat sollicitudin, condimentum magna ac, venenatis lacus. ` &&
`Pellentesque non mauris consectetur, tristique arcu id, aliquet tortor.`.
" original demokit sdk asset paths kept 1:1 - not served by abap2UI5 (see sidecar)
DATA(base) = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/`.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns` v = `sap.m`
)->tag( `MessageStrip`
)->a( n = `text` v = `Clicking on each of the images will open a LightBox, showing the real size of the image. Images will be scaled down if their size is bigger than the window size.`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `List`
)->ele( `CustomListItem`
)->ele( `HBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `Image`
)->a( n = `src` v = base && `HT-6100.jpg`
)->a( n = `decorative` v = `false`
)->a( n = `width` v = `170px`
)->a( n = `densityAware` v = `false`
)->ele( `detailBox`
)->ele( `LightBox`
)->tag( `LightBoxItem`
)->a( n = `imageSrc` v = base && `HT-6100-large.jpg`
)->a( n = `alt` v = `Beamer`
)->a( n = `title` v = `This is a beamer`
)->a( n = `subtitle` v = `This is beamer's description`
)->end(
)->end(
)->end(
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMarginBegin`
)->tag( `Title`
)->a( n = `text` v = `Beamer`
)->tag( `Text`
)->a( n = `text` v = lorem
)->end(
)->end(
)->end(
)->ele( `CustomListItem`
)->ele( `HBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `Image`
)->a( n = `src` v = base && `HT-6120.jpg`
)->a( n = `decorative` v = `false`
)->a( n = `width` v = `170px`
)->a( n = `densityAware` v = `false`
)->ele( `detailBox`
)->ele( `LightBox`
)->tag( `LightBoxItem`
)->a( n = `imageSrc` v = base && `HT-6120-large.jpg`
)->a( n = `alt` v = `USB`
)->a( n = `title` v = `This is a USB`
)->a( n = `subtitle` v = `This is USB's description`
)->end(
)->end(
)->end(
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMarginBegin`
)->tag( `Title`
)->a( n = `text` v = `USB`
)->tag( `Text`
)->a( n = `text` v = lorem
)->end(
)->end(
)->end(
)->ele( `CustomListItem`
)->ele( `HBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `Image`
)->a( n = `src` v = base && `HT-7777.jpg`
)->a( n = `decorative` v = `false`
)->a( n = `width` v = `170px`
)->a( n = `densityAware` v = `false`
)->ele( `detailBox`
)->ele( `LightBox`
)->tag( `LightBoxItem`
)->a( n = `imageSrc` v = base && `HT-7777-large.jpg`
)->a( n = `alt` v = `Speakers`
)->a( n = `title` v = `These are speakers`
)->a( n = `subtitle` v = `This is speakers' description`
)->end(
)->end(
)->end(
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMarginBegin`
)->tag( `Title`
)->a( n = `text` v = `Speakers`
)->tag( `Text`
)->a( n = `text` v = lorem
)->end(
)->end(
)->end(
)->ele( `CustomListItem`
)->ele( `HBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `Image`
)->a( n = `src` v = base && `nature/ALotOfElephants_small.jpg`
)->a( n = `decorative` v = `false`
)->a( n = `width` v = `170px`
)->a( n = `densityAware` v = `false`
)->ele( `detailBox`
)->ele( `LightBox`
)->tag( `LightBoxItem`
)->a( n = `imageSrc` v = base && `nature/ALotOfElephants.jpg`
)->a( n = `alt` v = `Nature image`
)->a( n = `title` v = `This is a sample image`
)->a( n = `subtitle` v = `This is a place for description`
)->end(
)->end(
)->end(
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMarginBegin`
)->tag( `Title`
)->a( n = `text` v = `Nature image`
)->tag( `Text`
)->a( n = `text` v = lorem
)->end(
)->end(
)->end(
)->ele( `CustomListItem`
)->ele( `HBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `Image`
)->a( n = `src` v = base && `nature/flatFish.jpg`
)->a( n = `decorative` v = `false`
)->a( n = `width` v = `170px`
)->a( n = `densityAware` v = `false`
)->ele( `detailBox`
)->ele( `LightBox`
)->tag( `LightBoxItem`
)->a( n = `imageSrc` v = base && `nature/flatFish.jpg`
)->a( n = `alt` v = `Nature image`
)->a( n = `title` v = `This is a sample image`
)->a( n = `subtitle` v = `This is a place for description`
)->end(
)->end(
)->end(
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMarginBegin`
)->tag( `Title`
)->a( n = `text` v = `Nature image`
)->tag( `Text`
)->a( n = `text` v = lorem
)->end(
)->end(
)->end(
)->ele( `CustomListItem`
)->ele( `HBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `Image`
)->a( n = `src` v = base && `nature/horses.jpg`
)->a( n = `decorative` v = `false`
)->a( n = `width` v = `170px`
)->a( n = `densityAware` v = `false`
)->ele( `detailBox`
)->ele( `LightBox`
)->tag( `LightBoxItem`
)->a( n = `imageSrc` v = base && `nature/horses.jpg`
)->a( n = `alt` v = `Nature image`
)->a( n = `title` v = `This is a sample image`
)->a( n = `subtitle` v = `This is a place for description`
)->end(
)->end(
)->end(
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMarginBegin`
)->tag( `Title`
)->a( n = `text` v = `Nature image`
)->tag( `Text`
)->a( n = `text` v = lorem
)->end(
)->end(
)->end(
)->ele( `CustomListItem`
)->ele( `HBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `Image`
)->a( n = `src` v = base && `nature/elephant.jpg`
)->a( n = `decorative` v = `false`
)->a( n = `width` v = `170px`
)->a( n = `densityAware` v = `false`
)->ele( `detailBox`
)->ele( `LightBox`
)->tag( `LightBoxItem`
)->a( n = `imageSrc` v = base && `nature/image_does_not_exist.jpg`
)->a( n = `alt` v = `Nature image`
)->a( n = `title` v = `This is a sample image`
)->a( n = `subtitle` v = `This is a place for description`
)->end(
)->end(
)->end(
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMarginBegin`
)->tag( `Title`
)->a( n = `text` v = `Unavailable image`
)->tag( `Text`
)->a( n = `text` v = `Shows an error when an image could not be loaded, or when it takes too much time to load it.`
)->end(
)->end(
)->end(
)->end( ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.More in sap.m
- Toolbar - Shrinkable items — Toolbar items can shrink/expand when the toolbar is resized. This behavior is enabled/dis…
- Tree - Basic — Tree displays data in hierarchical structure.
- Standalone Icon Tab Header — Icon Tab Header used standalone, outside of Icon Tab Bar.
- ImageContent — Shows ImageContent that can include an icon, a profile image, or a logo with a tooltip.
- Input List Item — Use the Input List Item on phones to build form like user interfaces.
- Label Properties — This sample shows the different behaviors of a label.
- Menu — This control is used to show a menu in both desktop and mobile.
- Menu Button — This control is used to open a menu in both desktop and mobile.
- Message Strip with enableFormattedText — A sample MessageStrip that shows status messages with additional formatting.
- News Content — This control is used to display the news content text and subheader in a tile.
- Numeric Content with Icon — Shows NumericContent including an icon.
- Message Popover - Message Handling — The message handling concept sample shows how you can connect an error inside the page (s…
On this page