Skip to content

Extension

This control renders a custom control extension.

All Common Control Properties are supported.

When assigning a rule to a property of Extension, the rule will be passed an instance of the following proxy class as an argument:

Extension Properties

Property Type Required
Class string Yes
Control string No
DataSubscriptions DataSubscriptions No
ExtensionProperties object No
Module string No
OnPress ActionOrRule No
_Name string No
_Type const Yes

Class

The name of the exported class in the module control that is to be used for the extension. On iOS, if no TS module is implemented, the native extension class targeted by this property must be declared as public to ensure proper lifecycle management.

  • type: string

Control

The name of the file under the controls folder in your module. e.g. MyExtension, if your file name is /extensions/<Module>/controls/MyExtension.ts. If not specified, module name would be used as the value for this property.

  • type: string

DataSubscriptions

Array of data change events to subscribe to.

ExtensionProperties

Additional custom properties to be passed to the extension

  • type: object

Module

The module's folder path under /extensions/, e.g. MyExtModule or MyExtLibrary/MyExtModule. On iOS, this property is optional, as the platform supports omitting TS code under /extensions/<Module>/controls.

  • type: string

OnPress

Action/Rule to be triggered when the control extension is pressed.

_Name

UID to reference this control

  • type: string

_Type

  • type: const

The value of this property must be:

"Control.Type.Extension"

Examples

Extension in a Page

{
  "Caption": "Extension Example",
  "_Type": "Page",
  "_Name": "ExtensionExamplePage",
  "Controls": [{
    "_Type": "Control.Type.Extension",
    "_Name": "ExtensionExample",
    "Module": "MyExtModule",
    "Control": "MyExtControl",
    "Class": "MyExtension",
    "ExtensionProperties": {
      "Prop1": {
        "Value": "My Sample Extension Display Value"
      }
    },
  }]
}

Extension Implementation

// MyExtControl.ts Example
import * as app from '@nativescript/core/application';
import { BaseObservable } from 'mdk-core/observables/BaseObservable';
import { Color } from '@nativescript/core/color';
import { IControl } from 'mdk-core/controls/IControl';
import { Label } from '@nativescript/core/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);
  }
}