Version:

• 16.3.5

Source:

• components.dt/js/spi/creators/PopupCreator.js, line 185

Examples

HTML markup for the popup

<div>
  <label for="componentdropCustomizer-label">Text</label>
  <input id="componentdropCustomizer-label" type="text"
      placeholder="Enter Text" data-bind="ojComponent: {
          component: 'ojInputText',
          value: text
  }">
</div>
<div>
  <button data-bind="ojComponent: {
      component: 'ojButton',
      label: 'Finish'
  }, click: finish">
  </button>
  <button data-bind="ojComponent: {
      component: 'ojButton',
      label: 'Cancel'
  }, click: cancel">
  </button>
</div>

How to use popup creators

define([
    'components.dt/js/spi/creators/CreatorType'
    'components.dt/js/spi/creators/DropPopupController',
    'text!mycomponent/templates/popup.html
], function (CreatorType, DropPopupController, popupMarkup) {

    'use strict';

    var MyCreator = function () {
        // constructor init
    };

    MyCreator.prototype.getType = function () {
        return CreatorType.POPUP;
    };

    MyCreator.prototype.createView = function (activePage, container, createContext) {
        // the method creates a default view with default properties.
        var componentFactory = ComponentFactory.create(activePage);
        // set the default view's property value
        var properties = {
            text: 'Default Text'
        };

        // the method should take createContext into account and fill as
        // many properties as possible to make the view complete because
        // when called through the Component Creator API the popup will
        // not be raised.
        if (createContext && createContext.text) {
            properties.text = createContext.text;
        }

        var view = componentFactory.createView({
            type: 'org.my.myComponent',
            properties: properties,
            displayName: 'My Component'
        });
        return view;
    };

    MyCreator.prototype.getDropPopupController = function (view) {
        // right after the view is created the infrastructure calls this method
        // to get an instance of DropPopupController providing the html markup,
        // view model and the callback implementation for the popup.
        var myPopupViewModel = this._createModel();
        var customizer = new MyCreator.MyDropCustomizer(view, myPopupViewModel);

        // create an instance of DropPopupController with required popup model and markup.
        var controller = new DropPopupController(myPopupViewModel, popupMarkup, customizer);

        // attach a finish handler to your model and dismiss the popup
        // when the model says so using an API finish method.
        myPopupViewModel.finishHandler = function (result) {
            controller.finish(result);
        };
        return controller;
    };

    MyCreator.prototype._createModel = function () {
        var model = {
            text: ko.observable(),
            finishHandler: undefined,
            finish: function () {
                this.finishHandler(true);
            },
            cancel: function () {
                this.finishHandler(false);
            }
        };
        return model;
    };

    MyCreator.prototype.getOptions = function () {
        return {
            // the creator is expected to create only one type of view: org.my.myComponent
            possibleGeneratedViewTypes: ['org.my.myComponent'],
            // min width of the component will be 2 columns
            minWidth: 2
        };
    };

    var MyDropCustomizer = function (view, model) {
        this._view = view;
        this._model = model;
    };

    MyDropCustomizer.prototype.opened = function () {
        // you can do something useful here
    };

    MyDropCustomizer.prototype.closed = function (accepted) {
        if (accepted) {
            // popup was accepted and closed, let's update view properties
            this._view.getProperties().setValue('text', this._model.text());
        }
        // do not forget to return a promise resolving to the view instance
        return Promise.resolve(this._view);
    };

    MyCreator.MyDropCustomizer = MyDropCustomizer;

    return MyCreator;

});