Offer Creation

Develop a view that the provider will use to add an offer.

Overview

The offer-new view is called from the offers view, when a user clicks the New button. The view controls the offer creation process. A JavaScript code in offer-new.html must perform the following operations:

• It defines some widgets needed for setting a new offer. Initially, it proposes default values for it using the newoffer.json file.

• When a user clicks Cancel, it forwards the user back to the offers view. On Submit click, it saves the new offer and then proceeds to the offers view.

Continue Your Demo Project

This section continues the demo project from the previous step.

When creating the ui/offer-new.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 in the previous step, create the structure of the main script:

   require([
      "dojo/when",
      "dijit/registry",
      "dojox/mvc/getPlainValue",
      "dojox/mvc/at",
   
      "aps/ResourceStore",
      "aps/WizardData",
      "aps/load",
      "aps/Memory",
   
      "./displayError.js",
   
      "dojo/text!./newoffer.json",
   
      "aps/ready!"
   ], function (
      when,
      registry,
      getPlainValue,
      at,
   
      Store,
      wd,
      load,
      Memory,
   
      displayError,
   
      newOffer
      ) {
         /* Declare the data sources */
         var store = new Store({
               apsType:   "http://aps-standard.org/samples/offer1p/offer/1.0",
               target:    "/aps/2/resources/" + aps.context.vars.cloud.aps.id + "/offers"
            }),
            model = JSON.parse(newOffer),
            oses = new Memory({
            /* ...List of operating systems for selecting one for the offer */
            });
   
         var widgets =
            [
            /* ...Create widgets here */
            ];
         load(widgets).then(function(){
         /* ...Once the widgets are initialized, create handlers for the navigation buttons */
      });
   });
   

   In the code, we use the following data sources:

   • The store object will interact with the APS controller for creating an offer based on the specified APS type. The offer must be linked with the application root resource (cloud) whose presentation is passed by the cloud variable (aps.context.vars.cloud) declared in the navigation tree earlier. The offers link collection is used for linking the cloud resource with offers. The store declared this way will work only with the offers linked with the cloud resource of the current APS application instance.

   • The model object will be used internally for syncing offer properties with widgets. Initially, it will accept the default properties from the newoffer.json file defined earlier and sync them with the widgets.

   • The oses object contains a list of operating systems that will be proposed to a user in a selection list.

2. Define the list of operating systems:

   oses = new Memory({
      idProperty: "value",
      data: [
         { value: "centos7", label: "CentOS 7" },
         { value: "debian", label: "Debian" },
         { value: "windows2008", label: "Windows 2008 Server" },
         { value: "windows2012", label: "Windows 2012 Server" }
      ]
   });
   

3. Create and load widgets:

   var widgets =
      ["aps/PageContainer", { id: "page"}, [
         ["aps/FieldSet", {id: "offerNew_general", title: true}, [
            ["aps/TextBox", {
               id: "offerNew_offerName",
               label: "Offer Name",
               value: at(model, "name"),
               required: true
            }],
            ["aps/TextBox", {
               id: "offerNew_description",
               label: "Description",
               value: at(model, "description")
             }]
         ]],
         ["aps/FieldSet", {id: "offerNew_props", title: true}, [
            ["aps/Select", {
               id: "offerNew_os",
               label: "OS",
               value: at(model.platform.OS, "name"),
               store: oses
            }],
            ["aps/Slider", {
               id: "offerNew_cpu",
               label: "CPU Number",
               minimum: 1,
               maximum: 16,
               value: at(model.hardware.CPU, "number"),
               step: 1
            }],
            ["aps/Slider", {
               id: "offerNew_disk",
               label: "Disk Space",
               minimum: 1,
               maximum: 100,
               value: at(model.hardware, "diskspace"),
               legend: "GB",
               step: 1
            }],
            ["aps/Slider", {
               id: "offerNew_ram",
               label: "RAM",
               minimum: 128,
               maximum: 8192,
               value: at(model.hardware, "memory"),
               step: 128,
               legend: "MB"
            }]
         ]]
      ]];
   load(widgets)  // Followed by function *then()*
   

   The aps/Select widget gets a list of OSes from the local store oses. The values of all widgets are synced with model.

4. Once the widgets are loaded, define handlers for processing the standard navigation buttons.

   • Cancel button:

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

     It returns the user back to the list of 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");
            },
            function(err) {
               displayError(err);
            }
         );
     };
     

     This handler will store the new offer in the APS database and then pass control to the list of offers.

Conclusion

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

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

← Offers List

Offer Editor →