Create a custom widget

Widgets are used for placing UI, such as icons, around elements. Besides the widgets provided by the platform it is also possible to create custom widgets.

Only create a custom widget if none of the widgets provided by the platform can provide the needed functionality. One of the most flexible widgets we provide is the createLabelQueryWidget.

Widgets come in two variations:

  • Widgets that are static, such as the label widget.

  • Widgets that are dynamic, such as the attribute label widget.

Widgets are a factory function expected to return a function which returns JsonML that represents the HTML output.

To keep the output HTML in line with the rest of FontoXML you can use the inspection tool from your browser to check the HTML already generated by FontoXML and use constructs you find there. Do note to use a visualization that correctly indicates whether or not the displayed values are editable.

As the HTML output generated by FontoXML is not part of the API we do not guarantee that the styling for these elements will not change.

Custom static widgets

Static widgets are used to display a value either passed from the configuration or hard-coded into the widget itself.

createCustomWidget.js

JavaScript

export default function createCustomWidget(label) {
    return function() {
        return ['cv-label-widget', label];
    };
}

Custom dynamic widgets

Dynamic widgets are generally dependent on information derived from the node it is configured, possibly in combination with a passed argument from the configuration. When a widget's internal function is called it gets passed a sourceNode as argument. This sourceNode can then be used to query the information needed.

createCustomWidget.js

JavaScript

export default function createCustomWidget(attributeName) {
    return function(sourceNode) {
        var attributeValue = sourceNode.getAttribute(attributeName) || 'none';

        return ['cv-attribute-label-widget', attributeValue || options.defaultLabel];
    };
}