Environment Functions

6.4.1 Functions for customizing inputs in the Environments page.

The vc_functions.js library contains functions that can be used to customize the behavior and data-modeling capabilities of HTML inputs.

6.4.2 Tabular Data

In some cases, you may want to create a set of data objects for which there may be multiple instances. For example, each environment may have multiple storage objects. To create a set of data objects:

Create the inputs and wrap them all within the same containing element. Give that element an ID. For each input, make sure the name attribute matches its ID attribute. (radio buttons are the only exception to this rule).
Create a <table> tag and set an attribute called 'getsDataFrom' with a value of the id of the input wrapper div from step 1. For example, in the standard create_vc.html page, there is an <ol> tag that looks like this:
```
<ol id="storageInputs">
```
and there is a table tag that looks like this:
```
<table id="storageTable" class="striped" getsDataFrom="storageInputs" border="1" width="85%"> </table>
```
This indicates that when the fields for storageInputs are saved, they get saved into the storageTable table.
Add a button or link with an onclick event handler that calls the function saveJSON and passes it the ID of your input container element. In the standard create_vc.html page this is done like this:
```
<div class="buttons">
	<button class="button" type="button" onclick="saveJSON('storageInputs')">
	<img src="../images/add-VM-22.png"/>Add Storage
	</button>
</div>
```
This button will attempt to save all the inputs in your input container into the table and then reset those inputs to their original blank state.

If needed, customize the loadFormValuesToQueue() function to save your tabular data into the simpleQueue object. This part may be more complicated depending on what your trying to do. In the standard page, these lines of code store the storage data into the Object that holds the Environment Request:

var storageArray=getJSONArrayFromTable(document.getElementById("storageTable"));    
	var storage = eval("(" + storageArray  + ")");
	emptyJSONTable("storageInputs");
	.....
	var myObject = new Object();
	myObject.values = {
	"image" : image,
	"procs" : procs,
	"mem" : mem,        
	"os" : os,
	"size":size,
	"storage":storage
};

6.4.3 Unique Fields

In some cases of tabular data, you may want to ensure that a certain field does not have its value repeated. That is, for a unique field, no two rows in the table will have the same value for that field/column. To do this, just add unique="true" to the input tag. This has not been tested with radio buttons.

6.4.4 Validating Input

For some inputs in your tabular data, you may want to validate that they fall within a certain range before allowing them to be saved. Fields that are only numeric, or fields that are only a certain length, or simply that a field must have some value before being saved are examples of this. To do this, you must set two attributes. First, set the attribute validationExpression to a Javascript regular expression that expresses the range of valid values for that input. Second, set the attribute validationError to a human-readable error message that should be displayed if the input does not match to that expression. This functionality has not been tested with radio buttons. Both regular expression validation and unique fields are tested when running the saveJSON() function mentioned above.

Inputs that are not contained within a 'getsDataFrom' container are validated when you click on the "Add to Request" button at the bottom of the screen.

Here are some Web sites with further information and tools concerning Javascript regular expressions:

6.4.5 Custom Row Icons

By default, each row in the table has a final cell with a Delete icon in it. If you need extra functions for each row, such as an Edit button or other action, you can add those icons in the function 'appendExtrasToRow'. You will need to write Javascript DOM code to dynamically create and insert the icons. The function has examples of how to do this.

6.4.6 Numeric Spinners

To get the spinner controls (the up and down buttons for numeric inputs), call the JQuery function spinner and pass it an options object. For example:

$("#size").spinner({ min: -100, max: 100 });

You can find more about the options available at http://btburnett.com/spinner/README.