Calling Mobile Development kit (MDK) Extension method before loading it from Mobile Development kit (MDK) Page

In this blog post, I would like to describe one of the solution approach to invoke Mobile Development kit (MDK) extension method from Mobile Development kit (MDK) page even before loading the extension.

Prerequisite As a reader, you should have some experience working with SAP Mobile Development kit (MDK).

In Mobile Development kit (MDK), following are straight forward scenarios:

• Communication between MDK Pages are possible through MDK Actions
• Launch MDK extension from MDK Page as extension control
• It’s possible to invoke MDK Rule or Action using EventHandler.executeActionOrRule(<path of Rule or Action>)

But what if there is a requirement to invoke one of the extension method from MDK page even before loading the extension.

I am going to explain the solution approach as following steps:

Step 1. Create the extension class with method to be invoked from MDK Page. For example, preprocess()

export class ExtensionClass extends IControl {
        private _observable: BaseObservable;

        public initialize(props) {
                super.initialize(props);
        }

        public preprocess() {
                // load extension data before hand
        }

        public view() {
                return this.view;
        }

        public viewIsNative() {
                return true;
        }

        public observable() {
                if (!this._observable) {
                        this._observable = new BaseObservable(this, this.definition(), this.page());
                }
                return this._observable;
        }

        public setContainer(container: IControl) {
                // do nothing
        }

        public setValue(value: any, notify: boolean, isTextValue?: boolean): Promise<any> {
                // do nothing
                return Promise.resolve();
        }
}    

Step 2. Update MDKProject.json to include the extension class in “Externals” property

{
  "AppName": "MyApp",
  "AppVersion": "2005.0.1",
  "BundleID": "com.sap.myapp",
  "Externals": ["./extensions/extension-MyExtension/controls/ExtensionClass"],
  "NSPlugins": ["nativescript-geolocation"],
  "UrlScheme": "",
  "BaseProject": ""
}

I have added ExtensionClass as one of the Externals value, which will allow me to invoke method of ExtensionClass from MDK Page.

Step 3. Import the extension class in MDK Rule and call extension method

import { ExtensionClass } from './extensions/extension-MyExtension/controls/ExtensionClass';

export default function Preprocess(context) {
   
  // do other work
  
  // call extension method
  ExtensionClass extensionClass = new ExtensionClass();
  extensionClass.preprocess();
}

Step 4. Bind the MDK Rule to MDK Page

{
    "Caption": "MyPage",
    "OnLoaded": "/Rules/Preprocess.js",
    // Other Controls
}   

Now whenever the MyPage finish the loading, it will invoke MDK Rule Preprocess.js and in turn will invoke Extension method preprocess().

Please note:

While running the MDK project from Visual Studio Code OR deployment from Business Application Studio, you might encounter the build error in MDK Rule that it’s unable to find the extension. To fix this issue:

• Go to Visual Studio Code or BAS Settings
• Search for “MDK Externals”, you will see the settings for Mdk: Bundler Externals
• Click on “Edit in settings.json”
• Add the same extension path as you have added into MDKProject.json inside mdk.bundlerExternals” as well

  "mdk.bundlerExternals": [
           "./extensions/extension-MyExtension/controls/ExtensionClass"
  ]

Conclusion:

The solution approach is very much useful when the MDK application need to pre-process certain functionality, for example, pre-load the data into memory before extension load to improve performance.

Please share your feedback or thoughts in a comment below.