Skip to content

SectionedTable

SectionedTable Properties

Property Type Required
Filters Rule Optional
LoadingIndicator LoadingIndicator Optional
OnRendered ActionOrRule Optional
Section object Optional
Sections array Optional
Target LinkQueryFunctionTarget Optional
_Name string Optional
_Type const Required

Filters

The filters to be applied on the Sectioned Table, this property can only be set with a rule. It accepts only an array of FilterCriteria that must be returned from the assigned rule.


LoadingIndicator

Configure the loading indicator shown at the initial page loading.


OnRendered

The event handler that will be triggered when the section table is fully rendered for the first time and even also whenever the redraw is triggered after that.


Section

The Section is a template for dynamic sections binding. It accepts a single control definition that can be any one of the available section controls such as Object Table, Chart Content, and more. It can also accept a rule which returns a different section type based on business logic. The rule must ultimately return a single section control definition.

  • type: object

Sections

  • type: array

All items must be of the type:

Any following options needs to be fulfilled.

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Option 7

Option 8

Option 9

Option 10

Option 11

Option 12

Option 13

Option 14

Option 15


Target

Definition of the target binding to dynamically populate the collection. The binding context of each section from the Section template is the entries from the target binding. You can also set this to binding/rule to return an array of data items.

Note: If this is set to binding/rule, you must return an array of data items, you can't return a target definition.


_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.SectionedTable"

Examples

Categories Group page

{
  "_Type": "Page",
  "_Name": "MyProductsByCategoryPage",
  "Caption": "Products By Categories",
  "Controls": [
    {
      "Target": {
        "EntitySet": "Categories",
        "Service": "/MDKApp/Services/Amw.service",
        "QueryOptions": "$orderby=CategoryName&$top=3"
      },
      "Section": {
        "Header": {
          "UseTopPadding": false,
          "Caption": "Category Group"
        },
        "Target": {
          "EntitySet": "Products",
          "Service": "/MDKApp/Services/Amw.service",
          "QueryOptions": "$filter=CategoryID eq {CategoryID}"
        },
        "ObjectCell": {
          "Title": "{ProductName}",
          "Description": "{UnitPrice}",
          "Subhead": "{CategoryID}"
        },
        "_Type": "Section.Type.ObjectTable"
      },
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable"
    }
  ]
}

Categories Group by a section template with a rule

{
  "_Type": "Page",
  "_Name": "MyProductsByCategoryPage",
  "Caption": "Products By Categories",
  "Controls": [
    {
      "Target": {
        "EntitySet": "Categories",
        "Service": "/MDKApp/Services/Amw.service",
        "QueryOptions": "$orderby=CategoryName&$top=3"
      },
      "Section": "/MDKApp/Rules/GetGroupSection.js",
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable"
    }
  ]
}

The fuction of the section rule

  function GetGroupSection(context) {
    const binding = context.binding;
    if(binding.CategoryID % 2 == 0) {
      return {
        "_Type": "Section.Type.ObjectTable",
        "Header": {
          "Caption": "Category Group",
          "UseTopPadding": true
        },
        "Target": {
          "EntitySet": "Products",
          "Service": "/MDKApp/Services/Amw.service",
          "QueryOptions": "$filter=CategoryID eq {CategoryID}"
        },
        "ObjectCell": {
          "Title": "{ProductName}",
          "Description": "{UnitPrice}",
          "Subhead": "{CategoryID}"
        }
      };
    } else {
      return {
        "_Type": "Section.Type.ObjectCollection",
        "Header": {
          "Caption": "Category Group",
          "UseTopPadding": true
        },
        "Layout": {
          "NumberOfColumns": 2
        },
        "Target": {
          "EntitySet": "Products",
          "Service": "/MDKApp/Services/Amw.service",
          "QueryOptions": "$filter=CategoryID eq {CategoryID}"
        },
        "ObjectCell": {
          "Title": "{ProductName}",
          "Description": "{UnitPrice}",
          "Subhead": "{CategoryID}"
        }
      };
    }
  }