Skip to content

Drawing Pictures with SVG Information

Info

New in Atfinity 18.

An SVG information draws a picture from a template you write in its Jinja Template field. The template is an SVG document with Jinja in it, the same Jinja an ADX document uses, and Atfinity renders it for each instance where a rule requires the information.

Read the values

self is the instance the information belongs to, read as an instance is read in a document: self.first_name prints a value and self.translate('nationality') prints it translated. CASE holds the case meta information, and nothing else of the case can be read. A relationship or a structure is looped over, and each item reads its own values:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="{{ 20 + self.is_related_to|length * 24 }}">
  {% for relative in self.is_related_to %}
  <text x="10" y="{{ 30 + loop.index0 * 24 }}">{{ relative.first_name }} {{ relative.last_name }}</text>
  {% endfor %}
</svg>

Unlike in a document, rich text prints as plain text.

The width and height of the svg root are the size the picture is shown at. A template that prints nothing for an instance, for example one wrapped in {% if %}, shows nothing at all.

What a template cannot contain

A template may only draw. Shapes, text, groups, gradients, patterns, masks and markers are allowed, with the attributes that style and position them. Anything that could run, load or embed something is not: scripts, event handlers such as onclick, images, embedded HTML, data: URIs, and links or url(...) pointing anywhere but an id inside the same picture. Put Live names each element, attribute or Jinja tag it refuses, so the error tells you what to remove.

Three restrictions are less obvious from the error alone:

  • Print a value as text or into an attribute such as fill, never into style or into the name of an element or attribute.
  • Write comments as Jinja comments, {# ... #}, since XML comments are refused.
  • Print a macro directly between elements, as in {{ bar(3) }}, rather than into an attribute or a variable.

Make it appear in the case

Place the information on a tab where the picture belongs, and require it with a rule whose action is Require Information, for example p.risk_gauge on p is Person. Without such a rule the picture is never drawn. It is redrawn whenever the rule engine runs on the case.

If drawing fails for an instance, for example because a calculation meets a missing value, the field shows "Error rendering field" and the rest of the tab is unaffected.

Before you put it live

Put Live rejects a template that is not valid Jinja or does not produce valid SVG, and names the line. It also rejects:

  • A template that reads an information the ontology does not have, or a file or SVG information.
  • A template that prints a relationship or a structure itself rather than one of its values.
  • An empty template, or a default value on the information.

An attribute that has no effect on its element, such as x on a circle, is only a warning, since the browser ignores it.