Skip to content

SectionedTable

SectionedTable Properties

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

FilterFeedbackBar

The filter feedback bar to be displayed on the Sectioned Table. Specifically for iOS, FilterFeedbackBar cannot be displayed if FilterFeedbackBar is defined on SectionedTable with 'ObjectHeader` as first section.

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

Option 16

Option 17

Option 18

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:

"Control.Type.SectionedTable"

Examples

SectionedTable with FeedbackFilterBar

{
  "_Type": "Page",
  "_Name": "WorkOrderList",
  "Caption": "Work Orders",
  "Controls": [
    {
      "Section": {
        "Header": {
          "UseTopPadding": false
        },
        "ObjectCell": {
          "AccessoryType": "disclosureIndicator",
          "Description": "{OrderDescription}",
          "DetailImage": "/MDKDevApp/Images/workorder.png",
          "OnPress": "/MDKDevApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
          "StatusImage": "/MDKDevApp/Images/workorder_details.png",
          "Title": "{OrderId}"
        },
        "Target": {
          "EntitySet": "MyWorkOrderHeaders",
          "Service": "/MDKDevApp/Services/Amw.service",
          "QueryOptions": "$orderby=OrderId"
        },
        "_Type": "Section.Type.ObjectTable"
      },
      "FilterFeedbackBar": {
        "ShowAllFilters": "true",
        "FastFilters": [
          {  
            "_Name": "OrderByOrderId",
            "FilterType": "Sorter",
            "Label": "Order By",
            "DisplayValue": "Order Id",
            "ReturnValue": "OrderId"
          },
          {  
            "_Name": "OrderByBA",
            "FilterType": "Sorter",
            "DisplayValue": "Business Area",
            "ReturnValue": "BusinessArea"
          },
          {  
            "_Name": "LowPriority",
            "FilterType": "Filter",
            "Label": "Prio",
            "FilterProperty": "/MDKDevApp/Globals/Priority.global",
            "DisplayValue": "Low",
            "ReturnValue": "1"
          },
          {  
            "_Name": "MedPriority",
            "FilterType": "Filter",
            "FilterProperty": "/MDKDevApp/Globals/Priority.global",
            "DisplayValue": "Medium",
            "ReturnValue": "2"
          },
          {  
            "_Name": "HE217",
            "FilterType": "Filter",
            "FilterProperty": "HeaderEquipment",
            "Label": "HE",
            "DisplayValue": "HE-10000217",
            "ReturnValue": "10000217"
          },
          {  
            "_Name": "IDFilterLt",
            "FilterType": "Filter",
            "FilterProperty": "",
            "CustomQueryGroup":"OrderIdGroup",
            "Label": "ID",
            "DisplayValue": "< 4000020",
            "ReturnValue": "OrderId lt '4000020'"
          },
          {  
            "_Name": "IDFilterGt",
            "FilterType": "Filter",
            "FilterProperty": "",
            "CustomQueryGroup":"OrderIdGroup",
            "Label": "",
            "DisplayValue": "> 4000020",
            "ReturnValue": "OrderId gt '4000020'"
          }
        ],
        "Styles": {
          "Active": "activeFilter",
          "InActive": "inactiveFilter"
        }
      },
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable"
    }
  ]
}

.activeFilter {
  font-color: #cc6600;
  border-color: #cc6600;
}

.inactiveFilter {
  font-color: #800080;
  border-color: #800080;
}


### Categories Group page
```json
{
  "_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}"
        }
      };
    }
  }