Evidently, the provider must be able to edit offers.
In this document:
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.
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.
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.
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"
}]
]]
]];
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
);
};
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
.