SectionedTable

SectionedTable Properties

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

---

FilterFeedbackBar

The filter feedback bar to be displayed on the Sectioned Table.

• type: FilterFeedbackBar

---

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.

• type: Rule

---

LoadingIndicator

Configure the loading indicator shown at the initial page loading.

• type: LoadingIndicator

---

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.

• type: ActionOrRule
• Formatter and Binding are not supported

---

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

• ButtonTable

Option 2

• Calendar

Option 3

• ContactTable

Option 4

• Extension

Option 5

• FormCell

Option 6

• GridTable

Option 7

• ImageCollection

Option 8

• Image

Option 9

• KeyValue

Option 10

• ObjectCollection

Option 11

• ObjectHeader

Option 12

• ObjectTable

Option 13

• ProfileHeader

Option 14

• SimplePropertyCollection

Option 15

• Timeline

Option 16

• TimelinePreview

Option 17

• ObjectCardCollection

---

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.

• type: LinkQueryFunctionTarget

---

_Name

• type: string

---

_Type

• type: const

The value of this property must be equal to:

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