XForms/Process Step Editor

< XForms


You want to create a process editor where a process is a 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.


Use a repeat but add the following to your css file

/* Makes the repeated items get added to the right. */
.xf-repeat-item {display:inline;}
/* We MUST put this in to limit the width of the repeated item */
.xf-repeat-item .xf-value {width: 70px;}

Screen ImageEdit


Working XForms ApplicationEdit

Load XForms Application

Source CodeEdit

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns="http://www.w3.org/1999/xhtml">
        <title>Process Steps</title>
        <link rel="stylesheet" type="text/css" href="local.css"/>
            <xf:instance xmlns="" id="process">
                        <activity-name>Step 1</activity-name>
                        <activity-name>Step 2</activity-name>
                        <activity-name>Step 3</activity-name>
                        <activity-name>Step 4</activity-name>
        <h1>Process Step Editor</h1>
        <div class="process-steps">
            <xf:label class="group-label">Process:</xf:label>
            <xf:repeat nodeset="instance('process')/activity" id="activity-repeat">

                <div class="activity" style="display:inline;">
                    <div class="activity-label">
                        <xf:input ref="activity-name" id="activity-name"/>
                        <xf:action ev:event="DOMActivate">
                            <xf:insert nodeset="instance('process')/activity" at="index('activity-repeat')" position="after"/>
                            <xf:setvalue ref="instance('process')/activity[index('activity-repeat')]/activity-name" value="''"/>
                              <!-- should insert on the new row -->
                            <xf:setfocus control="activity-name"/>
                        <xf:delete nodeset="instance('process')/activity[index('activity-repeat')]" ev:event="DOMActivate"/>
          <!-- this is always showing the selected activity-->
        <div class="inspector">
            <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:select1 ref="activity-type-code">
                    <xf:label>Activity Type:</xf:label>
                        <xf:label>Check Ruleset</xf:label>
                   <!--  &lt;xf:group ref="instance('views')/ruleset-view"&gt;&lt;/xf:group&gt; -->
                <xf:input ref="webservice-id">
                    <xf:label>Enrichment Service ID:</xf:label>
                <xf:input ref="ruleset-id">
                    <xf:label>Ruleset ID:</xf:label>
                <xf:input ref="schema-id">
                    <xf:label>Validate with Schema ID:</xf:label>

CSS FileEdit

@namespace xf url("http://www.w3.org/2002/xforms");

body {
   font-family: Helvetica, sans-serif;

.process-steps {
   border: black 1px solid;
   color: black; background-color: lightgreen;
   padding: 18px 10px 14px 15px;

xf|label {
font-weight: bold;

.group-label {
   background-color: #D6D6DA;
   top: -9px;
   left: -9px;
   -moz-border-radius: .3em;
   padding: 3px;
   border: solid black 1px;

.activity {
  position: relative;
  width: 250px;
  padding: 8px; margin: 2px;
  border: 1px solid blue;
  background: PowderBlue;
  /* the following only works under FireFox */
  -moz-border-radius: 1em;

/* this makes the repeated items get added to the right */
xf|repeat {display: inline !important;}
.xf-repeat-item {display:inline !important;}
/* you MUST put this in to limit the width of the repeated item */
.xf-repeat-item .xf-value {width: 70px;}

.activity-label {
  display: inline;
  text-align: center;

/* the label in the center of an activity box */
.activity .xf-value {
  background-color: white;
  text-align: center;

/* make the plus/minus buttons larger */
.activity xf|trigger xf|label {font-weight: bold; font-size: 12pt;}

.inspector {
   border: black 1px solid;
   color: black; background-color: pink;
   padding: 15px;
   width: 400px;

/* Makes the labels right aligned in a 200px wide column that floats to the left of the input controls. */
.inspector xf|input > xf|label,
.inspector xf|select > xf|label,
.inspector xf|select1 > xf|label,
.inspector xf|textarea > xf|label 
{text-align:right; padding-right:10px; width:200px; float:left; text-align:right;}

/* This line ensures all the separate label  controls in the inspector appear on their own lines */
.inspector xf|input,
.inspector xf|select,
.inspector xf|select1, 
.inspector xf|textarea 
{display:block; margin:5px 0;}


Next Page: Application Builder | Previous Page: Replace Tester

Home: XForms