Defining an External Widget Configuration - AFS

AFS Integration Guide

Reference Guide

In this mode, widget configurations have to be defined in the JavaScript environment.

The best way to do it is to create a separate file dedicated to configurations and included before AFS Widgets application.

<script type="text/javascript" src="js/conf.js"></script>
<script type="text/javascript" src="js/lib/afswidget.nocache.js"></script>

Each widget configuration has to be a global variable which name is the concatenation of "AFSWidget" and the widget name.

var AFSWidgetFoobar = {
IntegerParam: 123,
StringParam: 'ABC',
BooleanParam: true,
ArrayParam: ['A', 'B', 'C'],
ObjectParam: {
WhateverParamType: 'foobar'
// ...
FunctionParam: function() {
console.log('OMAGAD a function in da conf!');
// ...

  • Pros of this configuration mode:
    • the configuration targets all widget of a given type
    • comments can be used
    • functions can be inlined
    • object keys does not require surrounding quotes
    • all JavaScript capabilities are available (compute a value, reuse some parts, ...)
    • configurations are separated from the HTML

  • Cons of this configuration mode:
    • configurations are separated from the HTML
    • the configuration targets all widget of a given type

A solution exists to the last inconvenience. It uses a data-id attribute and a new syntax when declaring the configuration variable.

  • Considering the following widget:

<div data-type="AFSWidget" data-name="Foobar" data-id="Widget1"></div>

  • The configuration should be like so:

var AFSWidgetFoobar$$Widget1 = {
// widget settings