Active Forms List (Pending Queue)

The Active Forms List (formerly known as the Pending Queue) is a special-purpose Interaction or view that displays any form records that have not yet been submitted to the server. Future functionality of this list will include draft records, and records that are currently been transmitted, hence the need for a more general name ("pending" is too specific).

Customising The Active Forms List BIC2

To customise the Active Forms List you first need to

• Create an XLST Interaction with the "Data Suitcase type"
• Set to "active-forms"
• Add an XML source similar to the below will be transformed via your XSL

<?xml version="1.0"?>
<records>
  <record>
    <id></id>
    <interaction></interaction>
    <interactionLabel></interactionLabel>
    <uuid></uuid>
    <form></form>
    <blinkFormsVersion></blinkFormsVersion>
    <fields>
      <field>
        <name></name>
        <value></value>
      </field>
      <field>
        <name></name>
        <value></value>
      </field>
      ...
    </fields>
  </record>
</records>

• Go into the answerspace setup=>Forms and set the following options.

Example XSL 

We recommend that the basic logical structure (i.e. the tags that begin with "xsl:") of your custom XSL closely mirror our attached example. Beyond that, you are free to choose the HTML elements that are used to mark-up the output of the XSLT. 

Page Structure

• h Active Form record need to be contained within an element with the following attributes (ideally exactly as in the example):
  • data-blink="active-form" (as-is): needed so that our platform knows how to recognise this specific record
  • data-version (value provided): the version of Blink Forms used to store the form record)
  • data-id (value provided): the storage reference so our platform knows how to retrieve this specific record
• all Blink Forms records support the "clear" action, and the button for this action must have a data-action="clear"attribute (the label can be changed)
• all Blink Forms records support the "submit" action, and the button for this action must have a data-action="submit"attribute (the label can be changed)
• Blink Forms v2 records support the "resume" action, and the button for this action must have a data-action="resume"attribute (the label can be changed)
• Blink Forms v1 records DO NOT support the "resume" action, and it is not recommended that you attempt to create such a button for those legacy form records

Submit All

You may create a "submit-all" button as in the example XSL. It must be placed within an element with similar data attributes to a record element (i.e. data- blink="active-record" and data-version="2"). As this button (and any future buttons like it) act on all records, the "data-id" attribute should not be included.

Note also that the submit-all button is only supported for form records created with BlinkForms v2, and it will not have any effect on BlinkForms v1 records.

CSS Styles

• whilst a record is being processed, the class s-working is added to the record's primary element
• in case of error, the class s-error is added to the record's primary element and the s-working class is removed
• when a record has being successfully submitted, the record's primary element is removed from the page structure

Using the above information and custom CSS style sheets, it is possible to provide users with feedback and instructions.

Further Exploration

• can write your XSL so that it adds CSS classes to elements based on the values of certain fields
  • this can be combined with the "style sheet" answerSpace setting to highlight certain records
• you can use overrides (or CSS with Media Queries) to provide a more-tailored experience for devices with larger screens
• XSL provides basic sorting functions that may be desirable
• you can create multiple Active Forms Interactions and use conditional XPath queries to create different filtered lists
  • only one of which can be directly linked to the "# Pending" button
  • all of these Interactions can be displayed in Categories and linked to from other Interactions if you wish

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <xsl:variable name="records" select="/records/record" />
    <xsl:variable name="count" select="count($records)" />
    <h1>Active Forms</h1>
    <xsl:choose>
      <xsl:when test="$count &gt; 0">
        <span data-blink="active-form" data-version="2">
          <button data-action="submit-all">submit all</button>
        </span>
        <xsl:apply-templates select="$records" />
      </xsl:when>
      <xsl:otherwise>
        <p>There are no Active Forms (e.g. draft, pending, unsuccessfully sent) in storage.</p>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
  
  <xsl:template match="record">
    <xsl:variable name="fields" select="fields/field" />
    <xsl:variable name="count" select="count($fields)" />
    <div data-blink="active-form" data-version="{blinkFormsVersion}" data-id="{id}">
      <h3><xsl:value-of select="interactionLabel" /></h3>
      <h4>(<xsl:value-of select="interaction" /> → <xsl:value-of select="form" />)</h4>
      <xsl:if test="$count &gt; 0">
        <dl>
          <xsl:apply-templates select="$fields" />
        </dl>
      </xsl:if>
      <pre class="uuid"><xsl:value-of select="uuid" /></pre>
      <xsl:if test="blinkFormsVersion = 2">
        <button data-action="submit">submit</button>
        <button data-action="resume">resume</button>
      </xsl:if>
      <xsl:if test="blinkFormsVersion = 1">
        <button data-action="submit">submit</button>
      </xsl:if>
      <button data-action="clear">clear</button>
    </div>
  </xsl:template>
  
  <xsl:template match="field">
    <dt><xsl:value-of select="name" /></dt>
    <dd><xsl:value-of select="value" /></dd>
  </xsl:template>
</xsl:stylesheet>

Customising The Active Forms List BIC3