Field flow advanced

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

• Custom ajax
• Append
• Add and remove CSS class
• Applying a set of default and reset action
• Define a base action object
• Redefine defaults behaviour of simple call
• Querying and form integration
• Toggle
• Table filtering

Custom ajax

<section id="ajaxPanel" class="panel panel-primary">
	<header class="panel-heading">
		<h3 class="panel-title"><code>id="ajaxPanel"</code> Aside panel, for example</h3>
	</header>
	<div class="panel-body">
		<p>(To illustrate <code>container</code> and <code>clean</code> options)</p>
	</div>
</section>

<div class="wb-fieldflow">
	<p>Choose content to be ajaxed?</p>
	<ul>
		<li data-wb-fieldflow="ajax/ajax-1.html">Set 1</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-1.html", "live": true}'>Set 1 - Do it live</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "live": true}'>Set 3 - Do it live</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "live": true}'>Set 4 - Do it live</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-2.html"}'>Set 2 - with action defined</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-2.html", "type": "replace"}'>Set 2 - with action and type defined</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body"}'>Set 3 - Use container: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body"}'>Set 4 - Use container: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body", "type": "append"}'>Set 4 - Append content to the container: $("#ajaxPanel .panel-body")</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body", "type": "prepend", "clean": "#ajaxPanel .panel-body"}'>Set 3 - Prepend content to the contenainer $("#ajaxPanel .panel-body") and clean it on change</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-5.html"}'>Set 5</li>
		<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-5.html", "trigger": true}'>Set 5 - with Trigger WET plugin</li>
	</ul>
</div>

Append

<div class="wb-fieldflow">
	<p>Find the plugin for the action you need.</p>
	<ul>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-fr.html"},
			{"action": "append", "source": "#language-question"}
		]'>Inserting content</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-fr.html"},
			{"action": "append", "source": "#language-question"}
		]'>Photo galery</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/charts/charts-fr.html"},
			{"action": "append", "source": "#language-question"}
		]'>Draw charts</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/details/details-fr.html"},
			{"action": "append", "source": "#language-question"}
		]'>Expand and collapse content</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-fr.html"},
			{"action": "append", "source": "#language-question"}
		]'>Set a consistant height</li>
		<li data-wb-fieldflow='[
			{"action": "redir", "target": "append-ex-en", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-fr.html"},
			{"action": "append", "source": "#language-question"}
		]'>Popup content</li>

	</ul>
</div>

<div id="language-question" class="hidden">
	<p>What language?</p>
	<ul>
		<li id="append-ex-en">English</li>
		<li id="append-ex-fr">French</li>
	</ul>
</div>

Are equivalent to:

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

	</ul>
</div>

Add and remove CSS class

Example of paragraph where the preceding field flow component could change my color.

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#addremoveCSSexample", "class": "text-muted text-primary text-success text-info text-warning text-danger" }
	}'>
	<p>Change the color of the following paragraph:</p>
	<ul>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-muted" }'>Muted</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-primary" }'>Primary</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-success" }'>Sucess</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-info" }'>Info</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-warning" }'>Warning</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#addremoveCSSexample", "class": "text-danger" }'>Danger</li>
	</ul>
</div>

<p id="addremoveCSSexample">Example of paragraph where the preceding field flow component could change my color.</p>

Applying a set of default and reset action

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#resetdefaultExample-en", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph1-en", "live": true }
	}'>
	<p>Change the color of the following paragraph:</p>
	<ul>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-en", "class": "text-muted" }'>Muted</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-en", "class": "text-primary" }'>Primary</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-en", "class": "text-success" }'>Sucess</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-en", "class": "text-info" }'>Info</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-en", "class": "text-warning" }'>Warning</li>
		<li data-wb-fieldflow='{ "action": "addClass", "source":"#resetdefaultExample-en", "class": "text-danger" }'>Danger</li>
	</ul>
</div>

File ajax/paragraph.html

<!DOCTYPE html>
<html>
<!-- DataAjaxFragmentStart -->

<div lang="en">
	<div id="paragraph1-en">
		<p id="resetdefaultExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>

	<div id="paragraph2-en">
		<p id="definebaseExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>

	<div id="paragraph3-en">
		<p id="defineDefaultExample-en">Example of paragraph where the preceding field flow component could change my color.</p>
	</div>
</div>

<div lang="fr">
	<div id="paragraph1-fr">
		<p id="resetdefaultExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>

	<div id="paragraph2-fr">
		<p id="definebaseExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>

	<div id="paragraph3-fr">
		<p id="defineDefaultExample-fr">Example d'un paragraphe qui change de couleur dépendant du choix du composant de déroulement de contenu précédent.</p>
	</div>
</div>

<!-- DataAjaxFragmentEnd -->
</html>

Define a base action object

This example is the same as applying a set of default, reset action but it set a base action object and executed action inherit from the base action.

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#definebaseExample-en", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph2-en", "live": true },
		"base" : { "action": "addClass", "source":"#definebaseExample-en" }
	}'>
	<p>Change the color of the following paragraph:</p>
	<ul>
		<li data-wb-fieldflow='{ "class": "text-muted" }'>Muted</li>
		<li data-wb-fieldflow='{ "class": "text-primary" }'>Primary</li>
		<li data-wb-fieldflow='{ "class": "text-success" }'>Sucess</li>
		<li data-wb-fieldflow='{ "class": "text-info" }'>Info</li>
		<li data-wb-fieldflow='{ "class": "text-warning" }'>Warning</li>
		<li data-wb-fieldflow='{ "class": "text-danger" }'>Danger</li>
	</ul>
</div>

Redefine defaults behaviour of simple call

Change the default behaviour when each items are configured.

<div class="wb-fieldflow" data-wb-fieldflow='{
		"reset": { "action": "removeClass", "source":"#definebaseExample-en", "class": "text-muted text-primary text-success text-info text-warning text-danger" },
		"default": { "action": "ajax", "url":"ajax/paragraph.html#paragraph3-en", "live": true },
		"actionData" : { "source":"#defineDefaultExample-en" },
		"action": "addClass",
		"prop": "class"
	}'>
	<p>Change the color of the following paragran</p>
	<ul>
		<li data-wb-fieldflow="text-muted">Muted</li>
		<li data-wb-fieldflow="text-primary">Primary</li>
		<li data-wb-fieldflow="text-success">Sucess</li>
		<li data-wb-fieldflow="text-info">Info</li>
		<li data-wb-fieldflow="text-warning">Warning</li>
		<li data-wb-fieldflow="text-danger">Danger</li>
	</ul>
</div>

Querying and form integration

<div id="myformid" class="wb-frmvld hidden">
<form action="wb-fieldflow-advanced.php" class="col-md-12">
	
	<fieldset>
		<legend><span class="field-name">Favourite pets</span></legend>
		<div class="checkbox">
			<label for="animal5"><input type="checkbox" name="animal" value="Dog" id="animal5" /> Dog</label>
		</div>
		<div class="checkbox">
			<label for="animal6"><input type="checkbox" name="animal" value="Cat" id="animal6" /> Cat</label>
		</div>
		<div class="checkbox">
			<label for="animal7"><input type="checkbox" name="animal" value="Fish" id="animal7" /> Fish</label>
		</div>
		<div class="checkbox">
			<label for="animal8"><input type="checkbox" name="animal" value="Snake" id="animal8" /> Snake</label>
		</div>
	</fieldset>


	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true, "unhideelm": "#myformid"}'>
		<p>You want to get more information about?</p>
		<ul>
			<li>Habitation
				<div class="wb-fieldflow-sub">
					<p>What kind of habitation are looking for?</p>
					<ul>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"wild"}'>Wild</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"recomhab"}'>Recommended</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"inside"}'>Inside</li>
						<li data-wb-fieldflow='[
							{"action": "query", "name":"moreinfo", "value":"outside"},
							{"action": "redir", "url": "http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"}
						]'>Outside</li>
				</div>
			</li>
			<li>Food
				<div class="wb-fieldflow-sub">
					<p>What kind of nutrition your are seeking?</p>
					<ul>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"healty"}'>Healty</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"nutrition"}'>Recommended</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"avoid"}'>To avoid</li>
						<li data-wb-fieldflow='{"action": "query", "name":"moreinfo", "value":"trending"}'>Trending</li>
				</div>			
			</li>

		</ul>
	</div>
	
	
	<input class="mrgn-bttm-lg" type="submit" value="Submit and look at the resulting URL" />
</form></div>

<details id="myformidAlternate">
	<summary>Alternative representation alloweing to get equivalent information.</summary>
	
	<p>Dog:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Dog&moreinfo=wild">Wild habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Dog&moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Dog&moreinfo=inside">Inside leaving</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Dog&moreinfo=outside">Outside leaving</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Dog&moreinfo=healty">Healty food</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Dog&moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Dog&moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Dog&moreinfo=trending">Trending meal</a></li>
	</ul>
	<p>Cat:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=wild">Wild habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=inside">Inside leaving</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=outside">Outside leaving</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=healty">Healty food</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Cat&moreinfo=trending">Trending meal</a></li>
	</ul>
	<p>Fish:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=wild">Wild habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=inside">Inside leaving</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=outside">Outside leaving</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=healty">Healty food</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Fish&moreinfo=trending">Trending meal</a></li>
	</ul>
	<p>Snake:</p>
	<ul>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=wild">Wild habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=inside">Inside leaving</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=outside">Outside leaving</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=healty">Healty food</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="wb-fieldflow-advanced.php?animal=Snake&moreinfo=trending">Trending meal</a></li>
	</ul>
</details>

Toggle

toggle: {
	stateOn: "visible",
	stateOff: "hidden"
}

<div class="wb-fieldflow">
	<p>Choose content to be toggle?</p>
	<ul>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#toggle-first"}'>Toggle first</li>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#toggle-second"}'>Toggle second</li>
		<li data-wb-fieldflow='{"action": "toggle", "toggle": "#toggle-first, #toggle-second"}'>Toggle both</li>
	</ul>
</div>

<div id="toggle-first" class="well hidden">
	<p>This is first <code>@id=toggle-first</code></p>
</div>

<div id="toggle-second" class="jumbotron hidden">
	<p>This is second <code>@id=toggle-second</code></p>
</div>

Without a submit button

<div class="wb-frmvld"><form method="get">	
	<div class="wb-fieldflow" data-wb-fieldflow='{"noForm": true}'>
		<p>Choose content to be toggle?</p>
		<ul>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#toggle-third", "live": true}'>Toggle third</li>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#toggle-forth", "live": true}'>Toggle forth</li>
			<li data-wb-fieldflow='{"action": "toggle", "toggle": "#toggle-third, #toggle-forth", "live": true}'>Toggle both</li>
		</ul>
	</div>

	<div id="toggle-third" class="well hidden">
		<p>This is third <code>@id=toggle-third</code></p>
	</div>

	<div id="toggle-forth" class="jumbotron hidden">
		<p>This is forth <code>@id=toggle-forth</code></p>
	</div>
		
</form></div>

Table filtering

<div class="wb-frmvld">
	<form method="get">	
	<div class="wb-fieldflow" data-wb-fieldflow='
			{
				"srctype": "tblfilter",
				"noForm": true,
				"source": "#table-filtering-example",
				"fltrseq": [
					{"column": 2},
					{"column": 3}
				],
				"limit":3
			}'></div>
	</form>
</div>

<table id="table-filtering-example" class="wb-tables table table-striped table-hover">
	<thead>
		<tr>
			<th>Title</th>
			<th>Publication date</th>
			<th>Summary</th>
			<th>Subject</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th><a href="http://news.gc.ca/web/index-en.do">Biomass Program Continues to Support Transition to Renewable Energy in Manitoba</a></th>
			<td>2016-07-29 12:07:00</td>
			<td>
				<p>The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.</p>
				<p>For:</p>
				<ul>
					<li>Media</li>
					<li>Farmers</li>
					<li>General Public</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>Agriculture</li>
				</ul>
			</td>
		</tr>
		
		[...]
		
	</tbody>
</table>

Custom filtering interface Table filtering

<div id="table-filtering-example2-form" class="wb-frmvld hidden">
	<form>
		<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "isoptional": true, "unhideelm": "#table-filtering-example2-form" }'>
			<p>Filter by subject:</p>
			<ul>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Agriculture"
				}'>Agriculture</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Society"
				}'>Society and Culture</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Arts"
				}'>Arts</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Music"
				}'>Music</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Literature"
				}'>Literature</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Transport"
				}'>Transport</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 3,
					"value": "Economics"
				}'>Economics and Industry</li>
			</ul>
		</div>
		<div class="wb-fieldflow" data-wb-fieldflow='{ "noForm": true, "isoptional": true }'>
			<p>Filter by audience:</p>
			<ul>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Business"
				}'>Business</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Farmers"
				}'>Farmers</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Public"
				}'>General Public</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Media"
				}'>Media</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2
					"value": "Rural"
				}'>Rural Community</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Travellers"
				}'>Travellers</li>
				<li data-wb-fieldflow='{
					"action": "tblfilter",
					"source": "#table-filtering-example2",
					"column": 2,
					"value": "Visitors"
				}'>Visitors</li>
			</ul>
		</div>
	</form>
</div>

<table id="table-filtering-example2" class="wb-tables table table-striped table-hover">
	<thead>
		<tr>
			<th>Title</th>
			<th>Publication date</th>
			<th>Summary</th>
			<th>Subject</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th><a href="http://news.gc.ca/web/index-en.do">Biomass Program Continues to Support Transition to Renewable Energy in Manitoba</a></th>
			<td>2016-07-29 12:07:00</td>
			<td>
				<p>The governments of Canada and Manitoba are supporting a greener, more sustainable economy through the $1 million Biomass Energy Support Program, Federal Agriculture Minister Lawrence MacAulay and Manitoba Agriculture Minister Ralph Eichler announced today.</p>
				<p>For:</p>
				<ul>
					<li>Media</li>
					<li>Farmers</li>
					<li>General Public</li>
				</ul>
			</td>
			<td>
				<ul>
					<li>Agriculture</li>
				</ul>
			</td>
		</tr>
		
		[...]
		
	</tbody>
</table>

Another table filtering example

<div class="row">
	<div class="col-md-3">
		<section>
			<h4 class="wb-inv">Filtering Options</h4>
			<div class="wb-frmvld"><form>	
					<div class="wb-fieldflow" data-wb-fieldflow='
							{
								"srctype": "tblfilter",
								"noForm": true,
								"source": "#dataset-filter",
								"fltrseq": [
									{"column": 3, "csvextract": true, "defaultselectedlabel": "All news types", "label":"Data Type"},
									{"column": 2, "csvextract": true, "defaultselectedlabel": "From any department", "label":"Department"},
									{"column": 8, "csvextract": true, "defaultselectedlabel": "Related to any minister", "label":"Minister"},
									{"column": 6, "csvextract": true, "defaultselectedlabel": "Everyone", "label":"For"},
									{"column": 5, "csvextract": true, "defaultselectedlabel": "Anywhere", "label":"Location"}
								]
							}'></div>
			</form></div>
		</section>
	</div>
	<div class="col-md-9">
		<table class="wb-tables table table-striped table-hover" id="dataset-filter" aria-live="polite" data-wb-tables='{
					"bDeferRender": true,
					"ajaxSource": "http://wet-boew.github.io/wet-boew/demos/tables/ajax/datasource.json",
					"order": [5, "desc"],
					 "columns": [
						{ "data": "TITLE", "className": "nws-tbl-ttl h4" },
						{ "data": "PUBDATE", "className": "nws-tbl-date" },
						{ "data": "DEPT", "className": "nws-tbl-dept" },
						{ "data": "TYPE", "className": "nws-tbl-type" },
						{ "data": "TEASER",  "className": "nws-tbl-desc" },
						{ "data": "LOCATION",  "visible": false },
						{ "data": "AUDIENCE",  "visible": false },
						{ "data": "SUBJECT", "visible": false },
						{ "data": "MINISTER", "visible": false }
					  ]}'>
			<thead>
				<tr>
					<th>Title</th>
					<th>Publication date</th>
					<th>Department</th>
					<th>News Type</th>
					<th>Summary</th>
					<th>Location</th>
					<th>For</th>
					<th>Subject</th>
					<th>Minister</th>
				</tr>
			</thead>
		</table>
	</div>
</div>

Date modified:

2016-11-14