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 No "Center"
ContentMode enum No "ScaleAspectFit"
DataSubscriptions DataSubscriptions No
Footer Footer No
Header Header No
Height integer No
Image Image No
OnPress ActionOrRule No
PaddingBottom integer No
PaddingLeft integer No
PaddingRight integer No
PaddingTop integer No
Separators Separators No
Styles object No
Visible boolean No true
Width integer No
_Name string No
_Type const Yes

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 one of the known values listed 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 one of the known values listed 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

Separators

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


Styles

A style to be applied to the Image section.

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

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:

"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;
}