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.

  • 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. Not required if Extension does not implement 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);
  }
}