XForms/Process Step Editor
< XForms
Motivation
editYou 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
editUse 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 Image
edit
Working XForms Application
editSource Code
edit<?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">
<head>
<title>Process Steps</title>
<link rel="stylesheet" type="text/css" href="local.css"/>
<xf:model>
<xf:instance xmlns="" id="process">
<data>
<activity>
<activity-name>Step 1</activity-name>
<activity-type-code>enrich</activity-type-code>
<webservice-id>ws111</webservice-id>
<ruleset-id>r111</ruleset-id>
<schema-id>s111</schema-id>
</activity>
<activity>
<activity-name>Step 2</activity-name>
<activity-type-code>validate</activity-type-code>
<webservice-id>ws222</webservice-id>
<ruleset-id>r222</ruleset-id>
<schema-id>s222</schema-id>
</activity>
<activity>
<activity-name>Step 3</activity-name>
<activity-type-code>check-ruleset</activity-type-code>
<webservice-id>ws333</webservice-id>
<ruleset-id>r333</ruleset-id>
<schema-id>schema333</schema-id>
</activity>
<activity>
<activity-name>Step 4</activity-name>
<activity-type-code>check-ruleset</activity-type-code>
<webservice-id>ws444</webservice-id>
<ruleset-id>r444</ruleset-id>
<schema-id>s444</schema-id>
</activity>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<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"/>
</div>
<xf:trigger>
<xf:label>+</xf:label>
<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:action>
</xf:trigger>
<xf:trigger>
<xf:label>-</xf:label>
<xf:delete nodeset="instance('process')/activity[index('activity-repeat')]" ev:event="DOMActivate"/>
</xf:trigger>
</div>
</xf:repeat>
</div>
<!-- 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: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:group ref="instance('views')/ruleset-view"></xf:group> -->
<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>
</div>
</body>
</html>
CSS File
edit@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 {
position:relative;
text-align:left;
font-weight:bold;
font-size:12pt;
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;}