WebApps 2

Index.js

index.js in not a required file but enables route configuration and template rendering with a context. The concept is very similar to the app's regular index.js. Given that, Sitevision's Public API can be accessed, while browser objects cannot. A requester is available in the config's client context to fetch data client side.

Bundled framework functionallity is not available in the configuration context. You access SDK or public API with the require-function like you would in WebApps 1 or a script module.

Rendering index.html with a context

App configuration is rendered from the root route ('/'). Data passed to the render function on the response object will be available as context when index.html is rendered. It will be evaluated as an underscore template. Note that index.html is the only template that will be rendered. Multiple templates or components are not available.

If no index.js is present it will be rendered as is.

To initialize rendering of your configuration from the index.js file send an object with the res.render function.

Below is an example of how one might get data from Sitevision's Public API and expose it to index.html.

// index.js
(() => {
   const router = 				require('router');
   const portletContextUtil =   require('PortletContextUtil');
   const properties = 			require('Properties');
   const appInfo = 				require('appInfo');

   router.get('/', (req, res) => {
      const appName = appInfo.appName;
      const currentUserEmail = properties.get(
         portletContextUtil.getCurrentUser(),
         'mail'
      );

      res.render({
         currentUserEmail: currentUserEmail,
         appName: appName,
      });
   });
})();

<!-- index.html -->
<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">Configure <%- appName %></h3>
   </div>

   <div class="panel-body">
      <div class="form-group">
         <label>Send reports to</label>
         <input
            class="form-control"
            type="email"
            value="<%- currentUserEmail %>"
         />
      </div>
   </div>
</div>

To use the values in the object you sent with the res.render({}). Remember to HTML escape your values to protect against potentially advese values.

<!-- HTML Escaped value -->
<%- currentUserEmail %>

<!-- raw value -->
<%= currentUserEmail %>

Below is an example of how to utilize Requester to fetch data from an external API and make it available in the configuration.

// index.js
(() => {
   const router = require('router');
   const requester = require('Requester');

   router.get('/', (req, res) => {
      requester
         .get('https://jsonplaceholder.typicode.com/posts')
         .done((data) => res.render({ posts: data }));
   });
})();

<!-- index.html -->
<div class="form-group">
   <label>Font</label>
   <select>
      <% _.each(posts, function(post) { %>
      <option value="<%- post.id %>"><%- post.title %></option>
      <% }) %>
   </select>
</div>

Response object (res)

The response object provides the following methods in the configuration view.

Renders the index.html of the configuration. The data will be the context when the template is rendered.

res.send(data)

Default data type is json. For other cases dataType must be explicitly set in the request.

res.render({})

Initializes the rendering of the configuration template. Include any keys/values needed for the rendering of the configuration.

res.render({});

Request object (req)

The request object is identical to the request object in the app's regular server side context.

Require

Objects available server-side via the require function.

// Server context, i.e. config/index.js
const _ =                  require('underscore');
const router =             require('router');
const i18n =               require('i18n');
const appInfo =            require('appInfo');
const storage =            require('storage');
const appData =            require('appData');
const globalAppData =      require('globalAppData');
const appResource =        require('appResource');
const privileged =         require('privileged');
// Example class, all of the Public API is available
const portletContextUtil = require('PortletContextUtil');