Provider interface for returning instances of components' view property inspectors. Registers into ABCS with the Component Registration API.
Property inspector is part of the ABCS designer and serves as the customization UI for existing component views. Property inspector is bound to a view it understands and lets users change its properties and behaviour in the UI.
If you want to give users a chance to modify your component or its views implement this interface and return an instance of PropertyInspector in PropertyInspectorProvider.getPropertyInspector.
When opening a property inspector for a view ABCS iterates over registered
providers and opens the first property inspector returned from
PropertyInspectorProvider.getPropertyInspector.
That means your provider may be asked to return a property inspector for
an unrelated view in which case you are to return undefined
and ABCS will continue searching for the proper property inspector.
- Version:
- 16.3.5
- Source:
- See:
Example
An example of a component property inspector provider.
define([
'components.dt/js/spi/propertyinspectors/PropertyInspector',
'components.dt/js/spi/propertyinspectors/TabNames',
'text!path/to/mycomponent/mycomponent_pi_properties.html'
], function (
PropertyInspector,
TabNames,
piTemplateHtml
) {
'use strict';
var MyPropertyInspectorProvider = function () {
}
MyPropertyInspectorProvider.prototype.getPropertyInspector = function (view) {
if (view.getType() !== 'THE_SUPPORTED_VIEW_TYPE') {
return undefined;
}
var sharedModel = this._getPIModel(view);
return new PropertyInspector(
[
{
'id': 'properties',
'title': TabNames.TAB_PROPERTIES,
'model': sharedModel,
'html': piTemplateHtml
}
],
{
'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().getProperty('my_text'));
model.myText.subscribe(function (value) {
view.getProperties().setProperty('my_text', value);
});
model.message = ko.observable();
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 () {
// do whatever initialization you feel necessary
};
model.end = function () {
// do whatever cleanup you need here
}
return model;
}
return new MyPropertyInspectorProvider();
});Methods
getPropertyInspector(view) → {components.dt/js/spi/propertyinspectors/PropertyInspector|undefined}
stable API
Gets custom property inspector for the component.
By returning undefined value you are saying that the view
type is not related to your component, or that your component does not
provide any PI.
Parameters:
| Name | Type | Description |
|---|---|---|
view |
pages.dt/js/api/View | View for which the property
inspector is going to be opened. The view may be completely unrelated to
the component for which this |
- Version:
- 16.3.5
- Source:
Returns:
property inspector instance for the given view or undefined
if the component does not provide any for the view.
- Type
- components.dt/js/spi/propertyinspectors/PropertyInspector | undefined