Sneak Peek - AFS

AFS Integration Guide

Reference Guide

The aim of the provided templates is to show what can be done using AFS Widgets. Many kind of integrations can be achieved. Even if widgets can be tuned, some complex integrations will require skills in JavaScript and CSS.

These templates make use of HTML5 and Bootstrap to offer a modern look and a responsive design.

Currently four templates are provided:

  • large-multifeed: shows an integration of an AFS Search responding with many feeds.
  • large-standard: shows a desktop and full-page oriented integration.
  • large-standard-cks: same as the previous one but add community features provided by CKS widgets.
  • small-instant: shows a mobile device oriented integration.

An integration is an HTML that loads the AFS Widgets library. This can be seen at the bottom of each HTML page:

<script src="../../afswidgets/afswidgets.nocache.js"></script>

In a template directory, for a foo.html page, can be found:

  • a js/global.conf.js file containing JavaScript-based configuration shared between pages.
  • a js/foo.conf.js file containing JavaScript-based widget configurations specific to the page.
  • a js/foo.js file containing custom JavaScript callbacks declared in configurations.
  • a css/afswidgets.min.css file containing default template styles.
  • a css/overloads.css empty file intended to receive adjustments to the default styles.

Files css/afswidgets.css and css/afswidgets.min.css should not be edited. There are generated based on the LESS files. LESS syntax is not understood by web browsers. These files are only provided for example. Any modification of them should be followed by an execution of the LESS Compiler to update the supplied CSS files. Using the overloading CSS file should be preferred.