Other Views

UI of this project has also other views that were described in other demo projects, for example, in Offer Management used as the prototype. You can update those UI views for customer administrators to reflect the assignment of resources to service users. You can also create a view for service users.

Views in Administration Customer Control Panel

You can either develop such views or download them from the sample package:

• 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.

Servers List in Service User Control Panel

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 source and modify the latter as follows.

1. Copy the servers.js file to myservers.js. Then open myservers.js in a text editor.

2. 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.

3. 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.

4. Update the changeState function to use the custom operations start and stop instead of direct update of the state property. This is caused by the fact that 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 reason, 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",  handleAs: "text"}),
          /* 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(); }
         }
     );
     

Conclusion

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.

← User Profile

Deployment →