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.

type: DataSubscriptions

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.

type: EmptySection

Footer¶

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

type: Footer

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

type: Header

ImageCell¶

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

type: ImageCell

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¶

type: ImageCell

Layout¶

The layout of images.

type: Layout

Separators¶

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

type: Separator

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.

type: LinkQueryFunctionTarget

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;
  background-color: grey;
}

ImageCollection¶