Skip to content

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.

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
Target LinkQueryFunctionTarget Required
Visible boolean Optional
_Type const Required

DataPaging

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


DataSubscriptions

Array of data change events to subscribe to.


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.


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


Header bar to be displayed above this control's content section.


Row

  • type: object with following properties.
Property Type Required Default
AccessoryType string Optional
Items array Optional
Layout GridLayout Optional
OnPress ActionOrRule Optional
OnAccessoryButtonPress ActionOrRule Optional

AccessoryType

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

Value
checkmark
detailButton
detailDisclosureButton
disclosureIndicator
none

Items

Array of GridRowItem that represent columns in the grid row

All array items must be of the type:

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.

OnPress

Event triggered when the grid row is pressed

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.


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.


Visible

Visibility of the Grid Table

  • type: boolean

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