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

Metadata

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"/>

Views in Administration Customer Control Panel

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.

Servers List

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
}

VPS Creation Wizard

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.

1. 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);
   }
   

2. 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
      );
   }
   

First Wizard Step

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.

Last Wizard Step

The last step of the wizard /ui/wizard/server-new-last.js does not require any updates.

VPS Editor

VPS editor ui/server-edit.js does not require any updates unless you do not want to change the VPS owner.

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 file and then 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 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(); }
         }
     );
     

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 →