Popup View

Popup view is used as an interaction view that pop-ups temporarily to capture the user`s attention for an immediate decision.

A popup view structure is similar to the structure of an ordinary view. Each of the following methods that you can define in a popup view is optional:

• init

• onShow

• onContext

• onHide

• onCancel

• onSubmit

A popup view closes when you click either, one of the navigation buttons or any area outside of the view.

Meta Declaration

Popup views must be declared in a navigation tree, for example:

<popup id="viewInPopup" label="Register New Domains" src="ui/RegisterDomains.js">
     <controls>
          <submit label="Checkout"/>
          <cancel label="Cancel"/>
     </controls>
</popup>

Note

A <popup> element must be declared directly under a <navigation> element.

Definition

When called, a popup view returns a Dojo Promise object. The view code normally contains definition of the onCancel and onSubmit handlers.

define([
    "dojo/_base/declare",
    "aps/PopupView"
], function (declare, PopupView) {
    return declare(PopupView, {
    size: "md";
    /* Data processing */
    ...

    /* On Cancel handler */
    onCancel: function(){
      ...
      this.cancel(<returnedObject>);
    },
    /* On Submit handler */
    onSubmit: function(){
      ...
      this.submit(<returnedObject>);
    },
    /* Other stuff - as in an ordinary view */
    ...
});

• A popup view cannot use the shared aps.app object.

• It is not possible to refer to a popup view using a direct link.

• A popup view can call aps.apsc.gotoView to direct a user to another view.

• Popup views inherit the size property from the aps/PopupView module. Possible values are: “sm” (small), “md” (medium), or “lg” (large). The default value is “lg”. A view can set its size in declaration as shown in the above code. Also, it is possible to change it dynamically, for example:

  this.set("size","md");
  

Popup Call

To call a popup view, use the aps.apsc.showPopup method. The usage is similar to the aps.apsc.gotoView call.

aps.apsc.showPopup({
    viewId: <id>,
    resourceId: <resourceId>,
    params: <param object>,
    modal: <isModal>
})
// callbacks
.then(
    // success callback
    function({ btnType: <"submit" | "cancel">, data: <returnedDataObject> }) {
        //do something
    },
    // error callback
    function(<errorObject>) {
        //do something
    }
);

• Returned button type (btnType argument in the example) can be either “submit” or “cancel”.

• The data argument in the example is the returned Dojo promise object.

• It is possible to require visual effects when calling the showPopup method by using the modal argument. In this case, the popup background will be grey and the view will be animated.

← Wizard

Controls →