Application Packaging Standard

Last updated 18-Mar-2019

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");
    
Wizard