Composite mechanism - AFS

AFS Integration Guide

Reference Guide

Some widgets such as those displaying results, need to be highly customizable. Indeed, each AFS integration has customer-specific data and requires a specific display.

To face this problem, AFS Widgets embeds a template-like customization based on components. It is the composite mechanism.

Its main principle is to reuse AFS Widgets mechanism (widgets can be integrated anywhere in the customer page), but applied to the composite widget scope. Inside the widget declaration, it is only necessary to provide its HTML template that embeds components.

Hereafter an example using the CompositeResults widget:

<div data-type="AfsWidget" data-name="CompositeResults">
<!-- Title component displays replies title -->
<h1><div data-type="AFSWidgetResultComponent" data-name="Title"></div></h1>
<!-- Abstract component displays replies abstract -->
<div data-type="AFSWidgetResultComponent" data-name="Abstract"></div>

In this example, each reply will be displayed according to the template inserted inside widget declaration.

Several widgets can be customized thanks to the composite mechanism. Their are several component families. In the above example, AFSWidgetResultComponent component family is used to template a search result.

The family name is specified in the class element attribute, whereas the component name is written in the title attribute. It is exactly as AFS Widgets are defined into the integration page.

Components can have configuration options. They must be declared exactly as widgets options are, inside its body declaration, in a script tag. Here is a Label component (from the AFSWidgetResultComponent family) that is configured to display the result URI:

<div data-type="AFSWidgetResultComponent" data-name="Label">
<script type="application/json">
{ "expression": "jpath:$.uri" }

It is also possible to declare configuration within a separated file, using variables.
Variables names are made as is : component family + component name. Example: AFSWidgetResultComponentTitle will concern the Title Component of the Result family.