Language selection

Français fr

/ Gouvernement du Canada

Search

URL Mapping - Select input

Select inputs by default based on url query string.

Example with `source`

Source code

<div data-wb-urlmapping='{
	"f=b": {
		"action": "selectInput",
		"source": "#fruitsOptions",
		"value": "Bananas"
	}
}'></div>

<form id="fruitsOptions">
	<label for="fruitsSelect">Select a fruit (<code><select></code>)</label>
	<select name="fruitsSelect" id="fruitsSelect" class="form-control mrgn-bttm-lg">
		<option value="all">All</option>
		<option value="Bananas">Bananas</option>
		<option value="Oranges">Oranges</option>
		<option value="Apples">Apples</option>
	</select>

	<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg">
		<legend>Choose a fruit (<code><input type="checkbox"></code>)</legend>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="BananasCheckbox" value="Bananas"><label for="BananasCheckbox">Bananas</label>
		</div>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="OrangesCheckbox" value="Oranges"><label for="OrangesCheckbox">Oranges</label>
		</div>
		<div class="checkbox label-inline">
			<input type="checkbox" name="fruitsCheckboxes" id="ApplesCheckbox" value="Apples"><label for="ApplesCheckbox">Apples</label>
		</div>
	</fieldset>

	<fieldset class="gc-chckbxrdio form-inline">
		<legend>Choose a fruit (<code><input type="radio"></code>)</legend>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="BananasRadio" value="Bananas"><label for="BananasRadio">Bananas</label>
		</div>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="OrangesRadio" value="Oranges"><label for="OrangesRadio">Oranges</label>
		</div>
		<div class="radio label-inline">
			<input type="radio" name="fruitsRadios" id="ApplesRadio" value="Apples"><label for="ApplesRadio">Apples</label>
		</div>
	</fieldset>
</form>

Example without source

Select a fruit (<select>)

Choose a fruit (<input type="checkbox">)

Bananas

Oranges

Grapes

Choose a fruit (<input type="radio">)

Bananas

Oranges

Grapes

Source code

<label for="fruitsSelect2">Select a fruit (<code><select></code>)</label>
<select id="fruitsSelect2" class="form-control" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Grapes"
	}
}'>
	<option value="all">All</option>
	<option value="Oranges">Oranges</option>
	<option value="Apples">Apples</option>
	<option value="Grapes">Grapes</option>
</select>

<fieldset class="gc-chckbxrdio form-inline mrgn-bttm-lg" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Grapes"
	}
}'>
	<legend>Choose a fruit (<code><input type="checkbox"></code>)</legend>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="BananasCheckbox2" value="Bananas"><label for="BananasCheckbox2">Bananas</label>
	</div>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="OrangesCheckbox2" value="Oranges"><label for="OrangesCheckbox2">Oranges</label>
	</div>
	<div class="checkbox label-inline">
		<input type="checkbox" name="fruitsCheckboxes2" id="GrapesCheckbox2" value="Grapes"><label for="GrapesCheckbox2">Grapes</label>
	</div>
</fieldset>

<fieldset class="gc-chckbxrdio form-inline" data-wb-urlmapping='{
	"f=g": {
		"action": "selectInput",
		"value": "Grapes"
	}
}'>
	<legend>Choose a fruit (<code><input type="radio"></code>)</legend>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="BananasRadio2" value="Bananas"><label for="BananasRadio2">Bananas</label>
	</div>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="OrangesRadio2" value="Oranges"><label for="OrangesRadio2">Oranges</label>
	</div>
	<div class="radio label-inline">
		<input type="radio" name="fruitsRadios2" id="GrapesRadio2" value="Grapes"><label for="GrapesRadio2">Grapes</label>
	</div>
</fieldset>

Example with Tag-filter component

Add the following parameter in the url:

lng=fr for French
lng=eng for English
loc=mtl for Montreal
loc=otw for Ottawa
loc=tor for Toronto

results out of

Search

Filter options

Language

All
French
English

Event location

Montreal
Ottawa
Toronto

Ask PAC Anything!

Location: Montreal, Language: English, French
Bidding on Opportunities

Location: Vancouver, Language: English
Doing business with the Government of Canada (Webinar)

Location: Ottawa, Language: English
Ask PAC Anything!

Location: Toronto, Language: English
Bidding on opportunities (Webinar)

Location: Ottawa, Language: English

No item match this combination of filters.

Source code

<section id="filteredEventsList3" class="wb-filter wb-tagfilter wb-paginate provisional" data-wb-filter='{
	"selector": "li",
	"section": ".events-list3",
	"uiTemplate": "#searchFilter3"
}' data-wb-paginate='{
	"itemsPerPage": 5,
	"section": ".events-list3",
	"selector": "li",
	"uiTarget": "#filteredEventsListPagination3"
}'>
	<h2>Example with Tag-filter component</h2>
	<p>Add the following parameter in the url:</p>
	<ul>
		<li><code>lng=fr</code> for French;/code> for English </li>    <li><code>lng=fr</code> for French or </li>
		<li><code>loc=mtl</code> for Montreal</li>
		<li><code>loc=otw</code> for Ottawa</li>
		<li><code>loc=tor</code> for Toronto</li>
	</ul>

	<div id="searchFilter3" class="row mrgn-tp-lg">
		<div class="col-xs-12">
			<p class="h3 wb-fltr-info mrgn-tp-0"><span data-nbitem></span> results out of <span data-total></span></p>
			<div class="form-group">
				<label for="customSearchUI">Search</label>
				<input type="search" class="form-control full-width" id="customSearchUI">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 col-sm-4 col-lg-3">
			<details open>
				<summary>
					<h3>Filter options</h3>
				</summary>
				<div class="form-group mrgn-bttm-0">
					<fieldset data-wb-urlmapping='{
							"lng=fr": {
								"action": "selectInput",
								"value": "lng__french"
								},
							"lng=eng": {
								"action": "selectInput",
								"value": "lng__english"
							} }'>
						<legend class="h5 mrgn-tp-0"><span class="field-name">Language</span></legend>
						<ul class="list-unstyled">
							<li class="radio">
								<label>
									<input type="radio" name="lng" class="wb-tagfilter-ctrl" value="" checked> All
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="lng" class="wb-tagfilter-ctrl" value="lng__french"> French
								</label>
							</li>
							<li class="radio">
								<label>
									<input type="radio" name="lng" class="wb-tagfilter-ctrl" value="lng__english"> English
								</label>
							</li>
						</ul>
					</fieldset>
				</div>
				<div class="form-group mrgn-bttm-0">
					<fieldset data-wb-urlmapping='{
							"loc=mtl": {
								"action": "selectInput",
								"value": "location__montreal"
								},
							"loc=otw": {
								"action": "selectInput",
								"value": "location__ottawa"
							},
							"loc=tor": {
								"action": "selectInput",
								"value": "location__toronto"
							}}'>
						<legend class="h5 mrgn-tp-0"><span class="field-name">Event location</span></legend>
						<ul class="list-unstyled">
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location3" class="wb-tagfilter-ctrl" value="location__montreal"> Montreal
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location3" class="wb-tagfilter-ctrl" value="location__ottawa"> Ottawa
								</label>
							</li>
							<li class="checkbox">
								<label>
									<input type="checkbox" name="location3" class="wb-tagfilter-ctrl" value="location__toronto"> Toronto
								</label>
							</li>
						</ul>
					</fieldset>
				</div>
			</details>
		</div>
		<div class="col-xs-12 col-sm-8 col-lg-9">
			<ul class="list-unstyled events-list3 wb-tagfilter-items">
				<li data-wb-tags="lng__english lng__french location__montreal">
				<h3>Ask PAC Anything!</h3>
				<p><strong>Location:</strong> <span class="event-location">Montreal</span>, <strong>Language</strong>: <span class="event-language">English, French</span></p>
				</li>
				<li data-wb-tags="lng__english location__vancouver">
				<h3>Bidding on Opportunities</h3>
				<p><strong>Location:</strong> <span class="event-location">Vancouver</span>, <strong>Language</strong>: <span class="event-language">English</span></p>
				</li>
				<li data-wb-tags="lng__english location__ottawa">
				<h3>Doing business with the Government of Canada (Webinar)</h3>
				<p><strong>Location:</strong> <span class="event-location">Ottawa</span>, <strong>Language</strong>: <span class="event-language">English</span></p>
				</li>
				<li data-wb-tags="lng__english location__toronto">
				<h3>Ask PAC Anything!</h3>
				<p><strong>Location:</strong> <span class="event-location">Toronto</span>, <strong>Language</strong>: <span class="event-language">English</span></p>
				</li>
				<li data-wb-tags="lng__english location__ottawa">
				<h3>Bidding on opportunities (Webinar)</h3>
				<p><strong>Location:</strong> <span class="event-location">Ottawa</span>, <strong>Language</strong>: <span class="event-language">English</span></p>
				</li>
			</ul>
			<div class="wb-tagfilter-noresult">
				<p>No item match this combination of filters.</p>
			</div>
			<div id="filteredEventsListPagination3"></div>
		</div>
	</div>
</section>

Page details

Date modified:: 2023-10-24