WebApps 2

Configuration in WebApps

Page content

config/

WebApp configuration files are stored in the config folder. To set up a global configuration for your WebApp, add a folder named global and include the files you need.

  • src/
    • config/
      • index.html *required
      • index.js
      • config.js
      • config.css
      • global/
        • index.html *required if global config is used
        • index.js
        • config.js
        • config.css

Configuration is retrieved in a WebApp server side context through the appData-objecta. Global configuration is retrieved through the globalAppData-object.

index.html

index.html is the only required file in the WebApps configuration. This template defines the keys and values for the configurable values in the WebApp.

index.js

If the WebApp's configuration requires a context implement index.js. E.g. translated texts (i18n), values from another system or information about the current page.

config.js

If the configuration requires dynamic client side functionallity (e.g. validation feedback) implement config.js.

config.css

Add custom CSS for the configuration panel.

<!-- index.html -->
<div class="form-group">
   <label>Text</label>
   <input class="form-control amazing-class" name="text" />
</div>

/* config.css */
.amazing-class {
   color: blue;
}

Declaring default values

Default appData values are declared in "appDataDefaults.json" stored in the root of the app. Both appData and globalAppData default values can be declared.

// appDataDefaults.json
{
  "appData": {
   "inputField": "the input field",
   ...
  },
  "globalAppData": {
    ...    
  }
}

The default value will be used until there is a value configured by a user. Once a value is saved from the configuration, the default value will never be used again, even though a value might be cleared.

Sitevision identifers should never be used as default values.

Accessing configured values

After values are set in the WebApp's configuration, in either a local or global context, values are available though appData and globalAppData respectively in a server side context of the WebApp.

AppData

AppData holds the local values configuered in the WebApp. See appData for documentation.

Global AppData

GlobalAppData holds the gloval values that are shared among all instances of a WebApp configured in the WebApp. See globalAppData for documentation.

i18n

The i18n function is available when rendering if the index.html file is evaluated as an underscore template, i.e. when an index.js file is present.

The app's default language bundles will be used.

// i18n/en.json
{
   "settings": "Settings",
   "pickStartPage": "Select a start page"
}

<!-- config/index.html -->
<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title"><%- i18n('settings') %></h3>
   </div>

   <div class="panel-body">
      <div class="form-group">
         <label><%- i18n('pickStartPage') %></label>
         <input
            class="form-control"
            data-component="page-selector"
            name="page"
         />
      </div>
   </div>
</div>

<%= syntax delivers an unescaped string. Use with caution.

The i18n function is also available server side in index.js.

const i18n = require('i18n');
...

const localizedName = i18n.get('name');
...

Config Example App

A WebApp demonstrating configuration is available in Sitevision's GitHub repository.