Page Control Extension

The extension class for a Page Control Extension must extend the IControl interface.

The return value of the view() method can be one of the following type:

• A subclass of a NativeScript View for Extension Control. You can design a plugin that extends the NativeScript View to have a custom native implementation for each platform. See NativeScript Building Plugins
• A subclass of a native view (i.e. a subclass of UIView for iOS or android.view.View for Android). In the latter case, the viewIsNative() must be overridden to return true.

Example

// MyExtensionControl.ts Example
import * as app from 'tns-core-modules/application';
import { BaseObservable } from 'mdk-core/observables/BaseObservable';
import { Color } from 'tns-core-modules/color';
import { IControl } from 'mdk-core/controls/IControl';
import { Label } from 'tns-core-modules/ui/label';

export class MyExtension extends IControl {
  private _label: any;
  private _observable: BaseObservable;
  private _value: any;

  public initialize(props) {
    super.initialize(props);
    if (this.definition().data.ExtensionProperties.Prop1) {
      this._value = this.definition().data.ExtensionProperties.Prop1.Value;
    }
    else {
      this._value = "Default Value";
    }
    const color = new Color('gray');
    this._label = new Label();
    this._label.backgroundColor = color;
  }

  public view() {
    //Use provided ValueResolver to resolve value to support bindings, rules, etc in your extension
    this.valueResolver().resolveValue(this._value).then((resolvedValue)=> {
      this._label.text = resolvedValue;
    });
    return this._label;
  }

  public viewIsNative() {
    return true;
  }

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

  public setValue(value: any, notify: boolean): Promise<any> {
    this._value = value;
    this._label.text = value;
    return Promise.resolve();
  }

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

  get isBindable(): boolean {
    return true;
  }

  public bind(): Promise<any> {
    return this.observable().bindValue(this._value);
  }
}

---

Last update: April 17, 2024