Skip to content

Image

Displays image according to defined configurations, e.g. width, height, alignment, and paddings.

Image Properties

Property Type Required Default
Alignment enum Optional "center"
ContentMode enum Optional "ScaleAspectFit"
DataSubscriptions DataSubscriptions Optional
Footer Footer Optional
Header Header Optional
Height integer Optional
Image Image Optional
OnPress ActionOrRule Optional
PaddingBottom integer Optional
PaddingLeft integer Optional
PaddingRight integer Optional
PaddingTop integer Optional
Styles object Optional
Visible boolean Optional true
Width integer Optional
_Name string Optional
_Type const Required

Alignment

Choose one of the options based on how you want to align the image.

  • type: enum
  • default: "center"

The value of this property must be equal to one of the known values below.

Alignment Known Values

Value Description
left
right
center

ContentMode

Content mode or scale type of the image view. Please refer to UIView.ContentMode (iOS), ImageView.ScaleType (Android), and CSS object-fit (Web) for more details.

  • type: enum
  • default: ScaleAspectFit

The value of this property must be equal to one of the known values below.

Value Description
ScaleToFill iOS, Android (FIT_XY), and Web (fill).
ScaleAspectFit iOS, Android (FIT_CENTER), and Web (contain).
ScaleAspectFill iOS, Android (CENTER_CROP), and Web (cover).
Redraw iOS only.
Center iOS, Android (CENTER), and Web (none).
Top iOS only.
Bottom iOS only.
Left iOS only.
Right iOS only.
TopLeft iOS only.
TopRight iOS only.
BottomLeft iOS only.
BottomRight iOS only.
CenterInside Android (CENTER_INSIDE) and Web (scale-down).
FitEnd Android only (FIT_END).
FitStart Android only (FIT_START).
Matrix Android only (MATRIX).

DataSubscriptions

Array of data change events to subscribe to.


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


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


Height

The width of the image in Device Independent Pixel. The DIP value will be converted to pixels of the platform (based on scale and density for iOS and Android respectively), while for Web, DIP value is same as pixels. If Height is not set and the ContentMode is able to scale, the image view size would be adjusted to the Width / screen width while preserving the aspect ratio of the image. If Height is not set and the ContentMode is not able to scale, the image view height would be based on the height of the image.

  • type: integer

Image

Image to be displayed within the section. Supports rendering of both locally saved images and images from Web (https only). PDF image is not supported on WebClient.


OnPress

Action/Rule to be triggered when the image is pressed.


PaddingBottom

Bottom padding for the section

  • type: integer

PaddingLeft

Left padding for the section

  • type: integer

PaddingRight

Right padding for the section

  • type: integer

PaddingTop

Top padding for the section

  • type: integer

Styles

A style to be applied to the Image section.

  • type: object with following properties.
Property Type Required Default
ImageBackgroundColor string Optional
BackgroundColor string Optional
Image string Optional

ImageBackgroundColor

The string value is a style class name for ImageBackgroundColor.

BackgroundColor

The string value is a style class name for BackgroundColor.

Image

The string value is a style class name for Image. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).


Visible

Set the visibility of this control.

  • type: boolean
  • default: true

Width

The height of the image in Device Independent Pixel. The DIP value will be converted to pixels of the platform (based on scale and density for iOS and Android respectively), while for Web, DIP value is same as pixels. If Width is not set, the layout would be adjusted based on the width of the screen.

  • type: integer

_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Section.Type.Image"

MDK Image ContentMode

MDK Image ContentMode Platforms
ScaleToFill iOS, Android (FIT_XY), Web (fill)
ScaleAspectFit (Default) iOS, Android (FIT_CENTER), Web (contain)
ScaleAspectFill iOS, Android (CENTER_CROP), Web (cover)
Redraw iOS only
Center iOS, Android (CENTER), Web (none)
Top iOS only
Bottom iOS only
Left iOS only
Right iOS only
TopLeft iOS only
TopRight iOS only
BottomLeft iOS only
BottomRight iOS only
CenterInside Android (CENTER_INSIDE), Web (scale-down)
FitEnd Android only (FIT_END)
FitStart Android only (FIT_START)
Matrix Android only (MATRIX)

Different Combinations of Image Section properties on iOS

Image Section - ScaleAspectFit

Image Section - Center

Different Combinations of Image Section properties on Android

Image Section - ScaleAspectFit

Image Section - Center

Different Combinations of Image Section properties on WebClient

Image Section - ScaleAspectFit

Image Section - Center

Examples

{
  "_Type": "Page",
  "_Name": "ImagePage",
  "Caption": "Image Page",
  "Controls": [{
    "_Type": "Control.Type.SectionedTable",
    "_Name": "SectionedTable",
    "Sections": [{
      "Header": {
        "Caption": "Image section with image in banner style"
      },
      "_Type": "Section.Type.Image",
      "Visible": true,
      "Image": "/MDKDevApp/Images/image.png",
      "ContentMode": "ScaleToFill",
      "PaddingTop": 42,
      "PaddingBottom": 42,
      "PaddingLeft": 64,
      "PaddingRight": 64,
      "OnPress": "/MDKDevApp/Actions/Messages/Message1.action",
      "Styles": {
        "ImageBackgroundColor": "imageBgColor",
        "BackgroundColor": "sectionBgColor"
      }
    },
    {
      "Header": {
        "Caption": "Image section with SAP icon"
      },
      "_Type": "Section.Type.Image",
      "Visible": true,
      "Image": "sap-icon://home",
      "Width": 100,
      "Height": 50,
      "Alignment": "right",
      "ContentMode": "center",
      "OnPress": "/MDKDevApp/Actions/Messages/Message1.action",
      "Styles": {
        "Image" : "font-icon-class"
      }
    }]
  }]
}

Style Classes Definition

/* Image - BackgroundColor */
.imageBgColor {
  background-color: #0000FF;
}

/* Section - BackgroundColor */
.sectionBgColor {
  background-color: #00FFFF;
}

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