Field flow basic configuration
How to use field flow to create small/low scale user interaction.
- Ajax filtering
- Specifying what UI to render
- Specifying the action
- Make immediate action upon selection
- Make multiple actions
- Making the field optional
- Custom labeling
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,optgroupelements) 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) 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:
- 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": "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:
- (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) 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.
<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?
- 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) 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.
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) 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.
- (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) 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: 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) 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:
- (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) 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
<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:
- (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) Sed eget dui ac nunc mattis consequat in a ex.</li>
</ul>
</div>- Date modified: