Help:WSSearchFront

The WSSearchFront extension is a front-end for WSSearch written in Vue.js

For installation instructions see the extension page

Configuration

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 ?

most of the configurations have more setting options prefixed with a #

Example configuration:

{{#WSSearchFrontend:
|size=10
|tite=Page Title
|@Tag
|@Year
    #display=range
    #max=20
    #type=date
|?Users
    #display=link
|?Image
    #display=image
    #label=Page image
|?Rating
    #display=template
    #template=Special rating
}}

Available configuration options

settings

parameter	parameter values	settings	setting values	description	example
size	<number>			defines how many results are shown per page	size=10
size options	<number>, <number>			if set a drop-down with the defined size options will be shown	size options=10, 20, 50
title	<property>			property that will be used for the search results title and link	title=Title #highlight=true #urlstring=search
		#label	<text>	sets a label for the title column in table layout
		#highlight	true	highlights the search term in the title
		#urlstring	<text>	adds search terms as an url parameter named by the value to the links href
sort options	<property>, <property>			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, Page name:Title
	<text>:<property>,<text>:<property>
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

Search result settings

parameter	settings	setting values	description	example
?<property>	#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=<template> . The {{{Page|}}} and {{{Value|}} parameters are passed to the template	?Icon#display=template #template=Icon for search
	#template	<template>	used with #display=template
	#label	<text>	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

Facet filters are divined by adding a @ in front of the property name, when no display setting is used the default check-boxes are displayed

parameter	settings	setting values	description	example
@<property>	#display	combobox	shows a drop-down combo-box instead of the default check-boxes
		ask combobox	shows a comb-box and uses an ask query as you type to generate options
		search	adds a search input for the specified property
		datepicker	adds two DateInputWidgets that are used for filtering the results by a date property
		range	adds the default check-boxes but with a set of ranges from the property
		sorted	adds the default check-boxes but sorts on a given ask query
	#label	<text>	defines a label to be used for display instead of the property name
	#logic	or	set logic to or, needs 'post filter properties' setting in back-end WSSearchConfig
	#sort	alphabetically	sorts the facets alphabetically
	#translation	<property>	translates the property values based on a given ask query

ask combobox

#display=ask combobox

setting	values	description	example
#query	<ask>	ask query	@Tags #display=ask combobox #ask=[[Class::Tag]] #data=Tag ID #text=Tag name
#data	<property>	property for options
#text	<property>	label for options
#search	true	searches for typed term on enter key

Sorted

#display=sorted

setting	values	description	example
#query	<ask>	ask query	@Tags #display=sorted #ask=[[Tag::+]][[-Has subobject.Type::Search Tag]] #data=-Has subobject.Name #text=Tag name
#data	<property>	property to sort on
#text	<property>	property for display

Translation

#translation

setting	values	decription	example
#query	<ask>	ask query	@Service #translation=Name #query=[[Class::Service]]

Range

#display=range

setting	values	description	example
#max	<number>	maximum number of ranges	@Year #display=range #max=20 #type=date
#step	<number>	step for range
#type	date	type for date ranges

Styling and layout

WSSearchFront can be styled using CSS. Components are logically named using BEM convention, and the layout id defined with CSS Grid