Field flow basic configuration

How to use field flow to create small scale user interaction.


Ajax filtering

This functionality is provided by the data ajax plugin

It load the following file: ../ajax/filtering-hash.html

Choose content to be ajaxed?

<p>It load the following file: <a href="ajax/filtering-hash.html">../ajax/filtering-hash.html</a></p>

<div class="wb-fieldflow">
	<p>Choose content to be ajaxed?</p>
	<ul>
		<li data-wb-fieldflow="ajax/filtering-hash.html#part1">Part 1 (hash)</li>
		<li data-wb-fieldflow="ajax/filtering-hash.html#part2">Part 2 (hash)</li>
		<li data-wb-fieldflow="ajax/filtering-hash.html#part3">Part 3 (hash)</li>
		<li data-wb-fieldflow="ajax/filtering-hash.html#part4">Part 4 (hash)</li>
		<li data-wb-fieldflow="ajax/filtering-hash.html#part5">Part 5 (hash)</li>
		<li data-wb-fieldflow="ajax/filtering-hash.html ul">ul (selector)</li>
		<li data-wb-fieldflow="ajax/filtering-hash.html .filter-selector">.filter-selector (selector)</li>
	</ul>
</div>

Specifying what UI to render

select
Default, single selection from a dropdown (select,option,optgroup elements)
checkbox
List of checkboxes (input[type=checkbox] elements).
radio
List of options (input[type=radio] elements).

When using the render as "checkbox" or "radio", you could use the additional configuration option inline that could be set to true in order to indicate to render an inline interface.

Note: Using an interface that allow multiple choice is like executing multiple action.

Choose content to be ajaxed:

<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox"}'>
	<p>Choose content to be ajaxed:</p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
		<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
		<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
		<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
		<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
	</ul>
</div>

Specifying the action

List of built-in action.

redir
Perform a redirection
ajax
Ajax-in content
query
Set a value and a name for an input element. Could be useful when used with subsequent dropdown.
append
Append a second field, like a second dropdown
addClass
Add CSS class to an element
removeClass
Remove CSS class to an element
toggle
Toggle an element on the page
tblfilter
Apply filter to a data table (wb-tables).

Redirection example

Find the plugin for the action you need:

<div class="wb-fieldflow">
	<p>Find the plugin for the action you need:</p>

	<ul>
		<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html"}'>Inserting content</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html"}'>Photo galery</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html"}'>Draw charts</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html"}'>Expand and collapse content</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html"}'>Set a consistant height</li>
		<li data-wb-fieldflow='{"action":"redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"}'>Popup content</li>
	</ul>
</div>

Ajax example

Choose content to be ajaxed:

<div class="wb-fieldflow">
	<p>Choose content to be ajaxed:</p>
	<ul>
		<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-1.html"}'>(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
		<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-2.html"}'>(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
		<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-3.html"}'>(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
		<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-4.html"}'>(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
		<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-5.html"}'>(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
		<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/filtering-hash.html ul"}'>Ajax filtering, ul (selector)</li>
	</ul>
</div>

Make immediate action upon selection

First you need to deactivate the form creation and create manually that form environment. Then you can specify "live":true in the configuration of the list item.

Choose content to be ajaxed:

  • (Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
  • (Set 2) Vestibulum pretium tortor vel facilisis sodales.
  • (Set 3) Nunc sit amet dui ut justo efficitur dapibus.
  • (Set 4) Praesent at purus ut turpis sollicitudin aliquam.
  • (Set 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-frmvld"><form>
	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-1.html", "live":true}'>(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-2.html", "live":true}'>(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-3.html", "live":true}'>(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-4.html", "live":true}'>(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow='{"action":"ajax", "url": "ajax/ajax-5.html", "live":true}'>(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
		</ul>
	</div>
</form></div>

Make multiple actions

Multiple action can be set by providing an JSON array for the item configuration. Althrough the plugin will not check for potential incompatibility between any action being set. It's the responsability of the interaction designer too choose wisely compatible action. Like making a redirection within an ajax are incompatible action.

In the following example it use the option container to specify where to insert the content, where it doen't clean automatically and his value is an valid jquery selector.

Choose content to be ajaxed?

Ajax Output A (id="ajaxOutA")
Ajax Output B (id="ajaxOutB")
<div class="wb-fieldflow">
	<p>Choose content to be ajaxed?</p>
	<ul>
		<li data-wb-fieldflow='[
				{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-1.html"},
				{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part1"}
			]'>Set 1 [A] - Part 1 [B]</li>
		<li data-wb-fieldflow='[
				{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-2.html"},
				{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part2"}
			]'>Set 2 [A] - Part 2 [B]</li>
		<li data-wb-fieldflow='[
				{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-3.html"},
				{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part3"}
			]'>Set 3 [A] - Part 3 [B]</li>
		<li data-wb-fieldflow='[
				{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-4.html"},
				{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part4"}
			]'>Set 4 [A] - Part 4 [B]</li>
		<li data-wb-fieldflow='[
				{"action":"ajax", "container":"#ajaxOutA", "url": "ajax/ajax-5.html"},
				{"action":"ajax", "container":"#ajaxOutB", "url": "ajax/filtering-hash.html#part5"}
			]'>Set 5 [A] - Part 5 [B]</li>
	</ul>
</div>

<div class="row">
	<div class="col-md-6">
		<section class="panel panel-default">
			<header class="panel-heading">
				<h5 class="panel-title">Ajax Output A (<code>id="ajaxOutA"</code>)</h5>
			</header>
		<div id="ajaxOutA" class="panel-body">
		</div>
		</section>
	</div>
	<div class="col-md-6">
		<section class="panel panel-default">
			<header class="panel-heading">
				<h5 class="panel-title">Ajax Output B (<code>id="ajaxOutB"</code>)</h5>
			</header>
		<div id="ajaxOutB" class="panel-body">
		</div>
		</section>
	</div>
</div>

Making the field optional

By default, all field flow control are required and they are validated by the form validator plugin, exception of the table filtering action. When needed, like when you are doing live action only, it could be useful to make the field control optional.

Choose content to be ajaxed:

  • (Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
  • (Set 2) Vestibulum pretium tortor vel facilisis sodales.
  • (Set 3) Nunc sit amet dui ut justo efficitur dapibus.
  • (Set 4) Praesent at purus ut turpis sollicitudin aliquam.
  • (Set 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-frmvld"><form method="get">
	<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "base": { "live": true }, "isoptional": true }'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
		</ul>
	</div>
</form></div>

Custom labeling

Field flow plugin allow you several way to customize and specify how you want setup label of the generated control.

Prevent to auto-insert the "required" red label

Find the plugin for the action you need:

<div class="wb-fieldflow" data-wb-fieldflow='{ "noreqlabel": true }'>
	<p>Find the plugin for the action you need:</p>
	<ul>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
	</ul>
</div>

Specify a quick label

By default Field flow will take all the content of the first element, usually a paragraph, but you can specify what text to use by wrapping content with <span class="wb-fieldflow-label">...</span>. This should allow a better progressive enhencement integration by the interaction designer.

Choose content to be ajaxed:

<div class="wb-fieldflow">
	<p><span class="wb-fieldflow-label">Choose content</span> to be ajaxed:</p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
		<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
		<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
		<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
		<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
	</ul>
</div>

Sophisticated labeling

Field flow allow you to have content before and after the label. Doing that allow the interaction designer to insert precision and/or instruction regarding of the content of the list item. To do so, the first child must have the class wb-fieldflow-header. If there is no sub-element that contain the class wb-fieldflow-label, the first paragraph will be used as the label.

Some text before the label.

The label

Some text after the label.

<div class="wb-fieldflow" >
	<div class="wb-fieldflow-header">
		<p>Some text before the label.</p>
		<p class="wb-fieldflow-label">The label</p>
		<p>Some text after the label.</p>
	</div>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
		<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
		<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
		<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
		<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
	</ul>
</div>

Specifying what to use as being the label

It possible to overwrite the default label class selector by setting the option lblselector to Field flow.

Choose content to be ajaxed:

<div class="wb-fieldflow" data-wb-fieldflow='{"lblselector":"#myHiddenLabel"}'>
	<p>Choose content to be ajaxed: <span id="myHiddenLabel" class="hidden">My hidden label.</span></p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
		<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
		<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
		<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
		<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
	</ul>
</div>

Customize the default selected label

It possible to overwrite the default selected label by setting the option defaultselectedlabel to Field flow.

Choose content to be ajaxed:

<div class="wb-fieldflow" data-wb-fieldflow='{"defaultselectedlabel":"I am an empty option (default)"}'>
	<p>Choose content to be ajaxed:</p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
		<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
		<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
		<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
		<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
	</ul>
</div>

Customize the submit button

The best way to customize the submit button is by coding the form wrapper and letting Field flow know that he should not render the form contained by setting the option noForm to true

Choose content to be ajaxed:

  • (Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
  • (Set 2) Vestibulum pretium tortor vel facilisis sodales.
  • (Set 3) Nunc sit amet dui ut justo efficitur dapibus.
  • (Set 4) Praesent at purus ut turpis sollicitudin aliquam.
  • (Set 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-frmvld"><form>
	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
		</ul>
	</div>
	<input class="btn btn-default btn-lg mrgn-bttm-md" type="submit" value="My custom submit button" />
</form></div>

The i18n configuration option Deprecated

Deprecated: That options is a work around until the text used in the plugin get translated all every languages supported by WET and be integrated in the i18n cvs file. This is provided as informational purpose and work well when there is only one field flow feature, but it could be not working as specified when interacting with multiple field flow plugin on the same page. This configuration options are planned to be removed once the text will use the i18n WET core component.

i18n:

btn
Text for the submit button
  • English default: "Continue"
  • French default: "Allez"
defaultsel
Text for the first default drop down option
  • English default: "Make your selection..."
  • French default: "Sélectionnez dans la liste..."
required
Text for the required label
  • English default: "required"
  • French default: "obligatoire"

Setting those options could impact all the other dropdown.

Choose content to be ajaxed:

<div class="wb-fieldflow" data-wb-fieldflow='{
	"i18n": {
		"btn": "Do the action",
		"defaultsel": "Humm, pick an item you like",
		"required": "You need to choose something"
	}
}'>
	<p>Choose content to be ajaxed:</p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
		<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
		<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
		<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
		<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
	</ul>
</div>
Date modified: