Image¶

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

When assigning a rule to a property of Image, the rule will be passed an instance of the following proxy class as an argument:

• SectionProxy

Image Properties¶

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¶

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.

Note: For font-size styling on font-icon image to be applicable, ContentMode has to be set as Center or undefined.

• type: enum
• default: ScaleAspectFit

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

DataSubscriptions¶

Array of data change events to subscribe to.

• type: DataSubscriptions

Footer¶

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

• type: Footer

Header¶

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.

ImageBackgroundColor¶

The string value is a style class name of ImageBackgroundColor. This property is deprecated. Please use background-color in Image style instead.

• Background style class

BackgroundColor¶

The string value is a style class name of BackgroundColor.

• Background style class

Image¶

The string value is a style class name of Image. The CSS property background-color is supported for all image types, while font-size and color are additionally supported for SAP icon and font icon types. Note: For Image, if background-color styling is applied, ImageBackgroundColor will be ignored.

• 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:

"Section.Type.Image"

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¶

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