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
Separators	Separators	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.

type: DataSubscriptions

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

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.

type: Image

OnPress¶

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

type: ActionOrRule
Formatter and Binding are not supported

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.

type: Separators

Styles¶

A style to be applied to the Image section.

type: object with following properties.

Property	Type	Required
ImageBackgroundColor	string	Optional
BackgroundColor	string	Optional
Image	string	Optional

ImageBackgroundColor¶

The string value is a style class name for ImageBackgroundColor.

Background style class

BackgroundColor¶

The string value is a style class name for BackgroundColor.

Background style class

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).

Image style class

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

Image¶

Image Properties¶

Alignment¶

Alignment Known Values¶

ContentMode¶

DataSubscriptions¶

Footer¶

Header¶

Height¶

Image¶

OnPress¶

PaddingBottom¶

PaddingLeft¶

PaddingRight¶

PaddingTop¶

Separators¶

Styles¶

ImageBackgroundColor¶

BackgroundColor¶

Image¶

Visible¶

Width¶

_Name¶

_Type¶

MDK Image ContentMode¶

Different Combinations of Image Section properties on iOS¶

Different Combinations of Image Section properties on Android¶

Different Combinations of Image Section properties on WebClient¶

Examples¶

Style Classes Definition¶