WebApps 2

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.