XForms Debugging Tips

The two pillars of XForms debugging are the XForms inspector and the Orbeon log:

• The inspector, pictured below, allows you to see changes to your XForms instances right from your web browser, as you interact with the form.
• Logging is done on the server, to a file generally referred to as orbeon.log. Once you have setup Orbeon Forms to log to that file, a tail -f orbeon.log in a console will tell you about all the events, submissions, and actions happening as you interact with the form.

But let’s get to the tips part of this post:

• Visually checking on a condition — In some cases, you’re interested in checking that a condition is met. That condition most likely depends on values in your instance, and you could, with the XForms inspector, keep an eye on the inspector, checking that instances hold the appropriate value. Another way is to write the condition as an XPath expression, and use an AVT to set a style on a part of your form, for instance adding a green border to a section if the condition is met, and a red border if it isn’t, as in:

  style="border: 1px solid {if (condition) then 'green' else 'red'}"
  

• Logging value changes in the browser console — In other cases, you want to know when a value changes and want to keep track of each value change. You can do this by adding to your form an output control for that value, and upon xforms-value-changed running in JavaScript a console.log() showing the new value, for instance:

  <xf:output value="concat('My value ', expression)"
          style="display: none">
      <xxf:script ev:event="xforms-value-changed">
          console.log(ORBEON.xforms.Document.getValue(this));
      </xxf:script>
  </xf:output>
  

  If you’re only interested in the value showing in the log, and don’t want it to be also displayed in the form, you can add a style="display: none" on the <xf:output>, as done in the above snippet. And you can generalize this technique to log in the browser console anything you’d like, upon any XForms event.