Skip to content

Form Cell Extension

The extension class for a Form Cell Extension must extend the IControl or IView interface.

If the life-cycle calls through is not needed for the extension class, it may inherit from the IView interface.

The return value of the view() method must be a subclass of a native view (i.e. a subclass of UIView for iOS or android.view.View for Android) for section/table and form cell extensions. The viewIsNative() must also be overridden to return true.

Example

{
  "Class": "MyFormCellExtension",
  "Module": "MyFormCellExtension",
  "ExtensionProperties": {
    "Prop1": {
      "Value": "Value for this extension"
    },
    "Event1": "/AssetWorkManager/Actions/Messages/Message2.action",
    ...
  },
  "_Type": "Control.Type.FormCell.Extension"
}

In /app/extensions/controls/MyFormCellExtension.ts:

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';

export class MyFormCellExtension extends IControl {
  private _control: 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;
    }
    const color = new Color('lightgray');
    if (app.ios) {
      this._control = UITextField.alloc().init();
      this._control.backgroundColor = color.ios;
    } else {
      this._control = new android.widget.EditText(this.androidContext());
      this._control.setBackgroundColor(color.android);
    }
  }

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

  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;
    if (app.ios) {
      this._control.text = value;
    } else {
      this._control.setText(value);
    }
    return Promise.resolve();
  }

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

Last update: August 12, 2020