Resolving Command Parameters into Input Types

In order to power the Container Launch UI, we will need to take any user-settable parameters and convert them into HTML form elements. If not specified, a text input will be used by default. However, many parameter types will benefit from a fine-grained input styling. It's worth noting that, in addition to the "name" and "value" properties, HTML inputs should also have a "label" and can also make use of helptext to guide the user. Enumerated lists and dropdown menus have additional label properties for each value option.

Therefore, a JSON input definition that looks like this:

a_parent_input: {
    type: "select",
    name: "inputName",
    description: "This is a description of this input",
    user_settable: true,
    advanced: false,
    required: true,
    parent: null,
    values: {
        default: [ 
            { value: "parent_value1", label: "parent value 1" } , 
            { value: "parent_value2", label: "parent value 2" } 
        ]
    }
}

Would resolve into this:

<div data-name="inputName" class="panel-element">
    <label class="element-label" for="inputName">Select An Option</label>
    <div class="element-wrapper">
        <label>
            <select id="input-name" name="inputName" title="inputName" class="required">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </label>
        <div class="description">This is helptext</div>
    </div>
    <div class="clear"></div>
</div>

And this would be rendered as part of a configuration modal like so:

Usage Notes

• Any parameter that must be passed to the command but is not considered user-settable should be specified in a hidden input.
• Hidden parameters can also be accompanied by a static form control, which displays the value that is being passed, without letting the user change that value.

Default Input Types and Base HTML Elements

<label for="NAME">LABEL</label>
<input type="text" name="NAME" value="VALUE" />

<label for="NAME">LABEL</label>
<select name="NAME">
    <option value="OPTIONVAL">OPTIONLABEL</option>
</select>

<label for="NAME">LABEL</label>
<label><input type="checkbox" name="NAME" value="OPTIONVAL" />OPTIONLABEL</label>

<label for="NAME">LABEL</label>
<label><input type="radio" name="NAME" value="true" />ONTEXT</label>
<label><input type="radio" name="NAME" value="false" />OFFTEXT</label>

<input type="hidden" name="NAME" value="VALUE" />

<label>LABEL</label>
<span>VALUE</span>
<input type="hidden" name="NAME" value="VALUE" />

<label>LABEL</label>
<ul>
  <li>VALUE</li>
</ul>
<input type="hidden" name="NAME[]" value="VALUE" />

Special Cases

<label for="NAME">LABEL</label>
<select name="NAME">
    <option value="SCANID">SCANID - SERIES_DESCRIPTION</option>
</select> 

<label for="NAME">LABEL</label>
<label><input type="checkbox" name="NAME" value="SCANID" />SCANID - SERIES_DESCRIPTION</label>