Skip to content


This control renders a custom control extension.

All Common Control Properties are supported.

Extension Properties

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


The name of the exported class in the module control that is to be used for the extension.

  • type: string


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


Array of data change events to subscribe to.


Additional custom properties to be passed to the extension

  • type: object


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


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


UID to reference this control

  • type: string


  • type: const

The value of this property must be equal to:



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) {
    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(),;
    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);