Component Development

An Servoy component is just an Angular component read this to get a bit familiar with angular component development.

Also read this to get more overview how a conversion of NG1 to TiNG component works, but that also explains more what the basic are of a Servoy Component.

Servoy components has the a component annotation as below:

@Component({
    selector: 'bootstrapcomponents-textbox',
    templateUrl: './textbox.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})

The selector should always be what the name is in the spec file of that component: "name": "bootstrapcomponents-textbox",

The templateUrl can be anything, it can also be an inline template if needed.

For Servoy Components the change detection can always just be OnPush this is a performance enhancement and we always just use push and the system will mark the forms dirty as needed. This does mean that for nested components or stuff that come from outside of servoy that you have to use ChangeDetectorRef

Components should always extend the ServoyBaseComponent to get a basic integration into the Servoy system.

The model properties defined in the spec of a component are just the basic @Input properties of angular

@Input() format: Format;
@Input() inputType: string;
@Input() autocomplete: string;
@Input() styleClassForEye: string;

Properties that can change and want to push the value back to the server should be using the angular @Output which is then an EventEmitter

@Output() inputTypeChange = new EventEmitter();

this.inputTypeChange.emit(this.inputType);

The api of a component (as defined in the spec) are just public functions on a Component

requestFocus(mustExecuteOnFocusGainedMethod: boolean) {
    this.mustExecuteOnFocus = mustExecuteOnFocusGainedMethod;
    this.getFocusElement().focus();
}

Every component gets already its name thought the ServoyBaseComponent but also the ServoyApi object which has a lot more information like formname but also its unique markupid.