Concept - AFS

AFS Integration Guide

Product
AFS
AFS_Version
7.9
Category
Reference Guide

When hovering the mouse over a search term matching one or several concepts, a window pops up with additional information. The configuration/snapshot below illustrates the default behavior of the Concept widget.

<div class="AFSWidget" title="Concept">
<script type="application/json">
{
}
</script>
</div>

The pop-up window is populated with each concept matching the search term

The default behavior is useful during the integration phase, to get a quick grasp of what is the raw structure of the concept in XML. If you read so far, you probably want to tweak further the content of this window. In this case, you need define a JavaScript function to do this job then set the customFunction parameter to the name of a JavaScript function. You have to define this function beforehand. This is two step process:

  • Set the name of your JavaScript customization function in Concept.customFunction
  • Define the JavaScript function in order to customize how to display the concepts

For the sake of example, say the name of my JavaScript customization function is my_function~~. First off add your custom function to the Concept Widget configuration, like so:

<div class="AFSWidget" title="Concept">
<script type="application/json">
{
"customFunction": "populate_concept"
}
</script>
</div>

The name of the function is arbitrary, choose whatever name you like.

Then, define the function in your HTML file, like so. Feel free to edit the function according to your the content of your clientData XML. The provided example assumes a NewPharma's feed.

<!-- Include the latest 1.x jQuery -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- Concepts Customization -->
<script type="text/javascript">
<!--
function populate_concept(divElement, match, matches)
{
parentElement = $(divElement);
$.each(matches, function(index, value) {
clientData =$($.parseXML(value.contents));
$("<a />", {
"href": "http://www.newpharma.be" + clientData.find("url").text(),
"text": clientData.find("name").text()
}).appendTo(parentElement);
$("<br />").appendTo(parentElement);
});
}
-->
</script>

As the function uses jQuery, do not forget to include the jQuery JavaScript library beforehand.

The function receives three parameters: element, match, matches

  • divElement

This is the DOM element you want to populate. It is a div tag.

  • match

A string containing the search term matching one or several concepts. "ecrinal" in our above example.

  • matches

An array of JavaScript objects (the matching concept(s)). Each array item is an object composed of 2 string properties: uri and contents

  • uri the concept's URI
  • contents the concept data (an XML string)

Below some examples:

Concept - Display the concept suggestions (if any)

Parameter

Type

Card

Default

Description

enabled

Boolean

Optional

true

Is the concept widget enabled? It is enabled by default.

customFunction

String

Optional

N/A

Name of a Javascript function in charge of customizing how to display the concepts. The default behavior (without a customFunction) is to pretty print the concept's clientData as XML nodes.