Help:WSSearchFront
The WSSearchFront extension is a front-end for WSSearch written in Vue.js
For installation instructions see the extension page
$smwgElasticsearchConfig["indexer"]["raw.text"] = true;
Configuration
[edit]The WSSearchFront extension must be configured using the WSSearchFrontend parser function
There are 3 types of configuration:
- Settings, without a prefix
- Filter settings, prefixed with a
@ - Result settings, prefixed with a
?
Configurations can have setting options prefixed with a #
Example configuration:
{{#WSSearchFrontend:
|size=10
|title=Page Title
|@Tag
|@Year
#display=range
#max=20
#type=date
#label=Publication year
|?Users
#display=link
|?Image
#display=image
|?Rating
#display=template
#template=Rating icon
}}
Available configuration options
[edit]Settings
[edit]These are optional settings for the main interface
| parameter | parameter values | settings | setting values | description | default | example |
|---|---|---|---|---|---|---|
| size | |
defines how many results are shown per page | 10 | size=10
| ||
| size options | |
if set a drop-down with the defined size options will be shown | size options=10, 20, 50
| |||
| title | |
property that will be used for the search results title and link | page | title=Title
| ||
| #label | |
sets a label for the title column in table layout | ||||
| #highlight | true | highlights the search term in the title | ||||
| #urlstring | |
adds search terms as an url parameter named by the value to the links href | ||||
| sort | |
sets sorting alphabetically based on a property instead of the default relevance order | score | sort=Title
| ||
| sort options | |
if set a drop-down with sort options will be shown, default results will be sorted by relevance, optional a label for the property to sort on can be set by adding text before the property devised by :
|
sort options=Version, Title
| |||
|
sort options=Version number:Version, Page name:Title
| |||||
| layout | table | changes the layout for the search results to a table | layout=table
| |||
| clear | term | if set, the 'clear all filters' button also clears the search term | clear=term
| |||
| facets | |
how many facets to show before a 'show more' button is shown | 5 | facets=10
|
Search result settings
[edit]These are optional settings for the search result output they are defined by adding a ? in front of the property name.
| parameter | settings | setting values | description | example |
|---|---|---|---|---|
? |
#display | image | displays an image, the property must be the full URL to the image | ?Image#display=image
|
| link | creates a link from a property | ?User#display=link
| ||
| pill | creates a pill, that can be used for filter selection | ?Tag#display=pill
| ||
| template | parses a template, add #template= . The {{{Page|}}} and {{{Value|}}} parameters are passed to the template
|
?Icon#display=template
| ||
| #template | used with #display=template
| |||
| #label | |
adds a label in front of the displayed property value. When table layout is used it defines the tabel column header name | ?Rating#label=Page rating
| |
| #highlight | true | highlights the search term on the displayed property value | ?Description#highlight=true
|
Facets filter settings
[edit]Facet filters are defined by adding an @ in front of the property name. All settings are optional. When no display setting is used the default checkboxes are displayed.
Some display types need a setting with an ask query, see Semantic MediaWiki ask query string for more information about them.
| parameter | settings | setting values | description | example |
|---|---|---|---|---|
| @ |
#display | combobox | shows a drop-down combo-box instead of the default checkboxes | @Author#display=combobox
|
| ask combobox | shows a combobox and uses an ask query as you type to generate options. see ask combox for more information | @Author
| ||
| search | adds a search input for the specified property | @Title#display=search
| ||
| datepicker | adds two DateInputWidgets that are used for filtering the results by a date property | @Modification date#display=datepicker
| ||
| range | adds the default checkboxes but with a set of ranges from the property. see range for more information | @Range
| ||
| sorted | adds the default checkboxes but sorts on a given ask query. see sorted for more information | @Tag
| ||
| date | shows date facets with ranges for 'last week', 'last moth', 'last quarter', and 5 years, needs #type=date to be set
|
@Modification date
| ||
| slider | adds a range slider, a max can be set with #max=
|
@Version
| ||
| #label | |
defines a label to be used for display instead of the property name | @User
| |
| #logic | or | set logic to or, needs 'post filter properties' setting in back-end WSSearchConfig. see WSSearch for more information | @Tag
| |
| #sort | alphabetically | sorts the facets alphabetically, default facets are sorted by page count | @Tag
| |
| alphanumeric | sorts the facets alphanumeric, default facets are sorted by page count | @Tag#sort=alphanumeric
| ||
| #translation | |
translates the property values based on a given ask query. only applicable for properties of type Page. | @Service
|
ask combobox
[edit]| setting | values | description | example |
|---|---|---|---|
| #query | |
ask query | @Tag
#display=ask combobox
#query=[[Class::Tag]]
#data=Tag ID
#text=Tag name
|
| #data | |
property for options | |
| #text | |
label for options | |
| #search | true | searches for typed term on enter key |
Sorted
[edit]| setting | values | description | example |
|---|---|---|---|
| #query | |
ask query | @Tags
#display=sorted
#query=[[Tag::+]][[-Has subobject.Type::Search Tag]]
#data=-Has subobject.Name
#text=Tag name
|
| #data | |
property to sort on | |
| #text | |
property for display |
Range
[edit]| setting | values | description | example |
|---|---|---|---|
| #max | |
maximum number of ranges | @Year
#display=range
#max=20
#type=date
|
| #step | |
step for range | |
| #type | date | type for date ranges |
Styling and layout
[edit]WSSearchFront can be styled using CSS. Components are logically named using BEM convention, and the layout is defined with CSS Grid. You can just add your own style-sheet, by adding your CSS to common.css or you could use TemplateStyles.
Layout
[edit]Below you find the default layout, grid-template-columns defines the columns sizes, grid-template-rows define the row sizes.
The different components can be moved around by changing the grid-template-areas. In the default layout the search component spans over the whole first row.
.wssearch {
display: grid;
grid-template-columns: 20ch 1fr auto;
grid-template-rows:
auto
minmax(2em, auto)
auto
1fr;
grid-template-areas:
"search search search"
"selected selected order"
"filters total total"
"filters main main";
grid-gap: 0.5em 2em;
}
The available components are:
searchthis is the search input including the search buttonselectedthis is the area where the pills for selected filter show uporderthis is the area where the sort options drop-down will show if sort options are set in the configurationfiltersthis is where the different facet filters will be locatedtotalthis where the result count will show upmainthis is the area where the search result are shown, including the pagers
Variables
[edit]WSSearchFront uses CSS variables to define colors and icons, the following variables are available to override
--base-color--base-color-lighter--base-color-darker--tint-1--border-1--star-size
Icons
[edit]--search-icon--clear-icon--check-icon--next-icon--back-icon--down-icon--up-icon
Development
[edit]WSSearchFront is written with Vue.js and is pre-built. For performance and for old wiki support reasons. The development repository is based on Vue-CLI and includes mock data and development modules for easy development.
It can be found here WSSearch development repository.
The final build files are added to the module folder in the WSSearchFront extension folder.