Déroulement de champs - Documentation

Needs translation

Purpose

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

This plugin is highly customizable and work 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.
  • Steamline complex navigation through multiple option.

Do not use when

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

Be carreful when

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

Working example

English:

French:

How to implement

Take also a look of the varieties of working examples.

  1. Create an unordered bullet list where each list item is a link to a page
    <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>
  2. Insert a paragraph before that list, it will be used to label the drop down (select).
    <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>
  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="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>

Complex example Content preparation step

We recommend to do a content preparation step when your are planning to use the advanced fonctionality of this plugin. Preparation step could look like as the following but not limited to:

  • Define what is the main result (business goal) you want, like insert content, redirect the user, filtering tables, ...
  • Design a full decission tree that represent all the possible results.
  • For each node (item) combination, define actions that should be taken, like:
    • Node 3 - Action 1: Insert content XYZ in the page feature container;
    • Node 3 - Action 2: Insert content ABC that have WET component;
  • Review and get approved the logic of your mapping with a web specialist that know and have experience of using this plugin. He should be able to let you know the feasibility and the complexiness.
  • Develop an early prototype and finalize feasibility test
  • Finalise the content, for the logic and for the content, as per your internal process.
  • Do a high fidelity prototype.

Abstract fieldflow event chain

  • Upon plugin initialisation
    • [wet-boew plugin] Init: WET core initiate the creation of a fieldflow component. The fieldflow control is registered in the parent form
    • [extension] Ready: Notify the exention that it should init() and get his things ready to execute actions that is support.
  • When creating a control
    • [Control] Draw: Read the html, standardize the output data
    • [Form component] Create ctrl: Create a component on the page (select, radio, checkbox). This component will be register to the field flow control
  • When a selected option have action
    • [Control] Reset: Reset the initial state of the control, as configure
    • [Action] Clean: Cleaning task from the previous executed action
    • [Action] Action: An option has been selected, action need to be executed. Action can be postponed upon form submission.
  • When the form is submited
    • [Action] Submit: When an action is postponed, triggered upon form submission. An action could prevent the form submission.
    • [Action] Submited: Triggered after all the submit action has been completed and just before the final form submission happend.

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 Wont generate a form wrapper, it is assumed it already exists and it is surronding 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 a data table informatin to create a field flow control. The additional property fltrseq is requried.
outputctnrid Indicate what container in the page should be used to output content, like ajax data-wb-fieldflow='{"noForm": true}'
false (default):
Will create a container next to the form to output.
[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 contain a 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 what 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 checkbox.
radio
Create a list of checkbox.
default Specify a action or an array of action to be applied everytime a option is selected. data-wb-fieldflow='{"default": { [action] } } or data-wb-fieldflow='{"default": [ { [action] }, { [action] } ] }
false (default):
Do nothing
Object
Execute the action prior actions defined by the options.
Array
Execute all those actions prior actions defined by the options.
reset Specify a action or an array of action to be applied everytime 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 action
base Establish a baseline on which subsequent action will be extended from data-wb-fieldflow='{"base": { [action configuration to use as a baseline] } }
false (default):
Nothing
Object
Those configuration would be re-used in all action 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.
inline Indicate to render a inline interface. Availble only for {"renderas":"checkbox"} and {"renderas":"radio"} data-wb-fieldflow='{"renderas": "[radio|checkbox]", "inline": true}
false (default):
Render one checkbox or radio per line
true
Checkbox or radio are side by side.
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 property can be used outside the fltrseq context like data-wb-fieldflow='{"srctype": "tblfilter", "columng": 0}. If Column filter object property and the fltrseq property is present, then the "Column filter object" will be know as being the first column being filtered, then 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 unknow item (data-wb-fieldflow="something"). Usually use in conjonction with "prop". data-wb-fieldflow='{"action": "[Name of the action]"}
false (default):
ajax
Name of the action
A valid action, the action build-in are listed in the following section.
prop Define the default property for unknow item (data-wb-fieldflow="something"). Usually use in conjonction with "action". data-wb-fieldflow='{"prop": "[Name of the property]"}
false (default):
url
Name of the property
A property recongnised by the the action where his value will be the set by the value of the unknow item.
actionData Define a base object for action created from unknow item. Usually use in conjonction with "action" and "prop". data-wb-fieldflow='{"actionData": { [...] }}
false (default):
Use an empty object { }
An object
Will extend the action item, after his 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 an 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 Experimental Specify the name of an fieldflow extension to allow to run his 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 let 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 mendatory text that is added in the select label between parentisis 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 action to perform when one specific item is selected. Some action are incompatible like it make no sense to inserting content through ajax and redirecting 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.

  • Option: action
  • How to configure: data-wb-fieldflow='{"action": "ajax", ...}'
Value Description How to configure Options
Required Optional
ajax (default) Insert live content into the current page. It use the data-ajax plugin. data-wb-fieldflow='{"action": "ajax", ...}'
  • url
  • type
  • container
  • clean
  • trigger
  • target
redir Page redirection. Default when the list item only contain an anchor. data-wb-fieldflow='{"action": "redir", ...}'
  • url
  • target
toggle Toggle (show/hide) an element on the current page. It use 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 to 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 act similar as 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 a 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 haven't be 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 be only 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's 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's 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 specify 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 is specify 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 specify on what 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 agains the specified column in order to filter the rows.
csvextract tblfilter

Assume the column value are CSV and then it is use 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 specify 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 desabling smart search, as smart search use 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 contain html in order to insert additional information sounrounding 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. Event that is specific related to an action is scoped to the field flow control that have initiated the action. By default, field flow control do not conflict with other field flow control or subsequent field flow control.

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 to happend 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 current control that have 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 retreived 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 upon form submission.
removeClass.submit.wb-fieldflow
  • removeClass
Triggered automatically upon form submission. Add the specified class to the DOM elements retreived 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 generate 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 generate 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 generate 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 apply 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 need to perform some cleaning task upon value change or when the control that initiated the action are destroyed. For example:
Toggle
Perform a toogle 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 Experimental
  • Plugin core
Triggered automatically when wb-fieldflow has finished is initialization. It let the field flow extension know that the field flow plugin is ready to operate and require 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 an 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

Date de modification :