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	No
DataSubscriptions	DataSubscriptions	No
EmptySection	EmptySection	No
Footer	Footer	No
Header	Header	No
Row	`object`	Yes
Search	Search	No
Separators	Separators	No
Target	LinkQueryFunctionTarget	Yes
Visible	`boolean`	No
_Name	`string`	No
_Type	`const`	Yes

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¶

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	No
`Items`	array	No
`Layout`	GridLayout	No
`OnPress`	ActionOrRule	No
`OnAccessoryButtonPress`	ActionOrRule	No

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

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