MDK Binding and Control access issues

[AdrDen]

Hi,

I have a couple of issues when developing my MDK App. The flow of my application is:

- We start on Main page, where Simple Property is used for Search.

- User provides Article Number in the Search field (or uses barcode scanning).

- When clicking 'Search' a Function Import using an Action is triggered. FI returns an Article Object.

- Then we want to show Article Object data below the Search field (preffered option is KeyValue fields).

We have following issues:

1. Cannot retrieve KeyValue control from Main page. While we can get 'ArticleDescriptionLabel', for 'Type' we get error: 'Could not find control 'Type' in view hierarchy'.

export default function ArticleFound(clientAPI) {

    let actionResult = clientAPI.getActionResult("SearchArticle");

    if (actionResult && actionResult.data) {

        let articleData = actionResult.data;

        try {

            let articleDescriptionLabel = clientAPI.evaluateTargetPath("#Page:Main/#Control:ArticleDescriptionLabel");

            articleDescriptionLabel.setText(articleData.Description);

            articleDescriptionLabel.redraw();

            let surnameKeyValue = clientAPI.evaluateTargetPath("#Page:Main/#Control:Type");

            surnameKeyValue.setValue(articleData.Type);

            surnameKeyValue.redraw();

        } catch(error) {

            alert(error);

        }

    }

}

Here's control tree:

The name of KeyValue this case is 'Type'.

2. As you can see our Code above, we receive Article object from Function Import via the Rule, but we don't know what's the best way to display the Article data in the view (e.g. many KeyValues or SimpleProperties). 

The only option we've found is accessing controls and then using setValue, setText methods, as above. But the code is redundant, and it would be better to use bindings.

We tried using Client Data, but then the value of the control is not being updated. It's like the binding is not refreshed.

            let pageProxy = clientAPI.getPageProxy();

            let pageClientData = pageProxy.getClientData();

            pageClientData.description = articleData.Description;

Then here's our binding:

Unfortunately, no luck. We tried using bindings, but without luck too.

3.  SimpleProperty missing events.

The only event we can use in SimpleProperty is OnValueChange for now. But it gets triggered each time a character is typed. Is there any option to call it once, only when typing is done? iOS keyboard has 'Done' button, which could be used to trigger 'Submit' event or 'ValueChanged'. In our case we want to trigger a function import when User types a complete Article Number. We can't trigger it OnValueChange. In SAPUI5, as an example - SearchField has different events, like 'change' and 'liveChange', which helps a lot. sap.m.SearchField - API Reference - Demo Kit - SAPUI5 SDK

4.  Bluetooth support. 

If we start using nativescript ble package for Bluetooth device scanning, will it work in SAP Mobile Start when we deploy our app to Cloud, or it works with branded MDK client only? When we develop the app and use SAP Mobile Services client from App Store for app preview, will we be able to test our NativeScript plugins? what's the best way to develop and test such extensions?

BR,

Adrian

[bill_froelich · Accepted solution]

1. Cannot retrieve KeyValue control from Main page. While we can get 'ArticleDescriptionLabel', for 'Type' we get error: 'Could not find control 'Type' in view hierarchy'.

Key Values are display only fields and we don't provide access to modify them individually at runtime or access them to retrieve values.

2. As you can see our Code above, we receive Article object from Function Import via the Rule, but we don't know what's the best way to display the Article data in the view (e.g. many KeyValues or SimpleProperties). 

If you have multiple data elements you want to display then Key Value is a one solution.  It all really depends on the data and what you are doing with it after retrieval.

In terms of binding for the key values you should be able to store the Action result in Client Data and set the Key Value target to the Client Data object.  Then each individual field can bind to the various properties.  You would need to trigger a redraw of the Key Value section after updating the Client Data value.

3.  SimpleProperty missing events.

Please remember that MDK is not UI5.  As such there should be not expectation of parity.  In MDK we don't have any event / knowledge of the end of input.  My suggestion would be to just add a button field that the user can press to trigger your end of input processing.

4.  Bluetooth support. 

Any nativescript plugins you add would apply only for the mobile clients and not the web and will require using a branded client.  As soon as you start using plugins, the SAP Mobile Services client from the App Store will not be able to handle running your application since it will not contain those plugins.

[AdrDen · Accepted solution]

Thank you for your answers @bill_froelich . 

#2 - that's what I tried. I get the data object and store under Client Data. Then I have Static Key Container with Key Value Items inside. However, when I provide bindings in Key Value Items, e.g. #Page:Main/#ClientData/Article/Description, I do not see the value. Unfortunately, I can't retrieve the control to redraw it (as you mentioned in your first answer).

#4 - Will it work with Cloud Build client too? Can I use it then in SAP Mobile Start?

[bill_froelich · Accepted solution]

#2

Set the Target for the Key Value section to your Client Data object

"Target": "#Page:-Current/#ClientData/CustObj"

Then just bind to the object properties for each key value cell

"KeyAndValues": [
	{
		"Value": "{CustomerID}",
		"_Type": "KeyValue.Type.Item",
		"_Name": "KeyValue2",
		"KeyName": "Customer ID",
		"Visible": true
	},
	{
		"Value": "{FirstName} {LastName}",
		"_Type": "KeyValue.Type.Item",
		"_Name": "KeyValue0",
		"KeyName": "Name",
		"Visible": true
	},
	{
		"Value": "{EmailAddress}",
		"_Type": "KeyValue.Type.Item",
		"_Name": "KeyValue1",
		"KeyName": "Email",
		"Visible": true
	},
	{
		"Value": "{PhoneNumber}",
		"_Type": "KeyValue.Type.Item",
		"_Name": "KeyValue3",
		"KeyName": "Phone",
		"Visible": true
	}
],

#4

You can create a Customized MDK Client build in Cloud Build and specify your plugins.  You should be able to configure Mobile Start launch your branded MDK mobile client.

[AdrDen · Accepted solution]

Unfortunately, it still doesn't work.

Rule (function import result):

            let actionResult = clientAPI.getActionResult("SearchArticle");     

            let articleData = actionResult.data;

            let pageProxy = clientAPI.getPageProxy();

            let pageClientData = pageProxy.getClientData();

            pageClientData.ArticleData = articleData;

Binding:

"KeyAndValues": [ { "Value": "{Description}", "_Type": "KeyValue.Type.Item", "_Name": "KeyValue0", "KeyName": "Description", "Visible": true } ], "MaxItemCount": 1, "_Type": "Section.Type.KeyValue", "Target": "#Page:Main/#ClientData/ArticleData", "_Name": "SectionKeyValue0", "Visible": true,

No option to redraw SectionKeyValue0.

PS. Is GET Function Import not supported by MDK? I can use POST only.

[bill_froelich · Accepted solution]

You can redraw the section by getting the reference to it and calling redraw.

let kv = context.getPageProxy().getControl('SectionedTable0').getSection('KVSection');
kv.redraw();

Add the redraw after you store the result object in client data in your rule.

[AdrDen · Accepted solution]

This helped. Thanks a lot!