Pop-up View

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

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

• init
• onShow
• onContext
• onHide
• onCancel
• onSubmit

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

Meta Declaration

Pop-up 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 pop-up 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 pop-up view cannot use the shared aps.app object.

• It is not possible to refer to a pop-up view using a direct link.

• A pop-up 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 pop-up 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 pop-up background will be grey and the view will be animated.

← Wizard

Controls →