How to implement sectioned table and Form cell selection in MDK

[rpotti57]

Hi experts!

I am working on a MDK Curd application in SAP Web IDE and I have used Sectioned Table: Form cell selection and Object table.

When I open app I need to capture the selected date form Date picker in Form cell selection and input that captured date to filter the Object table list.
How to appending the value of captured date in QueryOptions(Web IDE) or how to setQueryOptions using advanced rules(.js)

Does anyone knows how to solve this issue? I will be very grateful with your help

Greetings from RanganathPavan!

[mingkho · Accepted solution]

Hi

You can assign a rule to your Object Table's QueryOptions.

Within the rule you can access the date picker and get its value and return a filter accordingly.

Here's an example of the rule:

/**
* Describe this function...
* @param {ISectionedTableProxy} context
*/
export default function OrderListQueryOptions(context) {
  var ctrl = context.getControl("MyDatePicker");
  if (ctrl && ctrl.getValue()) {
    var value = ctrl.getValue();
    var date = `${value.toISOString().substr(0, 11)}00:00:00`;
    return `$filter=OrderDate eq datetime'${date}'`;
  }
}

You can re-trigger this rule by redrawing the sectioned table, assigning a new rule to a button in the page.

e.g.

/**
* Describe this function...
* @param {IFormCellProxy} context
*/
export default function RefreshSectionTable(context) {
  context.getPageProxy().getControl("SectionedTable0").redraw();
}

This will redraw the entire sectioned table, including your object table and will trigger the queryoptions' rule again.

Here's the example of the page:

{
  "Caption": "Orders List",
  "Controls": [
    {
      "Sections": [{
        "_Type": "Section.Type.FormCell",
        "Controls": [
          {
            "_Type": "Control.Type.FormCell.DatePicker",
            "_Name": "MyDatePicker",
            "Mode": "Date",
            "Caption": "Select date to filter"
          },
          {
            "_Type": "Control.Type.FormCell.Button",
            "_Name": "MyButton",
            "OnPress": "/NorthwindApp/Rules/RefreshSectionTable.js",
            "Title": "Apply"
          }
        ]
      },{
        "_Type": "Section.Type.ObjectTable",
        "Target": {
          "Service": "/NorthwindApp/Services/Northwind.service",
          "EntitySet": "Orders",
          "QueryOptions": "/NorthwindApp/Rules/Orders/OrderListQueryOptions.js"
        },
        "ObjectCell": {
          "Title": "{OrderID} - Ordered On $(D, {OrderDate}, null, null, {format:'short'})",
          "Subhead": "Shipping handled by {ShipName}"
        }
      }],
      "_Name": "SectionedTable0",
      "_Type": "Control.Type.SectionedTable"
    }
  ],
  "_Name": "Orders_List",
  "_Type": "Page"
}