Language selection

Search


Field flow - Documentation

Purpose

Provide an alternative user interface when a page contains a really long list. This plugin has two action phases. The first phase, initiation, creates a drop down to let the user select an option. The second phase, action, will provide results to the user like redirecting him, ajax-in content, toggle content, or creating a second drop down.

This plugin is highly customizable and works in three phases

  1. Generate the user interface
  2. Action upon selection
  3. Action upon submission

Usage

Use when

  • Provide an alternative way to navigate easier in long listing.
  • Streamline complex navigation through multiple option.

Do not use when

  • For a list of 3 items or less, take time to reconsider the default rendering interface.
  • Simple navigation mechanism (like tabs or expand/collapse (details/summary)) is more suitable for your use case.

Be careful when

  • Creating a complex user interface, you may need to follow additional requirements for acessibilty (WCAG) or progressive enhancement, like providing an alternative representation.
  • Amazing thing could be done, but depending on how you configure it you can make your page fail WCAG.

Working example

English:

French:

How to implement

Also take a look at the various working examples.

  1. Create an unordered bullet list where each list item is a link to a page
    <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 gallery</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 consistent height</a></li>
    	<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
    </ul>
  2. Insert a paragraph before the list to be used to label the drop down (select).
    <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 gallery</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 consistent height</a></li>
    	<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
    </ul>
  3. Wrap your paragraph and the list with a <div> container to call the plugin
    <div class="wb-fieldflow">
    	<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 gallery</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 consistent 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>

Complex example Content preparation step

We recommend to do a content preparation step when you are planning to use the advanced functionality of this plugin. Preparation steps could include, but are not limited to, the following:

Abstract fieldflow event chain

Class delimiter

Use those default class to specify thing inside you template

[class="wb-fieldflow-label"]
Indicate content to use for labeling the control

Configuration options

Document the public configuration options that can be used by implementers or developers.

Set on the plugin <div class="wb-fieldflow" data-wb-fieldflow="{...}">

Option Description How to configure Values
noForm Won't generate a form wrapper. It is assumed it already exists and it is surrounding the control. data-wb-fieldflow='{"noForm": true}'
false (default):
Create a form container along with the form validator plugin (wb-frmvld) and a submit button
true:
A binding will be done with the parent form element.
srctype Define what content interpreter to use in order to create a field flow control. data-wb-fieldflow='{"srctype": "wb-fieldflow"}'
false (default):
Same as if the value was set to wb-fieldflow. It will use the standard content interpreter.
Table filter tblfilter:
It will use data table information to create a field flow control. The additional property fltrseq is requried.
outputctnrid Indicate what container in the page the fieldflow control should be rendered data-wb-fieldflow='{"outputctnrid": "myID"}'
false (default):
Will render the field flow controls next to fieldflow plugin.
[ID]:
Any valid ID that could contain flow content.
source Specify element to use as the source to feed. data-wb-fieldflow='{"source": "[jQuery selector]"}
false (default):
Use the current plugin container
jQuery Selector
A jQuery selector that contains an understandable structure to proceed. For example, when using field flow to dynamicly filter a table, the source property will make the binding to that table.
renderas Specify which UI to render. data-wb-fieldflow='{"renderas": "[Name of the UI]"}
false (default):
Create a drop down for the field flow UI. Same as if the value was set to select.
checkbox
Create a list of checkboxes.
radio
Create a list of checkboxes.
default Specify an action or an array of actions to be applied every time an option is selected. data-wb-fieldflow='{"default": { [action] } } or data-wb-fieldflow='{"default": [ { [action] }, { [action] } ] }
false (default):
Do nothing
Object
Execute the action's prior actions defined by the options.
Array
Execute all the action's prior actions defined by the options.
reset Specify an action or an array of actions to be applied every time an option is changed or when the control is destroyed. data-wb-fieldflow='{"reset": { [action] } } or data-wb-fieldflow='{"reset": [ { [action] }, { [action] } ] }
false (default):
Do nothing
Object
Execute the single action
Array
Execute all the actions
base Establish a baseline on which subsequent actions will be extended from data-wb-fieldflow='{"base": { [action configuration to use as a baseline] } }
false (default):
Nothing
Object
The configuration would be re-used in all actions selected. When specifying the action for your selectable option, it is possible to overwrite a value defined by the base but not to remove it.
defaultIfNone Specify an action or an array of actions to be applied when no action is set for that particular field flow instance. data-wb-fieldflow='{"defaultIfNone": { [action] } } or data-wb-fieldflow='{"defaultIfNone": [ { [action] }, { [action] } ] }
false (default):
Do nothing
Object
Execute the single action
Array
Execute all the actions
gcChkbxrdio Indicate to render the GC Checkboxes and radio design pattern. Available only for {"renderas":"checkbox"} and {"renderas":"radio"} data-wb-fieldflow='{"renderas": "[radio|checkbox]", "gcChkbxrdio": true}
false (default):
Render default browser's checkbox or radio
true
Checkbox or radio are larger.
inline

Indicate to render an inline interface. Available only for {"renderas":"checkbox"} and {"renderas":"radio"}.

Can also be applied to render an inline submit button {"inline":"true"}

data-wb-fieldflow='{"renderas": "[radio|checkbox]", "inline": true}

data-wb-fieldflow='{ "inline": true}

false (default):
Render one checkbox or radio per line
true
Checkbox or radio are side by side
(if applied without renderas) Submit button is inline.
btnStyle Select color for inline submit button. Available only for inline button interface. data-wb-fieldflow='{"inline": true, "btnStyle": "[color class]"}
Default:
default class is "default"
String:
Any valid color class suffix from Bootstrap 3:"default", "primary", "success", "info", "warning", "danger", "link"
showLabel Showing label for drop-down (select) with inline button (optional, if not provided, label will be hidden by default). Available only for drop-down with inline button. data-wb-fieldflow='{"inline": true, "showLabel": "true "}
Default: false
the label of the inline select is not visible
Boolean: true
the label of the inline select is visible
isoptional Indicate if the field flow control are optional. data-wb-fieldflow='{"isoptional": true}
false (default):
The field flow control require an input and get validated by the form validation plugin
true
The field flow control are optional.
fltrseq Array indicating the table filtering sequence to follow. Availble only for and required when {"srctype":"tblfilter"} data-wb-fieldflow='{"srctype": "tblfilter", "fltrseq": [{Column filter object}]}
false (default):
Render one checkbox or radio per line
true
Checkbox or radio are side by side.
Column filter object Object contained in the fltrseq array. Required for adding item in fltrseq. "fltrseq": [{Column filter object}, {Column filter object}, ...]

Note that all the following properties can be used outside the fltrseq context like data-wb-fieldflow='{"srctype": "tblfilter", "columng": 0}. If the Column filter object property and the fltrseq properties are present, then the "Column filter object" will be know as being the first column being filtered, followed by the column being filtered in the array.

Properties:

  • column (required): Integer representing the column number or a DataTable column selector.
  • csvextract: How to extract the value to feed the drop down from the selected column.
    false (default)
    The value of each list item <li> will be extracted.
    true
    The information of each cell of the select column will be extracted as a Comma-Separated Values.
  • regex as defined in DataTable search() API
  • smart as defined in DataTable search() API
  • caseinsen as defined in DataTable search() API
  • defaultselectedlabel as defined by the property of the same name in the Text and i18n row group section in this table.
  • label: Text label to use or a jQuery selector or text HTML.
  • lblselector as defined by the property of the same name in the Text and i18n row group section in this table.
  • renderas as defined by the property of the same name in this row group section in this table.
action Define the default action for an unknow item (data-wb-fieldflow="something"). Usually used in conjunction with "prop". data-wb-fieldflow='{"action": "[Name of the action]"}
false (default):
ajax
Name of the action
A valid action. The build-in actions are listed in the following section.
prop Define the default property for an unknow item (data-wb-fieldflow="something"). Usually used in conjunction with "action". data-wb-fieldflow='{"prop": "[Name of the property]"}
false (default):
url
Name of the property
A property recognized by the the action where its value will be set by the value of the unknow item.
actionData Define a base object for an action created from an unknow item. Usually use in conjunction with "action" and "prop". data-wb-fieldflow='{"actionData": { [...] }}
false (default):
Use an empty object { }
An object
Will extend the action item after its creation.
attributes Add attributes on the form input elements, like select, during their creation. data-wb-fieldflow='{ "attributes": { "attributeName": "value", [...] } }
false (default):
No custom element is added
An object with key value pair
The key represent the name of the attribute and the value is the value that would be set on the attribute.
itmselector Specify what item to use to create fieldflow items. data-wb-fieldflow='{ "itmselector": "[jQuery selector]" }'
false (default):
Select all list items of the first unordered list. If a header block is specified, the selector will be applied after.
jQuery Selector
A jQuery selector used to select the label.
noreqlabel Flag to not add the "required" red labeling during the field creation. data-wb-fieldflow='{ "noreqlabel": true }'
false (default):
The labeling text "required" will be appended to the field label
true
There is no text appended to the field label
ext Provisional Specify the name of a fieldflow extension to allow it to run its own initialisation. data-wb-fieldflow='{"ext": "[Extended plugin name]"}
false (default):
Do nothing
Name of the extension
Will trigger the event [Name of the extension].ready.wb-fieldflow where it lets the extension know that the field flow plugin is ready to operate and require that extension to be fully functional.
DOM Manipulation on plugin initialisation
unhideelm Remove hidden class data-wb-fieldflow='{"unhideelm": "#myJQuerySelector"}'
false (default):
Do nothing
jQuery Selector
A jQuery selector that return result for the current document.
hideelm Add hidden class data-wb-fieldflow='{"hideelm": "#myJQuerySelector"}'
false (default):
Do nothing
jQuery Selector
A jQuery selector that return result for the current document.
Text and i18n
defaultselectedlabel Text to use for the default selected option. data-wb-fieldflow='{ "defaultselectedlabel": "default selected option text" }'
false (default):
Use "Make your selection..." in English and "Sélectionnez dans la liste..." in French
Text
Text only, providing HTML markup may cause unwanted result.
lblselector Specify how to find the label through a jQuery selector. data-wb-fieldflow='{ "lblselector": "[jQuery selector]" }'
false (default):
Use the html of the first child element
jQuery Selector
A jQuery selector used to select the label.
i18n Deprecated Allow to set the internationalisation text to use for this plugin. Setting this option could impact default text used for other wb-fieldflow plugin in the same page.
i18n.btn Deprecated Set the label to use for the submit button when creating the form wrapper data-wb-fieldflow='{"i18n": { "btn": "Continue" } }'
English default:
Continue
French default:
Allez
Textual value:
Any text value
i18n.defaultsel Deprecated Set label the default dropdown option to use. data-wb-fieldflow='{"i18n": { "defaultsel": "Make your selection..." } }'
English default:
Make your selection...
French default:
Sélectionnez dans la liste...
Textual value:
Any text value
i18n.required Deprecated Set the mandatory text that is added in the select label between parenthesis data-wb-fieldflow='{"i18n": { "required": "required" } }'
English default:
required
French default:
obligatoire
Textual value:
Any text value

Set on list item <li data-wb-fieldflow="...">

Kind of value supported:

Text
data-wb-fieldflow="..." URL Location of a file that will inserted (through ajax) in a container that follow the plugin. The data-ajax filter selector are supported. data-wb-fieldflow="MyFragment.html" is equivalent to data-wb-fieldflow='{"action": "ajax", "url": "MyFragment.html", "type": "replace"}'
Object
<li data-wb-fieldflow="{...}"> Define how the action should be performed. See bellow for all the options.
Array
<li data-wb-fieldflow="[{...}, {...}, {...}]"> Allow to set multiple actions to perform when one specific item is selected. Some actions are incompatible,since it makes no sense to insert content through ajax and redirect the user somewhere else.

The "action" option

Define the action to take upon selection/form submission. Based on the value, some other option could be required, optional or ignored.

Value Description How to configure Options
Required Optional
ajax (default) Insert live content into the current page. It uses the data-ajax plugin. data-wb-fieldflow='{"action": "ajax", ...}'
  • url
  • type
  • container
  • clean
  • trigger
  • target
redir Page redirection. Default when the list item only contains an anchor. data-wb-fieldflow='{"action": "redir", ...}'
  • url
  • target
toggle Toggle (show/hide) an element on the current page. It uses the toggle plugin. data-wb-fieldflow='{"action": "toggle", ...}'
  • toggle
  • target
append Append a secondary drop down from an inline template. data-wb-fieldflow='{"action": "append", ...}'
  • source
  • target
  • srctype
addClass Add a class to the element specified by the source selector. data-wb-fieldflow='{"action": "addClass", ...}'
  • source
  • class
  • target
removeClass Remove a class from the element specified by the source selector. data-wb-fieldflow='{"action": "addClass", ...}'
  • source
  • class
  • target
query Set a custom query parameter for the destination page upon redirection. data-wb-fieldflow='{"action": "query", ...}'
  • name
  • value
  • target
tblfilter Apply a filter to a data table created with wb-tables plugin. data-wb-fieldflow='{"action": "tblfilter", ...}'
  • source
  • column
  • value
  • target
  • regex
  • smart
  • caseinsen

Note about "Append" required options {"action": "append", ...}

The append action acts similar to when you initially configure the field flow, but instead of creating the field flow working environment it will simply add the field flow control next to the current one.

You can configure an appended control as you will have it setup the configuration option for <div class="wb-fieldflow" data-wb-fieldflow="{...}">. For example:

{
	"action": "append",
	"srctype": "tblfilter",
	"source": "#MyTableID",
	"csvextract": true,
	"isoptional": true,
	"column": 5,
	"defaultselectedlabel": "View all results",
	"label": "Choose something:"
}

The "append" action will set the srctype to wb-fieldflow by default if not specified and it will throw an error if the source hasn't been set.

Configuration options for each action.

Source code of how the following table is filtered
<form id="frmActionConfig">
	<div class="wb-fieldflow" data-wb-fieldflow='{
		"noForm": true,
		"unhideelm":
		"#frmActionConfig",
		"srctype":"tblfilter",
		"source":"#actionConfig",
		"column":1,
		"defaultselectedlabel": "All the configuration options",
		"label":"Filter by type of action:",
		"csvextract": true
	}'></div>
</form>

<table id="actionConfig" class="table wb-tables" data-wb-tables='{
	"ordering" : false,
	"paging": false,
	"columnDefs": [ { "targets": [ 1 ], "visible": false } ] }'>
	<thead>
		<tr>
			<th>Option</th>
			<th>Available for</th>
			<th>Description</th>
			<th>How to configure</th>
			<th>Values</th>
		</tr>
	</thead>
	<tbody>

	[...]

	</tbody>
</table>
Option Available for Description How to configure Values
action ajax,redir,toggle,append,query,tblfilter

Specify what action to take

Available for:

  • ajax
  • redir
  • toggle
  • append
  • query
  • tblfilter
data-wb-fieldflow='{"action": "ajax", ...}'
ajax (default):
Insert content
redir:
Redirection
toggle:
Toggle (show/hide) content
append:
Append a secondary drop down
query:
Add a query parameter for the page to be redirected to.
tblfilter:
Apply a filter to a data table created with wb-tables plugin.
url ajax,redir

Address of the hyperlink or the location of the HTML fragment.

Available for:

  • ajax
  • redir
data-wb-fieldflow='{"url": "path/to/my/file.html"}' URL
live ajax,toggle

Perform the action upon selection change instead of form submission.

Available for:

  • ajax
  • toggle
data-wb-fieldflow='{"live": true}' URL
type ajax

Define how content will be inserted from the container perspective.

Available for:

  • ajax
data-wb-fieldflow='{"action": "ajax", "url": "path/to/my/file.html", "type": "replace"}'
  • replace(default)
  • after
  • append
  • before
  • prepend

This value map how to call the data-ajax plugin

container ajax

Specify the container to use to insert the ajax(ed) content

Available for:

  • ajax
data-wb-fieldflow='{"action": "ajax", "url": "path/to/my/file.html", "container": "#jQuerySelector"}' jQuery selector

(By default the container will be a empty container inserted after the form.)

clean ajax

Call empty() jQuery function

Available for:

  • ajax
data-wb-fieldflow='{"action": "ajax", "url": "path/to/my/file.html", "clean": "#jQuerySelector"}' jQuery selector
trigger ajax

Initiate WET features of the inserted content.

Available for:

  • ajax
data-wb-fieldflow='{"action": "ajax", "url": "path/to/my/file.html", "clean": true}'
false (default):
Content is kept as is
true:
Will initiate any WET feature that exist in the inserted content
target ajax,redir,toggle,append,query,tblfilter

Specify an action that should only be executed and considered when the targeted "option" is selected, like by a subsequent drop down.

Available for:

  • ajax
  • redir
  • toggle
  • append
  • addClass
  • removeClass
  • query
  • tblfilter
data-wb-fieldflow='{"action": "ajax", "url": "path/to/my/file.html", "target": "containerID"}' ID of a list item that will be transform into a drop down.

(By default the target action is to current item)

toggle toggle

Selector or a toggle configuration options

Available for:

  • toggle
data-wb-fieldflow='{"action": "toggle", "toggle": "#jQuerySelector"}' or data-wb-fieldflow='{"action": "toggle", "toggle": { "selector": "#jQuerySelector"} }'
jQuery selector:
Selector of an element to toggle
toggle configuration:
Any configuration supported as defined in the toggle documentation
toggle.stateOn toggle

A toggle configuration options. CSS class that is added to elements when they are toggled on.

Available for:

  • toggle
data-wb-fieldflow='{"action": "toggle", "toggle": { "selector":"#jQuerySelector", "stateOn":"cssClass" } }' or data-wb-fieldflow='{"action": "toggle", "toggle": { "selector": "#jQuerySelector"} }'
Default:
Use the class "visible"
String
A CSS class or whatever supported by the same property named defined in the toggle documentation
toggle.stateOff toggle

A toggle configuration options. CSS class that is added to elements when they are toggled off.

Available for:

  • toggle
data-wb-fieldflow='{"action": "toggle", "toggle": { "selector":"#jQuerySelector", "stateOff":"cssClass" } }' or data-wb-fieldflow='{"action": "toggle", "toggle": { "selector": "#jQuerySelector"} }'
Default:
Use the class "hidden"
String
A CSS class or whatever supported by the same property named defined in the toggle documentation
class addClass,removeClass

CSS Class name.

Available for:

  • addClass
  • removeClass
data-wb-fieldflow='{"action": "addClass", "source": "#id", "class": "myclass" }' A CSS class
source append,addClass,removeClass,tblfilter

jQuery selector of the sub wb-fieldflow template to be inserted. This configuration option is required for table filtering because it is specified on which data table the filter should be applied.

Available for:

  • append
  • addClass
  • removeClass
  • tblfilter

data-wb-fieldflow='{"action": "append", "source": "#jQuerySelector"}'

Or like:

data-wb-fieldflow='{"action": "tblfilter", "source": "#data-table-id"}

jQuery selector and when the action is set to tblfilter the source should refer to a data table enhanced with tables plugin.
name query

Name of the query parameter that will be insert in the redirection URL. The other option "value" is required.

Available for:

  • query
data-wb-fieldflow='{"action": "query", "name": "ParameterName", "value": "aValue"}' Text without containing space that could be a valid name for a hidden field element.
value query

Value of the query parameter that will be insert in the redirection URL. The other option "name" is required.

Available for:

  • query
data-wb-fieldflow='{"action": "query", "name": "ParameterName", "value": "aValue"}' Value that could be valid as being the value of a hidden field element.
renderas append,tblfilter

Specify what UI to render.

Available for:

  • append
  • tblfilter
data-wb-fieldflow='{"action": "append", "renderas": "[Name of the UI]"}
false (default):
Create a drop down for the field flow UI. Same as if the value was set to select.
checkbox
Create a list of checkbox.
radio
Create a list of checkbox.
column tblfilter

Required for table filtering. This specifies on which column the filter should be applied

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 5}
Number
Integer representing the column number where the first column of table is the number "0"
Column selector
A valid DataTable column selector
value tblfilter

Required for table filtering. This specifies on which value the filter should be applied

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "value": "a value to be filtered about"} A value that will be searched against the specified column in order to filter the rows.
csvextract tblfilter

Assume the column values are CSV and then it is used to feed the item of the field flow control from the selected column.

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 0, "csvextract":true}
false (default)
The value will be the content of each list item <li> for the specified column.
true
The value will be the Comma-Separated Values of each cell for the specified column. It is assumed that column only content CSV data and nothing else.
limit tblfilter

This specifies to show a subsequent filter, based on the fltrseq, only if the number of rows displayed is larger than the limit.

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "limit": 5}
false (default)
The limit is set to 10 items.
Number
Integer representing minimum number of rows displayed in order to show the subsequent fltrseq.
regex tblfilter

Treat the searched value as a regular expression. Enable regular expressions without disabling smart search. Because smart search uses regular expressions, both might conflict and cause unexpected results.

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 0, "regex":true, "smart":false} Boolean, default false (as defined in DataTable search() API)
smart tblfilter

Perform smart search. Note that to perform a smart search, DataTables uses regular expressions, so if enable regular expressions using the regex parameter to this method, you will likely want to disable smart searching as the two regular expressions might otherwise conflict and cause unexpected results.

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 0, "smart":false} Boolean, default true (as defined in DataTable search() API)
caseinsen tblfilter

Do case-insensitive matching.

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 0, "caseinsen":false} Boolean, default true (as defined in DataTable search() API)
defaultselectedlabel tblfilter

Empty label to use where the filtering is not applied

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 0, "defaultselectedlabel":"[my default options]"} String, as defined by the property of the same name in the Text and i18n row group section in configuration option set on the plugin table.
label tblfilter

Label to use for the field flow control

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 0, "label":"[my label]"}
false (default)
The column title will be use as the label
String
Text to use as the label
jQuery Selector
Select content on the current page to be use as the label.
HTML text
Text representing HTML content that will be used as the label.
lblselector tblfilter

Select the label to use. This could be useful when the label configuration option contains html in order to insert additional information surrounding the label itself.

Available for:

  • tblfilter
data-wb-fieldflow='{"action": "tblfilter", "column": 0, "lblselector":"[jQuery selector]"} jQuery selector, as defined by the property of the same name in the Text and i18n row group section in configuration option set on the plugin table.

Events

Document the public events that can be used by implementers or developers. Events that are specifically related to an action are scoped to the field flow control that has initiated the action. By default, field flow controls do not conflict with other field flow controls or subsequent field flow controls.

Source code of how the following table is filtered
<form id="frmEvents">
	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true, "unhideelm": "#frmEvents", "srctype":"tblfilter", "source":"#events", "column":0, "defaultselectedlabel": "All the events", "label":"Filter by type of action:"}'></div>
</form>

<table id="events" class="table wb-tables" data-wb-tables='{ "ordering" : false, "paging": false }'>
	<thead>
		<tr>
			<th>Event</th>
			<th>Trigger</th>
			<th>What it does</th>
		</tr>
	</thead>
	<tbody>

	[...]

	</tbody>
</table>
Event Trigger What it does
redir.action.wb-fieldflow
  • redir
Triggered automatically upon selection change. The action is delayed and happens on form submission.
redir.submit.wb-fieldflow
  • redir
Triggered automatically upon form submission. Set the redirection url to the form action attribute.
query.action.wb-fieldflow
  • query
Triggered automatically upon selection change. Save the information for form upon submission
ajax.action.wb-fieldflow
  • ajax
Triggered automatically upon selection change. Execute the ajax instruction if live flag is specified otherwise it will postpone the action upon form submission.
ajax.submit.wb-fieldflow
  • ajax
Triggered automatically upon form submission. Execute the ajax instruction.
toggle.action.wb-fieldflow
  • toggle
Triggered automatically upon selection change. Execute the toggle instruction if live flag is specified otherwise it will postpone the action upon form submission.
toggle.submit.wb-fieldflow
  • toggle
Triggered automatically upon form submission. Execute the toggle instruction.
append.action.wb-fieldflow
  • append
Triggered automatically upon selection change. Append a field flow control next to the current control that triggered this event.
addClass.action.wb-fieldflow
  • addClass
Triggered automatically upon selection change. Will add the specified class if live flag is specified otherwise it will postpone the action upon form submission.
addClass.submit.wb-fieldflow
  • addClass
Triggered automatically upon form submission. Add the specified class to the DOM elements retrieved with the source jQuery selector.
removeClass.action.wb-fieldflow
  • removeClass
Triggered automatically upon selection change. Will add the specified class if live flag is specified. Otherwise it will postpone the action until form submission.
removeClass.submit.wb-fieldflow
  • removeClass
Triggered automatically upon form submission. Add the specified class to the DOM elements retrieved with the source jQuery selector.
tblfilter.action.wb-fieldflow
  • tblfilter
Triggered automatically upon selection change. Filter the data table rows by searching on the specified column.
tblfilter.draw.wb-fieldflow
  • tblfilter
Triggered automatically when the creation of a field flow control is requested. Read the information in the table and standardize the information in order to be processed by the event that create the control (renderas).
wb-fieldflow.draw.wb-fieldflow
  • Plugin core
Triggered automatically when the creation of a field flow control is requested. Read the information from the standard inline template and standardize the information in order to be processed by the event that create the control (renderas).
select.createctrl.wb-fieldflow
  • Plugin core
Triggered automatically when a field flow control typed select (drop down) is requested. From a standardized information it generates the html code being the next field flow control.
checkbox.createctrl.wb-fieldflow
  • Plugin core
Triggered automatically when a field flow control typed checkbox is requested. From a standardized information it generates the html code being the next field flow control.
radio.createctrl.wb-fieldflow
  • Plugin core
Triggered automatically when a field flow control typed radio is requested. From a standardized information it generates the html code being the next field flow control.
reset.wb-fieldflow
  • Plugin core
Triggered automatically on field flow control and sub control when they need to be reseted or destroyed. It applies the reset actions set by the configuration of the control.
clean.wb-fieldflow
  • Plugin core
Triggered automatically upon when a cleaning task for action need to selection change after a toggle action has been completed. When a completed action needs to perform some cleaning task upon value change or when the control that initiated the action is destroyed. For example:
Toggle
Perform a toggle action. It will trigger the "off" state.
ajax
Execute empty() on the specified element.
tblfilter
Remove the search instruction that was set.
[Name of the extension].ready.wb-fieldflow Provisional
  • Plugin core
Triggered automatically when wb-fieldflow has finished is initialization. It lets the field flow extension know that the field flow plugin is ready to operate and requires that extension to be fully functional.
wb-init.wb-fieldflow
  • Plugin core
Triggered manually (e.g., $( ".wb-fieldflow" ).trigger( "wb-init.wb-fieldflow" );). Used to manually initialize the wb-fieldflow plugin. Note: The wb-fieldflow plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-fieldflow
  • Plugin core
Triggered automatically after a wb-fieldflow is initialized. Used to identify when an wb-fieldflow has initialized (target of the event)
$( document ).on( "wb-ready.wb-fieldflow", ".wb-fieldflow", function( event ) {
});
$( ".wb-fieldflow" ).on( "wb-ready.wb-fieldflow", function( event ) {
});
wb-ready.wb
  • Plugin core
Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing.
$( document ).on( "wb-ready.wb", function( event ) {
});
draw.wb-fieldflow
  • Plugin core
Upon creation of a drop down Used to notice the creation of a dropdown
$( document ).on( "draw.wb-fieldflow", ".wb-fieldflow", function( event ) {
});

Source code

Field flow source code on GitHub

Page details

Date modified: