WebApps 2

config.js

In config.js, custom client JavaScript may be added, that will be executed in the configuration panel. It is also possible to overwrite default functions (validate, setValues and getValues).

Validate

By default, elements with the required attribute are validated. See detailed description for custom validation.

setValues

setValues populates elements with data when configuration is loaded. To handle custom components this function should be overridden.

(($) => {
   // populate inputs when configuration is loaded
   window.setValues = (values) => {
      const inputs = document.querySelectorAll('input');

      inputs.forEach((input) => {
         const name = input.name;

         if (name) {
            const value = values && values[name];
            const $input = $(input);

            $input.val(value);
            $input.trigger('change');
         }
      });
   };
})(jQuery);

getValues

getValues retrieves values from elements that will be sent to the server. To handle custom components this function should be overridden.

(() => {
   // retrieve values that will be sent to the server
   window.getValues = () => {
      const values = {};
      const inputs = document.querySelectorAll('input');

      inputs.forEach((input) => {
         const name = input.name;

         if (name) {
            const inputValue = input.value;
            values[name] = inputValue;
         }
      });

      return values;
   };
})();

Client requester

A client requester is available on the window.sv object in the config's client context (i.e. config/config.js). Utilize the requester to perform requests to routes specified in config/index.js.

The requester is similar to the client requester available in the WebApp SDK. What differs is that instead of specifying a url, a route is specified.

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

Below is an example of how to call a route ('/test') defined in config/index.js from the config's client context.

// config/index.js
router.get('/test', (req, res) => {
   res.json({
      value: 'Hello from /test',
   });
});

// config/config.js
$(() => {
   $('button').on('click', () => {
      /* 
      	window.sv.requester available since 2022.09.1
        use the global requester object for older versions
      */
      window.sv.requester
         .doGet({
            route: '/test',
            data: {
               value: $('[data-value]').val(),
            },
         })
         .done((res) => {
            $('#fetched-data').text(res.value);
         });
   });
});

Events

Adding Sitevision components dynamically

Sitevision components may be initialized dynamically by triggering 'setup-component' on the body with a selector targeting the component to initialize. See the following example:

//config.js
$(function () {
   $('#addComponentButton').on('click', function () {
      var el =
         '<div class="form-group">' +
         '<label>Page</label>' +
         '<input id="myCustomId" class="form-control" data-component="page-selector" name="myCustomName">' +
         '</div>';

      $('.panel-body').append($(el));
      $('body').trigger('setup-component', '#myCustomId');
   });
});

An example of a dynamic configuration is available on Sitevisions GitHub repository. See dynamic-config.

Configuration initialization

When the configuration is loaded (values are set and components are initialized) an 'initialized' event will be triggered on the <html> element.

// config.js
(() => {
   document.documentElement.addEventListener('initialized', () =>
      console.log('ready!')
   );
})();

A 'sv:loaded' jQuery-event will also be triggered for <select>-based Sitevision components when the component has fetched its data.