new components.dt/js/spi/propertyinspectors/PropertyInspector(tabs, controlleropt)
stable API
A PropertyInspector is a description of how properties of a component can be configured.
UI for component configuration is displayed in a panel called Property Inspector (PI), which can contain several tabs, and usually contains at least one tab called 'Properties'. Each of the tabs contains one Knockout template with a view model applied. View models can be shared by several tabs, or each tab can have a dedicated view model.
When some settings are changed in some of the tabs, the view (for which the PI is opened) should be updated accordingly as soon as possible. (This is most often arranged by updating view's properties.)
Note: There are several standard PI tab names used in default set of ABCS components. They can be retrieved from TabNames object to avoid typos and repetition.
A property inspector can be created inside a components.dt/js/spi/registration/PropertyInspectorProvider. See example below.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
tabs |
Array.<components.dt/js/spi/propertyinspectors/PropertyInspector.Tab> | Array of tab definitions. |
|
controller |
components.dt/js/spi/propertyinspectors/PropertyInspector.Controller |
<optional> |
PI controller. |
- Version:
- 16.3.5
- Source:
Examples
Implementation for two tabs:
define([
'components.dt/js/spi/propertyinspectors/PropertyInspector',
'components.dt/js/spi/propertyinspectors/TabNames',
'text!path/to/mycomponent/mycomponent_pi_data.html',
'text!path/to/mycomponent/mycomponent_pi_properties.html'
], function (
PropertyInspector,
TabNames,
piDataTemplateHtml,
piPropertiesTemplateHtml
) {
'use strict';
var MyPropertyInspectorProvider = function () {
}
MyPropertyInspectorProvider.prototype.getPropertyInspector = function (view) {
if (view.getType() !== 'THE_SUPPORTED_VIEW_TYPE') {
return null;
}
var sharedModel = this._getPIModel(view);
return new PropertyInspector(
[
{
id: 'properties',
title: TabNames.TAB_PROPERTIES,
model: sharedModel,
html: piPropertiesTemplateHtml
},
{
id: 'data',
title: TabNames.TAB_DATA,
model: sharedModel,
html: piDataTemplateHtml
}
],
{
activate: function () {
sharedModel.start();
},
beforeDeactivate: function () {
return sharedModel.canClosePropertyInspector();
},
deactivate: function () {
sharedModel.end();
}
}
});
// Create Knockout view model for PI for the component view.
//
// (Model in this example is shared by all PI tabs, but we could also
// create dedicated model for each tab.)
//
MyPropertyInspectorProvider.prototype._getPIModel = function (view) {
var model = {};
model.myText = ko.observable(view.getProperties().getValue('my_text'));
model.myText.subscribe(function (value) {
view.getProperties().setValue('my_text', value);
});
model.message = ko.observable();
model.now = ko.observable();
// + some model properties for 'Data' tab.
model.canClosePropertyInspector = function () {
var res = !model.myText() || model.myText().length === 3;
model.message(res ? '' : 'Text must be empty or 3 chars long');
return res;
};
model.start = function () {
model.intervalId = window.setInterval(function () {
model.now(new Date())
}, 1000);
};
model.end = function () {
window.clearInterval(model.intervalId);
}
return model;
}
return new MyPropertyInspectorProvider();
});Example Knockout template in file with path path/to/mycomponent/mycomponent_pi_properties.html. The template can be loaded as RequireJS dependency with prefix 'text!', see example above.
<div>
<div data-bind="text: now"></div>
<div>
Text: <input type="text" data-bind="value: myText">
</div>
<div data-bind="text: message"></div>
</div>Object Literals
- components.dt/js/spi/propertyinspectors/PropertyInspector.Controller
- components.dt/js/spi/propertyinspectors/PropertyInspector.Tab