The SmartComponent Library NG2 Widget API provides ABL-like manipulation of inputs displayed on the screen, exposing typical widget properties:

SENSITIVE
VISIBLE
HIDDEN
SCREEN_VALUE
INPUT_VALUE
BGCOLOR
FGCOLOR

Usage

HTML Markup

<input type="text" id="inputCustNum" name="CustNum" class="form-control />
<smart-combo-editor
	smart-value-list="Demo-Color"
	name="Color"
	[(smartModel)]="selected.Color">
	id="colorComboEditor">
</smart-combo-editor>

Typescript

constructor(private facadeFactory: WidgetFacadeFactory) { }
 
ngOnInit() {
	this.facadeFactory.GetFacade('CustNum').then((facade: IWidgetFacade) => {
		if (facade.SENSITIVE) {
			facade.SCREEN_VALUE = '42';
		}
	});
 
	this.facadeFactory.GetFacade('Color').then((comboFacade: IWidgetFacade) => {
		//set colors just as you would using CSS
		comboFacade.BGCOLOR = 'red'; 
		comboFacade.FGCOLOR = 'white';
 
		//or use the ABL Color Table!
		comboFacade.BGCOLOR = 3;
	});
}

If the inputs you are requesting widget facades for are part of a Smart Viewer, then they should be referenced as viewerName.tableName.inputName.

For example, if the CustNum input described in the above HTML block were part of a Smart Viewer named "customerViewer", then it should be referenced in the following manner:

	this.facadeFactory.GetFacade('customerViewer.eCustomer.CustNum').then((facade: IWidgetFacade) => {
		if (facade.SENSITIVE) {
			facade.SCREEN_VALUE = '42';
		}
	});

Obtaining a Reference to the underlying Component/Input element

this.facadeFactory.GetFacade('customerViewer.eCustomer.SalesRep').then((facade: IWidgetFacade) => {
     const salesrepLookup: SmartLookupComponent = facade.getComponentInstance<SmartLookupComponent>();
     // use the SalesRep Smart Lookup programmatically here
});

Using the ABL Color Table Service

The Color Table Service allows you to override the default colour table by adding new colors and replacing the whole table. It also provides a way to translate stored color definitions to RGB CSS strings, should you need it. For more information on the methods that the Color Table Service provides, please see the API reference.

Obtaining a reference to the Colour Table Service

import { ColorTableService } from '@consultingwerk/smartcomponents-core';
 
...
 
constructor(private colorTable: ColorTableService, private facadeFactory: WidgetFacadeFactory) { }
 
ngOnInit() {
  this.colorTable.addColorToMap([0,0,128]);
  this.facadeFactory.GetFacade('customerViewer.eCustomer.CustNum').then((facade: IWidgetFacade) => {
		facade.BGCOLOR = 5;
  });
}