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.
In this document:
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.
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");
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
}
);
showPopup
method by using the modal
argument.
In this case, the pop-up background will be grey and the view will be animated.