QueryOptions not working in Objectcell binding on entityset for a List Picker in MDK app

[aanchal_kajaria]

Hello experts,

I have an issue in using filter in QeryOptions for a list picker in my page of the offline MDK application. I actually want to create a URI like #Page:Notification_Create/#Control:FormCellSimplePropertyPlant/#Value as the values for the Notificaiton type is dependent on the value of the Plant (/sap/opu/odata/SAP/ZME_PM_CREATE_NOTIFICATION_SRV/NotifTypeListSet?$filter=Plant eq '1190'). For testing purposes I am trying to use hard coded value for Plant like 1190 ("$filter=Plant eq '\"1190\"'"). But, it does not work in any case. I see blank values when I open the list picker in the deployed app on my emulator.

The picker is the one for Notification types:

"AllowEmptySelection": false, "AllowMultipleSelection": false, "Caption": "Notification Type", "IsEditable": true, "IsPickerDismissedOnSelection": true, "IsSearchCancelledAfterSelection": true, "IsSelectedSectionEnabled": false, "IsVisible": true, "PickerItems": { "ObjectCell": { "DetailImageIsCircular": false, "Icons": [ ], "PreserveIconStackSpacing": true, "Styles": { }, "Subhead": "{NotifType}", "Title": "{NotifTypeTxt}" }, "ReturnValue": "{NotifType}", "Target": { "EntitySet": "NotifTypeListSet", "QueryOptions": "$filter=Plant eq '\"1190\"'", "Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service" } }, "Search": { "Enabled": true }, "_Name": "NotTypeFormCellListPicker", "_Type": "Control.Type.FormCell.ListPicker"

Below is the code for the complete page:

{ "ActionBar": { "Items": [ { "OnPress": "/ZME_CREATENOTIFICATION/Actions/NavToNotifications_List.action", "Position": "left", "SystemItem": "Cancel", "Text": "Cancel", "Visible": false }, { "Position": "Right", "SystemItem": "Organize", "Text": "Check", "Visible": false }, { "OnPress": "/ZME_CREATENOTIFICATION/Actions/CreateNotification.action", "Position": "right", "SystemItem": "Save", "Text": "Create", "Visible": true } ] }, "Caption": "Create Notification", "Controls": [ { "Sections": [ { "Controls": [ { "Caption": "Plant", "IsEditable": true, "IsVisible": false, "_Name": "FormCellSimplePropertyPlant", "_Type": "Control.Type.FormCell.SimpleProperty" }, { "AllowEmptySelection": false, "AllowMultipleSelection": false, "Caption": "Functional location", "IsEditable": true, "IsPickerDismissedOnSelection": true, "IsSearchCancelledAfterSelection": true, "IsSelectedSectionEnabled": false, "IsVisible": true, "PickerItems": { "ObjectCell": { "DetailImageIsCircular": false, "Icons": [ ], "PreserveIconStackSpacing": true, "Styles": { }, "Subhead": "{FuncLoc}", "Title": "{FuncLocText}" }, "ReturnValue": "{FuncLoc}", "Target": { "EntitySet": "FLocListfromSettingSet", "Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service" } }, "Search": { "BarcodeScanner": true, "Enabled": true }, "_Name": "FuncLocFormCellListPicker", "_Type": "Control.Type.FormCell.ListPicker" }, { "AllowEmptySelection": false, "AllowMultipleSelection": false, "Caption": "Equipment", "IsEditable": true, "IsPickerDismissedOnSelection": true, "IsSearchCancelledAfterSelection": true, "IsSelectedSectionEnabled": false, "IsVisible": true, "PickerItems": { "ObjectCell": { "DetailImageIsCircular": false, "Icons": [ ], "PreserveIconStackSpacing": true, "Styles": { }, "Subhead": "{Equip}", "Title": "{EquipText}" }, "ReturnValue": "{Equip}", "Target": { "EntitySet": "EquiListfromFLocSet", "Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service" } }, "Search": { "BarcodeScanner": true, "Enabled": true }, "_Name": "EquipFormCellListPicker", "_Type": "Control.Type.FormCell.ListPicker" }, { "AllowEmptySelection": false, "AllowMultipleSelection": false, "Caption": "Notification Type", "IsEditable": true, "IsPickerDismissedOnSelection": true, "IsSearchCancelledAfterSelection": true, "IsSelectedSectionEnabled": false, "IsVisible": true, "PickerItems": { "ObjectCell": { "DetailImageIsCircular": false, "Icons": [ ], "PreserveIconStackSpacing": true, "Styles": { }, "Subhead": "{NotifType}", "Title": "{NotifTypeTxt}" }, "ReturnValue": "{NotifType}", "Target": { "EntitySet": "NotifTypeListSet", "QueryOptions": "$filter=Plant eq '\"1190\"'", "Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service" } }, "Search": { "Enabled": true }, "_Name": "NotTypeFormCellListPicker", "_Type": "Control.Type.FormCell.ListPicker" }, { "AllowEmptySelection": false, "AllowMultipleSelection": false, "Caption": "Priority", "IsEditable": true, "IsPickerDismissedOnSelection": true, "IsSearchCancelledAfterSelection": true, "IsSelectedSectionEnabled": false, "IsVisible": true, "PickerItems": { "ObjectCell": { "Description": "", "DetailImageIsCircular": false, "Icons": [ ], "PreserveIconStackSpacing": true, "Styles": { }, "Subhead": "{Priority}", "Title": "{ProirityText}" }, "ReturnValue": "{Priority}", "Target": { "EntitySet": "PrioritiesListSet", "Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service" } }, "_Name": "PriorityFormCellListPicker", "_Type": "Control.Type.FormCell.ListPicker" }, { "Caption": "Short text", "_Name": "ShortTextFormCellSimpleProperty", "_Type": "Control.Type.FormCell.SimpleProperty" }, { "Caption": "Description", "_Name": "DescFormCellSimpleProperty", "_Type": "Control.Type.FormCell.SimpleProperty" }, { "AttachmentActionType": [ "AddPhoto", "TakePhoto", "SelectFile" ], "IsVisible": true, "_Name": "FormCellAttachmentNotif", "_Type": "Control.Type.FormCell.Attachment" } ], "Visible": true } ], "_Name": "FormCellContainer", "_Type": "Control.Type.FormCellContainer" } ], "_Name": "Notification_Create", "_Type": "Page" }
 

I understand the alternative is to use a js rule, but I had an issue with that as well previously(https://answers.sap.com/questions/13091447/mdk-odata-association-and-navigation-implementatio.html)

Pls help.

Thanks

Aanchal

[Jitendra_Kansal]

For sharing any code snippet in your question, you can use "Insert code" option part of question editor. E.g.,

It will be helpful for the community members to look into the snippet and provide you any further guidance.

Jitendra (SAP Community Moderator)

[bill_froelich · Accepted solution]

Looking at your filter options it looks like you are quoting the value twice. I would recommend just using single quotes around your Plant value like in the example below.

{
    "AllowEmptySelection": false,
    "AllowMultipleSelection": false,
    "Caption": "Notification Type",
    "IsEditable": true,
    "IsPickerDismissedOnSelection": true,
    "IsSearchCancelledAfterSelection": true,
    "IsSelectedSectionEnabled": false,
    "IsVisible": true,
    "PickerItems": {
        "ObjectCell": {
            "DetailImageIsCircular": false,
            "Icons": [],
            "PreserveIconStackSpacing": true,
            "Styles": {},
            "Subhead": "{NotifType}",
            "Title": "{NotifTypeTxt}"
        },
        "ReturnValue": "{NotifType}",
        "Target": {
            "EntitySet": "NotifTypeListSet",
            "QueryOptions": "$filter=Plant eq '1190'",
            "Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service"
        }
    },
    "Search": {
        "Enabled": true
    },
    "_Name": "NotTypeFormCellListPicker",
    "_Type": "Control.Type.FormCell.ListPicker"
}

[aanchal_kajaria · Accepted solution]

Hello Bill,

As you suggested, I used below code for the Notification type list picker. But still seeing blank for the list picker. I am not sure if there is some basic which is missed.

							"AllowEmptySelection": false,
							"AllowMultipleSelection": false,
							"Caption": "Notification Type",
							"IsEditable": true,
							"IsPickerDismissedOnSelection": true,
							"IsSearchCancelledAfterSelection": true,
							"IsSelectedSectionEnabled": false,
							"IsVisible": true,
						
							
					"PickerItems": {
								"ObjectCell": {
									"DetailImageIsCircular": false,
									"Icons": [
									],
									"PreserveIconStackSpacing": true,
									"Styles": {
									},
									"Subhead": "{NotifType}",
									"Title": "{NotifTypeTxt}"
								},
								"ReturnValue": "{NotifType}",
								"Target": {
								"EntitySet": "NotifTypeListSet",
								"QueryOptions": "$filter=Plant eq '1190'",
								"Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service"
								}
							},


							"Search": {
							"Enabled": true
							},
							"_Name": "NotTypeFormCellListPicker",
							"_Type": "Control.Type.FormCell.ListPicker"

I am attaching the metadata of the service as well. metadata.txt.

I also tried to use a rule to set the QueryOptions. Strangely, I see only 1 value in the list picker in this case, though the service call returns 3 values(checked in Gateway Client). Below is the code for the rule:

var clientAPI;
export default function check(controlProxy) {
// Get the container
let containerProxy = controlProxy.getPageProxy().getControl('FormCellContainer');
if (!containerProxy.isContainer()) {
return;
}
let notPickerProxy = containerProxy.getControl('NotTypeFormCellListPicker');
notPickerProxy.setEditable(true);
let qo = "$filter=Plant eq '1190'";
return qo
}

Thanks for checking!

Best regards

Aanchal

[aanchal_kajaria · Accepted solution]

Hello Bill,

Please help me check this. I tried to debug with my backend developer and he always receives blank filter string, both when I try to provide QueryOptions via rule or when I give in the page itself(below code), where list picker is defined. He was only able to see the filter string when I made change from using rule for QueryOptions to using like below. I don't know how this happened.

	"AllowEmptySelection": true,
							"AllowMultipleSelection": true,
							"Caption": "Notification Type",
							"IsEditable": true,
							"IsSelectedSectionEnabled": false,
							"IsVisible": true,
							"PickerItems": {
								"ObjectCell": {
									"DetailImageIsCircular": false,
									"Icons": [
									],
									"PreserveIconStackSpacing": true,
									"Styles": {
									},
									"Subhead": "{NotifType}",
									"Title": "{NotifTypeTxt}"
								},
								"ReturnValue": "{NotifType}",
						"Target": {
							"EntitySet": "NotifTypeListSet",
							"QueryOptions": "$filter=Plant eq '1190'",
							"Service": "/ZME_CREATENOTIFICATION/Services/ZME_PM_CREATE_NOTIFICATION_SRV.service"
								}
							},
							"Search": {
								"Enabled": true
							},
							"_Name": "NotTypeFormCellListPicker",
							"_Type": "Control.Type.FormCell.ListPicker"<br>

Can this be because i selected all entities for offline storage during the initial creation of the app? I removed it from InitializeOffline.action, but still face this issue!

Just noticed this error now:

JS: mdk.trace.binding: Error: ValueResolver._resolveValue: failed to bind property 'TypeError: Cannot read property 'isContainer' of undefined' undefined

Pls help.

Aanchal

[mingkho · Accepted solution]

aanchal.kajaria,

1st issue (JS: mdk.trace.binding: Error: ValueResolver._resolveValue: failed to bind property 'TypeError: Cannot read property 'isContainer' of undefined' undefined😞

That error is originated from your check.js rule

when you use the rule in the QueryOptions, you should not try to get the FormCellContainer. Because the container is not yet available when the QueryOptions is parsed during the page initial load.

That's why you get 'TypeError: Cannot read property 'isContainer' of undefined' undefined

When you assign the 'check.js' rule to the QueryOptions of the ListPicker control, the 1st argument object (i.e. controlProxy) you get in the rule's function will be the List Picker control itself (class IFormCellProxy). Therefore, you can simply use controlProxy to modify the list picker itself. e.g.

//controlProxy is ListPicker if you assign this rule to QueryOptions of the ListPicker control
export default function check(controlProxy) {
  controlProxy.setEditable(true);
  let qo = "$filter=Plant eq '1190'";
  return qo;
}

NOTE: If you assign the rule to a different control or page, then controlProxy might be a different proxy class, so please beware of this before reusing the rule.

2nd issue (I tried to debug with my backend developer and he always receives blank filter string):

When you enable a service with Offline OData in your app, all your data retrieval requests (i.e. Target binding in MDK a.k.a GET requests) will be executed only against the Offline Database, those requests will not go to your backend, that's why your backend developer didn't see any requests with the filter, because it never reach the backend. I believe what your backend developer saw was the initial requests from Offline OData Initialize action where MDK send requests to your backend to populate your offline odata database for the first time (based on the Defining Queries you defined in your Initialize action). So you must not removed the NotifTypeListSet EntitySet from the Defining Query of your InitializeOffline.action (If you did, please add it back). If you removed it, your offline store will not have the data for NotifTypeListSet and you app won't be able to retrieve it.

3rd issue (I see only 1 value in the list picker in this case, though the service call returns 3 values(checked in Gateway Client):

One possible cause of this is if the data in your offline database is out of date, so you are seeing the outdated data (Remember: offline-enabled MDK app retrieve data from offline store only). You need to trigger an Offline Download action to ask MDK to send requests to your backend to ask for latest data to be populated to your offline database so that you have the latest data.

You can trigger a sync action. Typically this is auto-generated for you by MDK template, you should see a sync button in your app main page's action bar. You need to trigger that button to sync the latest data (Sync in this case is Offline Upload action + Offline Download action).

So please try that.