Offer Editor

Evidently, the provider must be able to edit offers.

Overview

This view is called from the offers view when clicking on an offer name. The JavaScript code in offer-edit.html must perform the following operations:

• It defines two fieldsets, one containing offer name and description fields and the other one containing sliders for setting limits on VPS properties: number of CPU cores, disk space, and RAM space.

• The script defines the actions on Cancel and on Submit.

Continue Your Demo Project

This section continues the demo project from the previous step.

When creating the offer-edit.html file from scratch, keep in mind the Typical Structure of View File and follow these steps.

1. Once the HTML structure is created as presented earlier, create the structure of the main script:

   require([
      "dijit/registry",
      "dojo/when",
      "dojox/mvc/getPlainValue",
      "dojox/mvc/at",
      "dojox/mvc/getStateful",
   
      "aps/ResourceStore",
      "aps/load",
   
      "./displayError.js",
   
      "aps/ready!"
   ], function (
      registry,
      when,
      getPlainValue,
      at,
      getStateful,
   
      Store,
      load,
   
      displayError
   ) {
      /* Declare data sources */
      var store = new Store({
            apsType:    "http://aps-standard.org/samples/offer1p/offer/1.0",
            target:     "/aps/2/resources/"
         }),
         model;
   
      store.get(aps.context.vars.offer.aps.id)
      .then(function(object) {
         model = getStateful(object);
   
         var widgets =
               [
               /* ... Create widgets */
               ];
         return load(widgets);
      }).then(function(){
         /* ...Create handlers for the navigation buttons */
      }).otherwise(displayError);
   });
   

   Since the offer variable was declared in the navigation tree for the offer-edit view, it is possible to use the store.get(aps.context.vars.offer.aps.id) function in the code above to get the offer presentation by its APS ID.

2. Declare widgets:

   var widgets = [
      "aps/PageContainer", {id: "page"}, [
         ["aps/FieldSet", {id: "offerEdit_general", title: true}, [
            ["aps/TextBox", {
               id: "offerEdit_offerName",
               label: "Offer Name",
               value: at(model, "name"),
               required: true
            }],
            ["aps/TextBox", {
               id: "offerEdit_description",
               label: "Description",
               value: at(model, "description")
            }]
         ]],
         ["aps/FieldSet", {id: "offerEdit_props", title: true}, [
            ["aps/Slider", {
               id: "offerEdit_cpu",
               label: "CPU Number",
               minimum: 1,
               maximum: 16,
               value: at(model.hardware.CPU, "number"),
               step: 1
            }],
            ["aps/Slider", {
               id: "offerEdit_disk",
               label: "Disk Space",
               minimum: 1,
               maximum: 100,
               value: at(model.hardware, "diskspace"),
               legend: "GB", step: 1}],
            ["aps/Slider", {
               id: "offerEdit_ram",
               label: "RAM",
               minimum: 128,
               maximum: 8192,
               value: at(model.hardware, "memory"),
               step: 128,
               legend: "MB"
            }]
         ]]
   ]];
   

3. Define handlers for the navigation buttons.

   • Cancel button:

     aps.app.onCancel = function() {
         aps.apsc.gotoView("offers");
     };
     

   • Submit button:

     aps.app.onSubmit = function() {
         var page = registry.byId("page");
         if (!page.validate()) {
            aps.apsc.cancelProcessing();
            return;
         }
         when(store.put(getPlainValue(model)),
            function(){ aps.apsc.gotoView("offers"); },
            displayError
         );
     };
     

Conclusion

This completes the development of a view for editing a VPS offer.

The project file you have created is similar to the respective file in the sample package.

← Offer Creation

VPS Management →