Create Extension Controls with NativeScript in an MDK App

1. In this step, you will add the registered control to the page.

   First, create a new page of Form Cell type

   Right-click the Pages folder | New MDK Page | Form Cell Page | Next.

   

   A Form Cell Page is suitable for pages that generate new objects or modify existing objects. It includes a form cell container by default. You can add form sections, multiple containers or action controls to this page. Under each container section, you can add various container items.

   You can find more details about Form Cell page.

2. Enter the Page Name as SampleExtensionPage and click Next and the Finish on the Confirmation step.

   

3. In MDK Page Editor, drag & drop the registered mdk_slider control on the page area.

   

   You can find more details about the properties of a Registered Extension Control in this guide.

4. You will set the height and some minimum & maximum counter value for the control.

   In the Properties section, scroll down to the Dimension section and set the Height to 72.

   

5. Scroll down to the Extension Properties, switch to Text mode and paste the following information:

   {
       "Title": "Counter",
           "MinValue": 10,
           "MaxValue": 200
       }
   

   

6. You will fetch the value of the Slider control and would display this value in a message.

   Right-click the SampleExtensionPage.page, open it in Code Editor.

   

   Rename the value for _Name property to MyExtensionControlName.

   

7. Create a new Message action.

   Right-click the Actions folder | New MDK Action | choose MDK Message Actions in Category | click Message Action | Next.

   

   Provide the below information:

   Property	Value
   Action Name	ShowMessage
   Type	select Message
   Message	#Control:MyExtensionControlName/#Value
   Title	Value of the Slider is:
   OKCaption	OK
   OnOK	--None--
   CancelCaption	leave it blank
   OnCancel	--None--

   

   Here MyExtensionControlName is the name of the control that you renamed in code editor.

8. Click Next and then Finish on the confirmation step.

9. You will add an item on action bar in SampleExtensionPage.page and set ShowMessage.action on its onPress event.

   In SampleExtensionPage.page, drag and drop an Action Bar Item to the upper right corner of the action bar.

   

10. Click the link icon to open the object browser for the System Item property.

    Double-click the Save type and click OK.

    

11. In the Properties pane | Events tab, click the link icon for the OnPress property to open the object browser, bind it to ShowMessage.action.

    

12. Save the changes to the SampleExtensionPage.page.

    You can also add an input field where you can provide a manual entry for the slider value and the counter will adapt accordingly.

    For this, first you will write a business logic to set the extension value and then bind it to the input field.

13. Right-click the Rules folder | New | File.

    

14. Enter the file name SetExtensionValue.js, click OK.

    Copy and paste the following code.

    export default function SetExtensionValue(controlProxy) {
      console.log("In SetExtensionValue");
      let srcValue = controlProxy.getValue();
      let targetCtrl = controlProxy.evaluateTargetPath("#Page:SampleExtensionPage/#Control:MyExtensionControlName");
      targetCtrl.setValue(srcValue);
    }
    

    

15. Save the changes to the SetExtensionValue.js file.

16. In SampleExtensionPage.page, drag and drop the Simple Property item control below the slider control.

    

17. Provide the following information:

    Property	Value
    Caption	Manual Entry
    isEditable	true
    placeholder	Enter number here to set the slider extension's value

    

18. Navigate to Events tab, click the link icon for the OnPress property to open the object browser, bind it to SetExtensionValue.js.

    

19. Save the changes to the SampleExtensionPage.page.

Make sure that you have already installed MDK SDK and created an .mdkproject folder as per steps 1, 2 & 3 in this tutorial.

1. Open demosampleapp.mdkproject folder in Visual Studio Code editor.

   

2. In extensions folder, create below files & folders as per below.

   

     MySliderModule
       controls
         MySliderExtension.ts
       plugin
         MyNativescriptPlugin
           MySliderPlugin
             MySlider.android.ts
             MySlider.ios.ts
             MySlider.ts
          index.ts
          package.json
   

3. In MySliderExtension.ts file, copy and paste the following code.

   import app = require('tns-core-modules/application/application');
   import { BaseObservable } from '../../../observables/BaseObservable';
   import { BaseControl } from '../../../controls/BaseControl';
   import { MySlider } from 'my-nativescript-plugin'; //Import MySlider NS Plugin
   
   export class MySliderClass extends BaseControl {
     private _slider: MySlider;
     private _minVal: number = 0;
     private _maxVal: number = 10000;
   
     public initialize(props) {
       super.initialize(props);
   
       //Create the Slider plugin control
       this.createSlider();
       //Assign the slider's native view as the main view of this extension
       this.setView(this._slider.getView());
     }
   
     private createSlider() {
       //Create MySlider and initialize its native view
       this._slider = new MySlider(this.androidContext());
       this._slider.initNativeView();
   
       this._slider.setMinValue(this._minVal);
       this._slider.setMaxValue(this._maxVal);
   
       //Set the slider's properties if "ExtensionProperties" is defined
       let extProps = this.definition().data.ExtensionProperties;
       if (extProps) {
         //In here we will use ValueResolver to resolve binding/rules for the properties
         // This will allow the app to use binding/rules to set the properties' value
   
         // Resolve title's value
         this.valueResolver().resolveValue(extProps.Title, this.context, true).then(function(title){
           this._slider.setText(title);
         }.bind(this));
   
         // Resolve min value
         this.valueResolver().resolveValue(extProps.MinValue, this.context, true).then(function(minVal){
           if (minVal !== null && minVal !== undefined) {
             this._minVal = minVal;
             this._slider.setMinValue(this._minVal);
           }
         }.bind(this));
   
         // Resolve max value
         this.valueResolver().resolveValue(extProps.MaxValue, this.context, true).then(function(maxVal){
           if (maxVal !== null && maxVal !== undefined) {
             this._maxVal = maxVal;
             this._slider.setMaxValue(this._maxVal);
           }
         }.bind(this));
   
         // Resolve value
         this.valueResolver().resolveValue(extProps.Value, this.context, true).then(function(value){
           this.setValue(value, false, false);
         }.bind(this));
       }
   
       //Set up listener for MySlider's OnSliderValueChanged event that will be triggered when user let of the slider's handle
       // It's eventData object contain a property 'value' that will contain the value of the slider
       this._slider.on("OnSliderValueChanged", function(eventData){
         //We will call the setValue
         this.setValue(eventData.value, true, false);
       }.bind(this));
     }
   
     // Override
     protected createObservable() {
       let extProps = this.definition().data.ExtensionProperties;
       //Pass ExtensionProperties.OnValueChange to BaseControl's OnValueChange
       if (extProps && extProps.OnValueChange) {
         this.definition().data.OnValueChange = extProps.OnValueChange;
       }
       return super.createObservable();
     }
   
     public setValue(value: any, notify: boolean, isTextValue?: boolean): Promise<any> {
       //Check the value
       if (value != null && value != undefined && !isNaN(value)) {
         if (typeof value == "string" && value.trim() == "") {
           return Promise.reject("Error: Value is not a number");
         }
         let val = Number.parseInt(value);
         //Don't let value go lower than permitted minimum or higher than permitted maximum
         val = val < this._minVal ? this._minVal : val;
         val = val > this._maxVal ? this._maxVal : val;
   
         if (this._slider) {
           //Set the slider's value
           this._slider.setValue(val);
         }
         //Store the value. The observable will trigger "OnValueChange" to the MDK app
         // MDK app can register to this event in the metadata with property "OnValueChange"
         return this.observable().setValue(val, notify, isTextValue);
       } else if (isNaN(value)) {
         return Promise.reject("Error: Value is not a number");
       }
       return Promise.resolve();
     }
   
     public viewIsNative() {
       return true;
     }
   }
   

4. Save the MySliderExtension.ts file.

5. In MySlider.android.ts file, copy and paste the following code.

   import { Observable } from "tns-core-modules/data/observable";
   import { View } from "tns-core-modules/ui/core/view";
   import { layout } from "tns-core-modules/ui/core/view";
   import { device as Device } from 'tns-core-modules/platform';
   
   /**
    * IMPLEMENT THE ANDROID VERSION OF YOUR PLUGIN HERE
    * In this sample we have 2 controls a label and a seekbar (slider)
    * We extends this control with Observable class so that we can accept listeners
    *  and notify them when UI interaction is triggered
    */
   declare var com: any;
   declare var android: any;
   function getPadding() {
     // Return left & right padding in dp
     // For tablet we want 24dp, for other type we use 16dp
     return Device.deviceType === 'Tablet' ? 24 : 16;
   }
   
   export class MySlider extends View {
     private _androidcontext;
     private _label;
     private _labelText = "";
     private _seekbar;
     private _layout;
     private _value = 0;
   
     private updateText() {
       this._label.setText(this._labelText + "(" + this._value + ")")
     }
   
     public constructor(context: any) {
       super();
       this._androidcontext = context;
       this.createNativeView();
     }
   
     /**
      * Creates new native controls.
      */
     public createNativeView(): Object {
       //Create an Android label
       this._label = new android.widget.TextView(this._androidcontext);
       const labelBottomPaddingInPx = layout.round(layout.toDevicePixels(8)); // For top & bottom padding, always 16dp
       this._label.setPadding(0, 0, 0, labelBottomPaddingInPx);
       this._label.setLayoutParams(new android.view.ViewGroup.LayoutParams(-1,-2));
   
       //Create an Android seekbar
       this._seekbar = new android.widget.SeekBar(this._androidcontext);
       this._seekbar.setLayoutParams(new android.view.ViewGroup.LayoutParams(-1,-2));
   
       //Create a LinearLayout container to contain the label and seekbar
       this._layout = new android.widget.LinearLayout(this._androidcontext);
       this._layout.setOrientation(android.widget.LinearLayout.VERTICAL);
       this._layout.setLayoutParams(new android.view.ViewGroup.LayoutParams(-1,-1));
   
       const hortPaddingInPx = layout.round(layout.toDevicePixels(getPadding()));
       const vertPaddingInPx = layout.round(layout.toDevicePixels(16)); // For top & bottom padding, always 16dp
       this._layout.setPadding(hortPaddingInPx, vertPaddingInPx, hortPaddingInPx, vertPaddingInPx);
       this._layout.addView(this._label);
       this._layout.addView(this._seekbar);
       this.setNativeView(this._layout);
       return this._layout;
     }
   
     /**
      * Initializes properties/listeners of the native view.
      */
     initNativeView(): void {
         // Attach the owner to nativeView.
         // When nativeView is tapped we get the owning JS object through this field.
         (<any>this._seekbar).owner = this;
         (<any>this._layout).owner = this;
         super.initNativeView();
   
         //Attach a listener to be notified whenever the native Seekbar is changed so that we can notify the MDK Extension
         this._seekbar.setOnSeekBarChangeListener(new android.widget.SeekBar.OnSeekBarChangeListener({
           onStartTrackingTouch(seekBar: any){
             // We do not have any use for this event, so do nothing here
           },
           //This handler function will be called when user let go of the handle
           // This is where we will trigger an event called "OnSliderValueChanged" to the MDK Extension Class
           onStopTrackingTouch(seekBar: any){
             var eventData = {
               eventName: "OnSliderValueChanged",
               object: seekBar.owner,
               value: seekBar.owner._value
             };
             seekBar.owner.notify(eventData);
           },
           //This handler function will be called whenever the slider's value is changed
           // i.e. whenever user drag the slider's handle
           onProgressChanged(seekBar: any, progress: number, fromUser: boolean) {
             seekBar.owner._value = progress;
             seekBar.owner.updateText();
           }
         }));
     }
   
     /**
      * Clean up references to the native view and resets nativeView to its original state.
      * If you have changed nativeView in some other way except through setNative callbacks
      * you have a chance here to revert it back to its original state
      * so that it could be reused later.
      */
     disposeNativeView(): void {
         // Remove reference from native view to this instance.
         (<any>this._seekbar).owner = null;
         (<any>this._layout).owner = null;
   
         // If you want to recycle nativeView and have modified the nativeView
         // without using Property or CssProperty (e.g. outside our property system - 'setNative' callbacks)
         // you have to reset it to its initial state here.
     }
   
     //Must return the native view of the control for MDK FormCell and Section Extension
     public getView(): any {
       return this._layout;
     }
   
     public setText(newText: string): void {
       if (newText != null && newText != undefined) {
         this._labelText = newText;
         this._label.setText(newText);
       }
     }
   
     public setValue(newVal: number): void {
       if (newVal != null && newVal != undefined) {
         this._value = newVal;
         this.updateText();
         this._seekbar.setProgress(newVal);
       }
     }
   
     public setMinValue(newMin: number): void {
       if (newMin != null && newMin != undefined) {
         this._seekbar.setMin(newMin);
       }
     }
   
     public setMaxValue(newMax: number): void {
       if (newMax != null && newMax != undefined) {
         this._seekbar.setMax(newMax);
       }
     }
   }
   

6. Save the MySlider.android.ts file.

7. In MySlider.ios.ts file, copy and paste the following code.

   import { View } from "tns-core-modules/ui/core/view";
   
   /**
    * IMPLEMENT THE IOS VERSION OF YOUR PLUGIN HERE
    */
   
   // This is a class that handles the native event callbacks
   class SliderHandler extends NSObject {
   
     //This handler function will be called whenever the slider's value is changed
     // i.e. whenever user drag the slider's handle
     public valueChanged(nativeSlider: UISlider, nativeEvent: _UIEvent) {
       nativeSlider.value = Math.round(nativeSlider.value);
       const owner: MySlider = (<any>nativeSlider).owner;
       if (owner) {
           owner.setValue(nativeSlider.value);
       }
     }
   
     //This handler function will be called when user let go of the handle
     // This is where we will trigger an event called "OnSliderValueChanged" to the MDK Extension Class
     public afterValueChanged(nativeSlider: UISlider, nativeEvent: _UIEvent) {
       nativeSlider.value = Math.round(nativeSlider.value);
       const owner: MySlider = (<any>nativeSlider).owner;
       if (owner) {
           owner.setValue(nativeSlider.value);
           var eventData = {
             eventName: "OnSliderValueChanged",
             object: owner,
             value: nativeSlider.value
           };
           owner.notify(eventData);
       }
     }
   
     public static ObjCExposedMethods = {
         "valueChanged": { returns: interop.types.void, params: [interop.types.id, interop.types.id] },
         "afterValueChanged": { returns: interop.types.void, params: [interop.types.id, interop.types.id] }
     };
   }
   
   const handler = SliderHandler.new();
   
    export class MySlider extends View {
     private _label;
     private _labelText = "";
     private _slider;
     private _layout;
     private _value = 0;
   
     private updateText() {
       this._label.text = this._labelText + "(" + this._value + ")";
     }
   
     public constructor(context: any) {
       super();
       this.createNativeView();
     }
   
     /**
      * Creates new native controls.
      */
     public createNativeView(): Object {
       //Create the Stack view - this is the main view of this extension
       this._layout = UIStackView.new();
       //Configuring the paddings around the stack view
       this._layout.autoresizingMask = UIViewAutoresizing.FlexibleWidth;
       this._layout.layoutMarginsRelativeArrangement = true;
       let inset = new NSDirectionalEdgeInsets();
       inset.top = 8; inset.leading = 16; inset.bottom = 8; inset.trailing = 16;
       this._layout.directionalLayoutMargins = inset;
       // Set the layout stacking to be vertical
       this._layout.axis =  UILayoutConstraintAxis.Vertical;
   
       //Create the label view
       this._label = UILabel.new();
       this._label.font = this._label.font.fontWithSize(15); //Set font size
       this._label.textColor = UIColor.colorWithRedGreenBlueAlpha(106/255,109/255,112/255,1.0); //Set text color
       this._layout.setCustomSpacingAfterView(4, this._label); //Set the bottom margin of label
   
       //Create the slider control
       this._slider = UISlider.new();
   
       //Assign a handler for whenever value changed i.e. when user is dragging the slider handle
       this._slider.addTargetActionForControlEvents(handler, "valueChanged", UIControlEvents.ValueChanged);
       //Assign a handler for when user let go of the handle
       this._slider.addTargetActionForControlEvents(handler, "afterValueChanged", UIControlEvents.TouchUpInside | UIControlEvents.TouchUpOutside);
   
       //Add the label and slider to the stack view
       this._layout.addArrangedSubview(this._label);
       this._layout.addArrangedSubview(this._slider);
   
       //store the native view
       this.setNativeView(this._layout);
   
       //return the stack view
       return this._layout;
     }
     /**
      * Initializes properties/listeners of the native view.
      */
     initNativeView(): void {
       // Attach the owner to nativeViews.
       // When nativeViews are tapped we get the owning JS object through this field.
       (<any>this._slider).owner = this;
       (<any>this._layout).owner = this;
       super.initNativeView();
     }
   
     /**
      * Clean up references to the native view and resets nativeView to its original state.
      * If you have changed nativeView in some other way except through setNative callbacks
      * you have a chance here to revert it back to its original state
      * so that it could be reused later.
      */
     disposeNativeView(): void {
         // Remove reference from native view to this instance.
         (<any>this._slider).owner = null;
         (<any>this._layout).owner = null;
   
         // If you want to recycle nativeView and have modified the nativeView
         // without using Property or CssProperty (e.g. outside our property system - 'setNative' callbacks)
         // you have to reset it to its initial state here.
     }
   
     //Must return the native view of the control for MDK FormCell and Section Extension
     public getView(): any {
       return this._layout;
     }
   
     public setText(newText: string): void {
       if (newText != null && newText != undefined) {
         this._labelText = newText;
         this._label.text = newText;
       }
     }
   
     public setValue(newVal: number): void {
       if (newVal != null && newVal != undefined) {
         this._value = newVal;
         this.updateText();
         this._slider.value = newVal;
       }
     }
   
     public setMinValue(newMin: number): void {
       if (newMin != null && newMin != undefined) {
         this._slider.minimumValue = newMin;
       }
     }
   
     public setMaxValue(newMax: number): void {
       if (newMax != null && newMax != undefined) {
         this._slider.maximumValue = newMax;
       }
     }
   }
   

8. Save the MySlider.ios.ts file.

9. In MySlider.ts file, copy and paste the following code.

   import { View } from "tns-core-modules/ui/core/view";
   
   export class MySlider extends View {
     public constructor(context: any) {
       super();
     }
     public getView(): any {
       return null;
     }
     public setText(newText: string): void {  
     }
     public setValue(newVal: number): void {
     }
     public setMinValue(newMin: number): void {
     }  
     public setMaxValue(newMax: number): void {    
     }
   }
   

10. Save the MySlider.ts file.

11. In index.ts file, copy and paste the following code.

    export { MySlider } from './MySliderPlugin/MySlider'
    

12. Save the index.ts file.

13. In package.json file, copy and paste the following code.

    {
      "name": "my-nativescript-plugin",
      "version": "1.0.0",
      "description": "SAP Mobile Development Kit (MDK) Client Extensions Example. ",
      "main": "index.js",
      "nativescript": {
        "platforms": {
          "ios": "5.2.1",
          "android": "5.2.1"
        },
        "tns-ios": {
          "version": "5.2.1"
        },
        "tns-android": {
          "version": "5.2.1"
        }
      },
      "scripts": {
        "test": "test"
      },
      "author": "SAP"
    }
    

14. Save the package.json file.

tns-android.version: Specifies the version of the Android runtime. If the property is missing, the latest version of the runtime will be added on the first run or build for Android.

tns-ios.version: Specifies the version of the iOS runtime. If the property is missing, the latest version of the runtime will be added on the first run or build for iOS.