JavaScript Extension Development API for Oracle Visual Builder Cloud Service - Classic Applications

Class: components.dt/js/spi/registration/PropertyInspectorProvider

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.

  • 16.3.5

An example of a component property inspector provider.

], function (
) {
  '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 () {
        'beforeDeactivate': function () {
          return sharedModel.canClosePropertyInspector();
        'deactivate': function () {

  // 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();


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.

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 PropertyInspectorProvider was registered, so the viewType must be always checked.

  • 16.3.5

property inspector instance for the given view or undefined if the component does not provide any for the view.

components.dt/js/spi/propertyinspectors/PropertyInspector | undefined