Language selection

Search


Field flow advanced

How to go beyond with field flow.


Custom ajax

The content is insert by using the data-ajax plugin. It is possible to target specific container, by using different method (append, prepend, after, before, replace) and to benefit of the ajax filtering fonctionality provided by the ajax fetch plugin.

A simple use is set the url of the file that need to be ajaxed in the attribute data-wb-fieldflow="URL/of/the/file".

The content set by the attribute data-wb-fieldflow may are not be accessible to search engine and to the user if javascript is disabled. So, it's recommended to provide an alternative representation where the user will be able to get equivalent information.

Using data-wb-fieldflow="URL/of/the/file" is the same as:

The following configuration option are available:

type
Define how the content will be inserted. The available options are: after, append, before, prepend, replace. Default value is "replace"
container
A jquery selector of where the data ajax will be initialised. If not specified, an empty container will be created after Fieldflow control.
clean
A jquery selector of where the jquery empty() will be called.
trigger
Allow to initiate WET features included in the content to be inserted through ajax.

id="ajaxPanel" Aside panel, for example

(To illustrate container and clean options)

Choose content to be ajaxed?

<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

The append action required the configuration option source that contain a jQuery selector representing the element to be used as a sub-plugin and be appended to the control. Similar behaviour can be acheived by duplicating the content of the appended element in each list item.

The configuration option target contain an id of what subsequent selected element that action is targeted to.

This feature became useful when the same field is re-used again and again by a lot of items.

Find the plugin for the action you need.

<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": "https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://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": "https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://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": "https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://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": "https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://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": "https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://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": "https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"},
			{"action": "redir", "target": "append-ex-fr", "url": "https://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:

Find the plugin for the action you need.

<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="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">English</a></li>
					<li><a href="https://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="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">English</a></li>
					<li><a href="https://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="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">English</a></li>
					<li><a href="https://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="https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">English</a></li>
					<li><a href="https://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="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">English</a></li>
					<li><a href="https://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="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">English</a></li>
					<li><a href="https://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

Change the color of the following paragraph:

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

Change the color of the following paragraph:

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

Change the color of the following paragraph:

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

Change the color of the following paragran

<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

Allow to set a name and value to the URL on which the user will be usually redirected to.

This show how to use the query action. The following configuration option must be present:

name
Define the query parameter name to use.
value
Define the query value to set for the specified parameter name.

The configuration option noForm set on the <div class="wb-fieldflow"></div> tell the plugin to not create a form wrapper but instead to bind with the existing one. The submit button need to be supplied in that mode. It is assumed the form is also wrapped with wb-frmvld

A few remark regarding the following example

  • It is itself submiting. Once submited, the additional query parameter, animal that will be present in the result page URL.
  • As is, that form are unusable if javascript are disabled, so:
    • That is why a static alternative example follow the form.
    • It is hidden by default
    • It get unhide by the field flow plugin initialization, as specified by the configuration option unhideelm (containing a jQuery selector value).
Alternative representation alloweing to get equivalent information.

Dog:

Cat:

Fish:

Snake:

<div id="myformid" class="wb-frmvld hidden">
<form action="advanced-en.html" 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": "https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"}
						]'>Outside</li>
					</ul>
				</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>
					</ul>
				</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="advanced-en.html?animal=Dog&amp;moreinfo=wild">Wild habitation</a></li>
		<li><a href="advanced-en.html?animal=Dog&amp;moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="advanced-en.html?animal=Dog&amp;moreinfo=inside">Inside leaving</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Dog&amp;moreinfo=outside">Outside leaving</a></li>
		<li><a href="advanced-en.html?animal=Dog&amp;moreinfo=healty">Healty food</a></li>
		<li><a href="advanced-en.html?animal=Dog&amp;moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="advanced-en.html?animal=Dog&amp;moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="advanced-en.html?animal=Dog&amp;moreinfo=trending">Trending meal</a></li>
	</ul>
	<p>Cat:</p>
	<ul>
		<li><a href="advanced-en.html?animal=Cat&amp;moreinfo=wild">Wild habitation</a></li>
		<li><a href="advanced-en.html?animal=Cat&amp;moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="advanced-en.html?animal=Cat&amp;moreinfo=inside">Inside leaving</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Cat&amp;moreinfo=outside">Outside leaving</a></li>
		<li><a href="advanced-en.html?animal=Cat&amp;moreinfo=healty">Healty food</a></li>
		<li><a href="advanced-en.html?animal=Cat&amp;moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="advanced-en.html?animal=Cat&amp;moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="advanced-en.html?animal=Cat&amp;moreinfo=trending">Trending meal</a></li>
	</ul>
	<p>Fish:</p>
	<ul>
		<li><a href="advanced-en.html?animal=Fish&amp;moreinfo=wild">Wild habitation</a></li>
		<li><a href="advanced-en.html?animal=Fish&amp;moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="advanced-en.html?animal=Fish&amp;moreinfo=inside">Inside leaving</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Fish&amp;moreinfo=outside">Outside leaving</a></li>
		<li><a href="advanced-en.html?animal=Fish&amp;moreinfo=healty">Healty food</a></li>
		<li><a href="advanced-en.html?animal=Fish&amp;moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="advanced-en.html?animal=Fish&amp;moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="advanced-en.html?animal=Fish&amp;moreinfo=trending">Trending meal</a></li>
	</ul>
	<p>Snake:</p>
	<ul>
		<li><a href="advanced-en.html?animal=Snake&amp;moreinfo=wild">Wild habitation</a></li>
		<li><a href="advanced-en.html?animal=Snake&amp;moreinfo=recomhab">Recommended habitation</a></li>
		<li><a href="advanced-en.html?animal=Snake&amp;moreinfo=inside">Inside leaving</a></li>
		<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html?animal=Snake&amp;moreinfo=outside">Outside leaving</a></li>
		<li><a href="advanced-en.html?animal=Snake&amp;moreinfo=healty">Healty food</a></li>
		<li><a href="advanced-en.html?animal=Snake&amp;moreinfo=nutrition">Recommended nutrition</a></li>
		<li><a href="advanced-en.html?animal=Snake&amp;moreinfo=avoid">Meat toavoid</a></li>
		<li><a href="advanced-en.html?animal=Snake&amp;moreinfo=trending">Trending meal</a></li>
	</ul>
</details>

Toggle

All the option defined for the toggle plugin can be set in the toggle parameter in the data-wb-fieldflow.

The following are equivalent

If no option specified for the toggle plugin, the following options will be set

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

Choose content to be toggle?

<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

Choose content to be toggle?

  • Toggle third
  • Toggle forth
  • Toggle both
<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

Title Publication date Summary Subject
Biomass Program Continues to Support Transition to Renewable Energy in Manitoba 2016-07-29 12:07:00

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.

For:

  • Media
  • Farmers
  • General Public
  • Agriculture
MP Rodger Cuzner to make announcement in Broad Cove 2016-07-29 12:07:00

Rodger Cuzner, Member of Parliament for Cape Breton – Canso, on behalf of the Honourable Navdeep Bains, Minister of Innovation, Science and Economic Development and Minister responsible for the Atlantic Canada Opportunities Agency, will make a funding announcement at the Broad Cove Scottish Concert..

For:

  • Media
  • Rural Community
  • Travellers
  • Visitors
  • General Public
  • Society and Culture
  • Arts
  • Music
  • Literature
An Exhibition Dedicated to the Caribou and Other Animals Like It 2016-07-29 11:07:00

The Government of Canada supports the Musée du Fjord.

For:

  • General Public
  • Arts
  • Music
  • Literature
Backgrounder: Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

The Government of Canada delivered the first of two federal Gas Tax Fund installments for 2016-17 to all the provinces and territories benefitting 364 municipalities in Alberta..

For:

  • Media
  • General Public
  • Transport
Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

Modern and up-to-date community infrastructure helps ensure that Canadians live the quality of life that they want and expect. Community infrastructure helps connect people to jobs and provides access to better community services, attracts new businesses and creates economic growth opportunities..

For:

  • Media
  • General Public
  • Transport
Minister Carr to Make an Announcement About the Winnipeg Art Gallery 2016-07-29 11:07:00

WINNIPEG – The Honourable Jim Carr, Minister of Natural Resources....

For:

  • General Public
  • Arts
  • Music
  • Literature
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

What an honour to be at the University of Toronto-my alma mater-for this tremendous announcement..

For:

  • Business
  • General Public
  • Economics and Industry
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

Thank you, Meric [Meric S. Gertler, President, University of Toronto]. And thank you to the University of Toronto for being such great hosts today. I'm delighted to be here with my friend and colleague Kirsty Duncan, Minister of Science..

For:

  • General Public
  • Economics and Industry
<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="https://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

Title Publication date Summary Subject
Biomass Program Continues to Support Transition to Renewable Energy in Manitoba 2016-07-29 12:07:00

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.

For:

  • Media
  • Farmers
  • General Public
  • Agriculture
MP Rodger Cuzner to make announcement in Broad Cove 2016-07-29 12:07:00

Rodger Cuzner, Member of Parliament for Cape Breton – Canso, on behalf of the Honourable Navdeep Bains, Minister of Innovation, Science and Economic Development and Minister responsible for the Atlantic Canada Opportunities Agency, will make a funding announcement at the Broad Cove Scottish Concert..

For:

  • Media
  • Rural Community
  • Travellers
  • Visitors
  • General Public
  • Society and Culture
  • Arts
  • Music
  • Literature
An Exhibition Dedicated to the Caribou and Other Animals Like It 2016-07-29 11:07:00

The Government of Canada supports the Musée du Fjord.

For:

  • General Public
  • Arts
  • Music
  • Literature
Backgrounder: Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

The Government of Canada delivered the first of two federal Gas Tax Fund installments for 2016-17 to all the provinces and territories benefitting 364 municipalities in Alberta..

For:

  • Media
  • General Public
  • Transport
Government of Canada delivers $109 million to Alberta for community infrastructure projects 2016-07-29 11:07:00

Modern and up-to-date community infrastructure helps ensure that Canadians live the quality of life that they want and expect. Community infrastructure helps connect people to jobs and provides access to better community services, attracts new businesses and creates economic growth opportunities..

For:

  • Media
  • General Public
  • Transport
Minister Carr to Make an Announcement About the Winnipeg Art Gallery 2016-07-29 11:07:00

WINNIPEG – The Honourable Jim Carr, Minister of Natural Resources....

For:

  • General Public
  • Arts
  • Music
  • Literature
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

What an honour to be at the University of Toronto-my alma mater-for this tremendous announcement..

For:

  • Business
  • General Public
  • Economics and Industry
Post-Secondary Institutions Strategic Investment Fund Announcement at the University of Toronto 2016-07-29 10:07:00

Thank you, Meric [Meric S. Gertler, President, University of Toronto]. And thank you to the University of Toronto for being such great hosts today. I'm delighted to be here with my friend and colleague Kirsty Duncan, Minister of Science..

For:

  • General Public
  • Economics and Industry
<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="https://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

Filtering Options

Title Publication date Department News Type Summary Location For Subject Minister
<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": "https://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>

Page details

Date modified: