Skip to content

ImageCollection

Image Collection is a container that manages and displays a set of images with titles in a grid-like arrangement. It can be configured to have different layouts, e.g. HorizontalFit, HorizontalFlow, or Vertical.

ImageCollection Properties

Property Type Required Default
DataSubscriptions DataSubscriptions No
EmptySection EmptySection No
Footer Footer No
Header Header No
ImageCell ImageCell No
ImageCells object[] No
Layout Layout No
Separators Separator No
Target LinkQueryFunctionTarget No
Visible boolean No true
_Name string No
_Type const Yes

DataSubscriptions

Array of data change events to subscribe to.


EmptySection

A section that will be displayed when the list is empty, this only applies if you are using Target binding. Allows you to show custom label when the list is empty.


Footer bar to be displayed below this control's content section.


Header bar to be displayed above this control's content section.


ImageCell

Image cell definition to be used as template definition for the Target binding. Can't co-exist with ImageCells.


ImageCells

An array of image cells for a static Image Collections. Can't co-exist with ImageCell.

  • type: object[]

All items must be of the type: object with following properties:

Property Type Required
ImageCell No

ImageCell


Layout

The layout of images.


Separators

To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.


Target

Definition of the target binding to dynamically populate the collection. You can also set this to binding/rule to return an array of data items.

Note: If this is set to binding/rule, you must return an array of data items, you can't return Target definition.


Visible

Set the visibility of this control.

  • type: boolean
  • default: true

_Name

  • type: string

_Type

  • type: const

The value of this property must be:

"Section.Type.ImageCollection"

Examples

{
  "_Type": "Page",
  "_Name": "StaticImageCollectionPage",
  "Caption": "Static Image Collection (Facets)",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.ImageCollection",
          "ImageCells": [
            {
              "ImageCell": {
                "Title": "Workorders",
                "Subtitle": "Subtitle",
                "Attribute": "Attribute",
                "Image": "/MDKDevApp/Images/workorder.png",
                "ImageIsCircular": true,
                "OnPress": "/MDKDevApp/Actions/Messages/Message1.action",
                "Visible": true
              }
            },
            {
              "ImageCell": {
                "Title": "Hidden Image",
                "Subtitle": "Subtitle",
                "Attribute": "Attribute",
                "Image": "/MDKDevApp/Images/workorder.png",
                "ImageIsCircular": true,
                "OnPress": "/MDKDevApp/Actions/Messages/Message.action",
                "Visible": false
              }
            },
            {
              "ImageCell": {
                "Title": "Documents",
                "Subtitle": "Subtitle",
                "Attribute": "Attribute",
                "Image": "/MDKDevApp/Images/seam.png",
                "ImageIsCircular": true,
                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action"
              }
            },
            {
              "ImageCell": {
                "Title": "Jobs",
                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action"
              }
            },
            {
              "ImageCell": {
                "Title": "Assets",
                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action"
              }
            },
            {
              "ImageCell": {
                "Title": "Workorders",
                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action"
              }
            },
            {
              "ImageCell": {
                "Title": "Documents",
                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action"
              }
            },
            {
              "ImageCell": {
                "Title": "Jobs",
                "OnPress": "/MDKDevApp/Actions/Messages/Message2.action"
              }
            }
          ],
          "Layout": {
            "LayoutType": "HorizontalScroll"
          }
        },
        {
          "Header": {
            "Caption": "Top Operation"
          },
          "Footer": {
            "Caption": "See All",
            "AccessoryType": "disclosureIndicator",
            "FooterStyle": "attribute",
            "AttributeLabel": "8",
            "OnPress": "/MDKDevApp/Actions/Messages/Message3.action"
          },
          "ImageCell": {
            "Title": "Workorders",
            "Subtitle": "Subtitle",
            "Attribute": "Attribute",
            "Image": "sap-icon://favorite",
            "ImageIsCircular": true,
            "OnPress": "/MDKDevApp/Actions/Messages/Message1.action",
            "Styles": {
              "Image": "font-icon-class"
            }
          },
          "Layout": {
            "LayoutType": "HorizontalFit"
          },
          "_Type": "Section.Type.ImageCollection"
        }
      ]
    }
  ]
}

Style Classes Definition

.font-icon-class {
  font-size: 8;
  color: red;
}