XForms/Process Step Editor

Motivation
You want to create a process editor where a process is a series of steps that grow horizontally as you add steps to a process. You want to override the default behavior of items in an repeat to be added horizontally, not vertically.

Process
Use a repeat but add the following to your css file

Working XForms Application
Load XForms Application

Source Code
  Process Step Editor Process: 

  +        <xf:label>-</xf:label> <xf:delete nodeset="instance('process')/activity[index('activity-repeat')]" ev:event="DOMActivate"/> </xf:trigger> </xf:repeat> <xf:label class="group-label">Activity Inspector:</xf:label> <xf:repeat nodeset="instance('process')/activity[index('activity-repeat')=position]" style="display:inline"> <xf:input ref="activity-name"> <xf:label>Step Name:</xf:label> </xf:input> <xf:select1 ref="activity-type-code"> <xf:label>Activity Type:</xf:label> <xf:item> <xf:label>Enrich</xf:label> <xf:value>enrich</xf:value> </xf:item> <xf:item> <xf:label>Validate</xf:label> <xf:value>validate</xf:value> </xf:item> <xf:item> <xf:label>Check Ruleset</xf:label> <xf:value>check-ruleset</xf:value> </xf:item> </xf:select1> <xf:input ref="webservice-id"> <xf:label>Enrichment Service ID:</xf:label> </xf:input> <xf:input ref="ruleset-id"> <xf:label>Ruleset ID:</xf:label> </xf:input> <xf:input ref="schema-id"> <xf:label>Validate with Schema ID:</xf:label> </xf:input> </xf:repeat>