UI of this project has also other views that were described in other demo projects, for example, in Offer Management used as the prototype. If you want to still use those views, you have to update them to reflect the assignment of resources to service users. You can also create a view for service users.
In this document:
To use Biz API in the views that may require additional resources, for every that view add the placeholder to plug
in the Biz API module. For this purpose, in the APP-META.xml
file, inside the view declaration, add the following:
<plugin-placeholder id="http://www.aps-standard.org/core/package#biz"/>
The following sections walk you through updates of the views developed in the previous Offer Management project:
ui/servers.js
- displays a grid with VPS properties and starts operations over selected VPSes.
ui/vps-wizard.js
- the VPS creation wizard.
ui/wizard/server-new-1.js
and ui/wizard/server-new-last.js
- the first and last steps in
the VPS creation wizard.
ui/server-edit.js
- the VPS editor.
In the ui/servers.js
file, the “VPS Owner” column must appear in the list of servers. For this purpose,
in the grid column definition, add a new column:
{
field: "userName",
name: "VPS Owner",
filter: true
}
The main way to add a APS is through the user creation wizard developed in the New Users step. However, if someone needs to run the VPS creation wizard as used to do in the Offer Management project then you should modify that wizard. The latter can run from the application main service view, that is the VPS list, or from a user profile in the user manager.
Update the ui/vps-wizard.js
file as follows.
Make the onNext
handler add the user ID to the data passed to the next view in a case, when the wizard is
called from the user manager.
onNext: function() {
/* Direct a user to the first view */
var data = { "subscriptionId": subscriptionId };
if (aps.context.params.userId) { // If we've come here from the User Manager
data["userId"] = aps.context.params.userId;
}
aps.apsc.next(data);
}
In the onSubmit
handler, use the high level APS Biz commit method:
onSubmit: function() {
/* Specify the subscription whose resource will be used */
aps.context.subscriptionId = subscriptionId;
when(aps.biz.commit(),
function() {
aps.apsc.gotoView("servers");
},
displayError
);
}
The UI logic in this step is considerably more complex as compared with the predecessor. You can download the
ready to use file ui/wizard/server-new-1.js
and edit it as needed.
The last step of the wizard /ui/wizard/server-new-last.js
does not require any updates.
VPS editor ui/server-edit.js
does not require any updates unless you do not want to change the VPS owner.
As compared with a customer administrator, when service users log in to the control panel
(often called MyCP for service users),
they can see and manage only resources assigned to them. In metadata, you have added only one
view ui/myservers.js
to the navigation tree plugged into the service user control panel.
You can clone the existing servers.js
source to the new myservers.js
file
and then modify the latter as follows.
Copy the servers.js
file to myservers.js
. Then open myservers.js
in a text editor.
To call custom operations through an xhr
request, add the module implementing the request:
In the define
list, add the "aps/xhr"
string.
In the main call-back function, add the xhr
argument.
Simplify the grid by removing unneeded components from the aps/Grid
definition.
apsResourceViewId:"server-edit"
in the list of common grid properties
The type:"resourceName"
declaration
The whole column where field:"userName"
is declared
This removes the ability to start editing a server and removes the column that would display the same user name in all table raws.
Update the changeState
function to use the custom operations start
and stop
for the following
reasons. First, you will use (at last!) a correct way of processing the states instead of the simplified changes
of the state
property. Second, a service user is not the owner of an assigned resource, but rather a referrer
whose default permissions do not allow
changing resource properties directly.
For this purpose, modify the button handlers and the changeState
function as follows.
Use the following button handlers instead of their current definition:
var stop = function() {
changeState("stop", this);
};
var start = function() {
changeState("start", this);
};
In the changeState
function, replace the when(store.put(vps)...
function with the one
that calls the xhr
method:
when(xhr("/aps/2/resources/" + vpsId + "/" + state, { method: "GET" }),
/* If success, process the next VPS until the list is empty */
function(){
console.log("State of VPS with id = [" + vpsId + "] changed");
sel.splice(sel.indexOf(vpsId),1);
self.grid.refresh();
if (--counter === 0) { btn.cancel(); } /* Remove busy state for button */
},
/* If failure, call the error handler */
function(e){
displayError(e);
if (--counter === 0) { btn.cancel(); }
}
);
With this step, you have completed development of the APS application.
The project files you have created are similar to the respective files in the
sample package
.
Follow the next steps to test the application functionality.