Facettierung Form
Facettierung example
Für eine Suche wird oft ein Filter oder auch Facettierung benötigt. Hierfür kann das Modul Faceting form genutzt werden, das in einem festen Rahmen eine hohe Flexibilität bietet um eine Facettierung darzustellen.
Die Facettierung selbst besteht aus zwei Einheiten, dem Filter Button, siehe 1) und dem Form Container, siehe 2).
Für die Struktur der Seite, die die Suche und Facettierung beinhaltet empfiehlt sich folgende Struktur:
Filters or facet filters are often required for searches. The Faceting Form module can be used for this. It offers a high degree of flexibility in a fixed frame to display facet filters.
The facet filter itself consists of two units, the filter button (see 1)) and the form container (see 2)).
The following structure is recommended for the page that contains the search and the facet filter:
<div class="row">
<div class="span4">
<!-- hier Facettierung einfügen -->
</div>
<div class="span8">
<!-- hier Suchergebnisliste einfügen -->
</div>
</div>1) Filter Button
Der Button wird nur in der mobilen Version eingeblendet, muss aber im Markup immer an der korrekten Stelle eingefügt sein. Hier muss in das data-containerid Attribut die ID des Form Container eingetragen werden, damit die korrekte Zuordnung erfolgen kann.
The Filter Button is only shown in the mobile version, but must always be inserted in the correct place in the mark-up. Be sure to enter the ID of the form container in the data-containerid attribute to ensure correct assignment.
<button type="button" class="button button--filter js-facetingform-toggler" data-containerid="my_facetingform_example_01">Filter</button>
2) Form Container
Der Form Container wird in der Desktop Version immer eingeblendet und in der mobilen Version nur nach Klick auf den entsprechenden Button in einem Flyin Overlay. Die Einheiten innerhalb des Form Containers sind durch Fieldsets gruppiert.
The Form Container is always shown in the desktop version; in the mobile version it is only shown after the corresponding button in a Flying Overlay is clicked on. The units inside the form container are grouped through field sets.
<div class="modul-facetingform js-facetingform" id="my_facetingform_example_01">
<div class="facetingform__container">
<div class="container__head">
<h2 class="title">Facettierung example</h2>
</div>
<div class="container__body">
<!-- Form start -->
<form class="facets">
<fieldset class="facet">
<legend class="facet__head">
<span class="facet-title">Legende</span>
</legend>
<div class="facet__body"> <div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox9841" name="myCheckbox9841">
<label class="form-check-label" for="myCheckbox9841">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox152" name="myCheckbox152">
<label class="form-check-label" for="myCheckbox152">Checkbox</label>
</div>
</div> </fieldset>
<fieldset class="facet">
<legend class="facet__head">
<span class="facet-title">Legende</span>
</legend>
<div class="facet__body"> <div class="form-check">
<input class="form-check-input" type="radio" id="myCheckbox9577" name="radioset1">
<label class="form-check-label" for="myCheckbox9577">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="myCheckbox1726" name="radioset1">
<label class="form-check-label" for="myCheckbox1726">Checkbox</label>
</div>
</div> </fieldset>
<div class="form-actions"> <div class="form-actions__left">
<button type="reset" class="link reset">zurücksetzen</button>
</div>
<div class="form-actions__right">
<button type="submit" class="button button--light">Jetzt filtern</button>
</div>
</div>
</form>
<!-- Form end -->
</div>
</div>
</div>Optional Inhalte des Form containers
Abgesehen von den Elementen aus Forms stehen für die Facettierung noch weitere spezialisierte Inhalte zur Verfügung.
Other specialised content in addition to the elements from forms is available for the facet filter.
Collapsible Fieldsets
Fieldsets können mit einem Button getoggelt werden. Der data-collapsible-trigger aktiviert den Toggler und setzt den initialen Status (opened|closed). Der aria-controls Wert enthällt die id des zu toggelnden Containers.
You can toogle a fieldset by using a button. The data-collapsible-trigger activates the toggler and set the initial status (opened|closed). The aria-controls value contains the id of the target conatainer to toggle.
Collapible fieldsets
<legend class="facet__head">
<div data-collapsible-trigger="opened" class="facet-title" tabindex="0" role="button" aria-controls="myfacetbody01">
<span class="text">Click me</span>
</div>
</legend>
<div class="facet__body" id="myfacetbody01">
[...]
</div>Collapsible form elements
Durch den .hidden-facet-entries-Wrapper können Teile in langen Formularen ausgeblendet werden. Dieser Container erhällt eine eindeutige Id. Danach folgt ein Button, der diesen Container toggelt.
You can hide some elements of a long form part by wrapping them into a .hidden-facet-entries container with a unique id, followed by a button wich triggers this container.
Collapsible form elements
<div class="hidden-facet-entries" id="myhiddenentries01">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox2285" name="myCheckbox2285">
<label class="form-check-label" for="myCheckbox2285">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox1804" name="myCheckbox1804">
<label class="form-check-label" for="myCheckbox1804">Checkbox</label>
</div>
</div><button data-collapsible-trigger="closed" aria-controls="myhiddenentries01" type="button" class="facet-entries-toggler" data-closetext="Weniger anzeigen" data-opentext="Mehr anzeigen" ><span class="text">Mehr anzeigen</span></button>
Legend helptext
Ein Fragezeichen kann zur Beschreibung einer Legende eingesetzt werden. Diese wird bei Klick in einem Overlay angezeigt.
Add a questionmark with helptext to describe a legend. Will be displayed in an overlay.
Legend helptext
<legend class="facet__head">
<span class="facet-title">Legend with helptext</span>
<span tabindex="0"
role="button"
class="js-formhelp-flyin-overlay qmark-icon"
title="Ich bin ein kurzer Hilfetext."
aria-label="Öffnet Overlay mit Hilfetext"
data-auralopentext="Öffnet Overlay mit Hilfetext"
data-auralclosetext="Schließt Overlay mit Hilfetext">
?
</span>
</legend>