GridTable¶

Grid Table is a table view container in which labeled columns in a grid are used to present numbers, text, or even images in rows in a tabular format. Grid Table will automatically convert to an Object Table when displaying on a phone due to space constraints.

Note: Grid Table does not support static content, Target binding must be used to populate the table rows.

GridTable Properties¶

Property	Type	Required
DataPaging	DataPaging	Optional
DataSubscriptions	DataSubscriptions	Optional
EmptySection	EmptySection	Optional
Footer	Footer	Optional
Header	Header	Optional
Row	`object`	Required
Search	Search	Optional
Separators	Separators	Optional
Target	LinkQueryFunctionTarget	Required
Visible	`boolean`	Optional
_Name	`string`	Optional
_Type	`const`	Required

DataPaging¶

Configure the loading indicator shown at the end of the list, when loading next page of data.

type: DataPaging

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

Row¶

type: object with following properties.

Property	Type	Required
`AccessoryType`	string	Optional
`Items`	array	Optional
`Layout`	GridLayout	Optional
`OnPress`	ActionOrRule	Optional
`OnAccessoryButtonPress`	ActionOrRule	Optional

AccessoryType¶

Optional accessory icon to be displayed in the cell. If both AccessoryType and ProgressIndicator are set, only the ProgressIndicator is shown.

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

type: enum[]

Value	Description
`Checkmark`	A checkmark icon.
`DetailButton`	An information icon.
`DetailDisclosureButton`	An information icon and a disclosure (chevron) control on iOS and web. An information icon only on Android.
`DisclosureIndicator`	A chevron-shaped control for presenting new content on iOS and web. Display as blank on Android.
`None`	No accessory view.

Items¶

Array of GridRowItem that represent columns in the grid row

All array items must be of the type:

GridRowItem

Layout¶

The layout of columns in a Grid Table row.

If no Layout is specified, the space will be divided evenly among the row items.

If no Layout is specified for this section's Header, this one will be used for the header.

GridLayout

OnPress¶

Event triggered when the grid row is pressed

ActionOrRule
Formatter and Binding are not supported

OnAccessoryButtonPress¶

In iOS, it is only triggered by pressing the 'detail button' if AccessoryType is set to detailButton or detailDisclosureButton. In Android, it is triggered for any AccessoryType.

ActionOrRule
Formatter and Binding are not supported

Search¶

Defines if search is to be enabled in the Grid Table.

type: Search

Separators¶

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

type: Separators

Target¶

The binding target for the Grid Table. For each entry in the result of the binding, a grid row will be generated based on the Row configuration.

type: LinkQueryFunctionTarget

Visible¶

Visibility of the Grid Table

type: boolean

_Name¶

type: string

_Type¶

type: const

The value of this property must be equal to:

"Section.Type.GridTable"

Examples¶

{
  "_Type": "Section.Type.GridTable",
  "_Name": "GridTableSection",
  "DataPaging": {
    "ShowLoadingIndicator": true,
    "LoadingIndicatorText": "Loading more items, please wait…"
  }, 
  "Row": {
    "Items": [
      {
        "Image": "/MDKApp/Images/workorder.png"
      },
      {
        "Text": "{OrderId}"
      },
      {
        "Text": "{OrderDescription}"
      },
      {
        "Text": "$(C,{OrderId},'USD')",
        "TextAlignment": "right"
      }
    ],
    "Layout": {
      "ColumnWidthPercentage": [
        0.2,
        0.2,
        -1,
        0.25
      ]
    },
    "OnPress": "/MDKApp/Actions/Messages/Message.action",
    "OnAccessoryButtonPress": "/MDKApp/Actions/Messages/Message2.action",
    "AccessoryType": "detailButton"
  },
  "Header": {
    "Grid": {
      "Items": [
        {
          "Text": ""
        },
        {
          "Text": "ID"
        },
        {
          "Text": "Description"
        },
        {
          "Text": "Price",
          "TextAlignment": "right"
        }
      ]
    }
  },
  "Target": {
    "EntitySet": "MyWorkOrderHeaders",
    "Service": "/MDKApp/Services/Amw.service"
  }
}

GridTable with Style¶

{
  "_Type": "Section.Type.GridTable",
  "_Name": "GridTableSection",
  "DataPaging": {
    "ShowLoadingIndicator": true,
    "LoadingIndicatorText": "Loading more items, please wait…"
  }, 
  "Row": {
    "Items": [
      {
        "Image": "sap-icon://favorite",
        "Style": "font-icon-class"
      },
      {
        "Text": "{OrderId}",
        "Style": "GridTableIdItem"
      },
      {
        "Text": "{OrderDescription}"
      },
      {
        "Text": "$(C,{OrderId},'USD')",
        "TextAlignment": "right"
      }
    ],
    "Layout": {
      "ColumnWidthPercentage": [
        0.2,
        0.2,
        -1,
        0.25
      ]
    },
    "OnPress": "/MDKApp/Actions/Messages/Message.action",
    "OnAccessoryButtonPress": "/MDKApp/Actions/Messages/Message2.action",
    "AccessoryType": "detailButton"
  },
  "Header": {
    "Grid": {
      "Items": [
        {
          "Text": ""
        },
        {
          "Text": "ID"
        },
        {
          "Text": "Description"
        },
        {
          "Text": "Price",
          "TextAlignment": "right"
        }
      ]
    }
  },
  "Target": {
    "EntitySet": "MyWorkOrderHeaders",
    "Service": "/MDKApp/Services/Amw.service"
  }
}

GridTable with OnPress and OnAccessoryButtonPress supporting PLT formatter¶

{
  "_Name": "GridTableSection",
  "_Type": "Section.Type.GridTable",
  "Row": {
    "Items": [{
      "Image": "/MDKDevApp/Images/on.png",
      "BindTo": "detailImage"
    },{
      "Image": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/SAP_2011_logo.svg/2000px-SAP_2011_logo.svg.png",
      "BindTo": "firstIcon"
    },{
      "Image": "/MDKDevApp/Images/icon.png",
      "BindTo": "secondIcon"
    },{
      "Image": "/MDKDevApp/Images/medium.png",
      "BindTo": "thirdIcon"
    },{
      "Text": "{OrderId}",
      "Style": "GridTableIdItem",
      "BindTo": "subheadline"
    }, {
      "Text": "{OrderDescription}",
      "NumberOfLines": 0,
      "TextAlignment": "left",
      "BindTo": "headline"
    }, {
      "Text": "$(C,{OrderId},'USD')",
      "BindTo": "footnote"
    }],
    "Layout": {
      "ColumnWidthPercentage": [0.1,0.1,0.1,0.1, 0.2, -1, 0.25]
    },  
    "OnPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnPressIOS.action', '/MDKDevApp/Actions/Messages/OnPressAndroid.action','/MDKDevApp/Actions/Messages/OnPressWeb.action')",
    "OnAccessoryButtonPress": "$(PLT,'/MDKDevApp/Actions/Messages/OnAccessoryButtonPressIOS.action', '/MDKDevApp/Actions/Messages/OnAccessoryButtonPressAndroid.action')",
    "AccessoryType": "detailButton"
  },
  "Header": {
    "Grid": {
      "Items": [{
        "Text": ""
      }, {
        "Text": ""
      }, {
        "Text": ""
      }, {
        "Text": ""
      }, {
        "Text": "ID"
      }, {
        "Text": "Description"
        }, {
        "Text": "Price"
      }]
    }
  },
  "Target": {
    "EntitySet": "MyWorkOrderHeaders",
    "Service": "/MDKDevApp/Services/Amw.service"
  }
}

Style Classes Definition¶

.GridTableIdItem {
  color: #3333cc;
  font-name: italicSystem;
}

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