index.html
WebApp configuration is defined in index.html.
If an index.js file is present, index.html will be rendered server side as an underscore template. If there is no index.js, it will be rendered as is.
Values saved in the configuration will be available through appData in the server side context of the WebApp by the key you defined in the name
attribute of the template.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">WebApp Configuration</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input
class="form-control"
data-component="page-selector"
name="page"
/>
</div>
<div class="form-group">
<label>Text</label>
<input class="form-control" type="text" name="text" />
</div>
</div>
</div>
Toggle content
Content can be toggled based on checkbox/radio button state by using data-enables="<selector>"
.
<!-- Radio -->
<div class="form-group">
<input type="radio" id="color1" name="color" value="red" />
<label for="color1">Red</label>
<input
type="radio"
data-enables=".container-radio"
id="color2"
name="color"
value="green"
/>
<label for="color2">Green</label>
</div>
<div class="container-radio">Show me if "Green" is selected</div>
<!-- Checkbox -->
<div class="form-group">
<input
type="checkbox"
data-enables=".container-check"
id="check"
name="useCaptions"
data-value-type="boolean"
/>
<label for="check">Use captions</label>
</div>
<div class="container-check">Show me if "Use captions" is checked</div>
Checkbox boolean
For checkboxes you can use the data attribute data-value-type="boolean"
to make it return true
or false
.
Sitevision components
Sitevision offers "native" components to select values from the Sitevision model. Values are retrieved using the appData-object in a server side script context.
In order to utilize Sitevision components, simply add data-component="<type>"
to an input/select element. The following types are supported.
See all available components at the Sitevision components page.
HTML Components
Regular HTML elements may also be used to accept data from the user.