Field flow basic configuration

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

Field flow
Field flow basic configuration (current)
Field flow advanced
Field flow alternatives

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?

Part 1 (hash)
Part 2 (hash)
Part 3 (hash)
Part 4 (hash)
Part 5 (hash)
ul (selector)
.filter-selector (selector)
Multi hash [.section1,.section2,.section3] (selector)

<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:

(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-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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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:

Inserting content
Photo galery
Draw charts
Expand and collapse content
Set a consistant height
Popup content

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

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

Ajax example

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.
Ajax filtering, ul (selector)

<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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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.

<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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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?

Set 1 [A] - Part 1 [B]
Set 2 [A] - Part 2 [B]
Set 3 [A] - Part 3 [B]
Set 4 [A] - Part 4 [B]
Set 5 [A] - Part 5 [B]

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.

<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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
		</ul>
	</div>
</form></div>

Make first item default option

Find the plugin for the action you need:

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

(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-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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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.

(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-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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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: My hidden label.

(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-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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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:

(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-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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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

<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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> 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:

(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-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) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
	</ul>
</div>

Page details

Date modified:: 2023-12-01

Language selection

Search

Field flow basic configuration

Ajax filtering

Specifying what UI to render

Specifying the action

Redirection example

Ajax example

Make immediate action upon selection

Make multiple actions

Ajax Output A (`id="ajaxOutA"`)

Ajax Output B (`id="ajaxOutB"`)

Making the field optional

Make first item default option

Custom labeling

Prevent to auto-insert the "required" red label

Specify a quick label

Sophisticated labeling

Specifying what to use as being the label

Customize the default selected label

Customize the submit button

The `i18n` configuration option Deprecated

Page details

Field flow basic configuration

Ajax filtering

Specifying what UI to render

Specifying the action

Redirection example

Ajax example

Make immediate action upon selection

Make multiple actions

Making the field optional

Make first item default option

Custom labeling

Prevent to auto-insert the "required" red label

Specify a quick label

Sophisticated labeling

Specifying what to use as being the label

Customize the default selected label

Customize the submit button

The i18n configuration option Deprecated

Page details

The `i18n` configuration option Deprecated