base UI components v4.0.0

# BaseAdvancedSearch

# Props

Prop name Description Type Values Default
mode define the appearance and functionality of the component here.
list: search offers advanced search with 'filters' to select from drop down, each filter is added
as a separate row.
form: advanced search is displayed as a form below only one single search row. Offers a condensed view
of the form within a single scrollable row below main row.		 string list, form 'list'
filterList this variable is just used in mode list, for mode form leave it empty and use variable formFilterList
to provide a list of filters instead.
provide a list of available filters, needs to be an array of objects with the following properties:

label string - the label of the filter (displayed
if not main search) - this prop can be customized by specifying
labelPropertyName.filter.
id string - the identifier of the filter (displayed
if not main search) - this prop can be customized by specifying
identifierPropertyName.filter.
type string - the filter type. Possible values: text, chips, chipssingle, date, daterange.
hidden boolean - filters with this attribute true will be filtered from
displayed filter list.
freetext_allowed boolean - determines if predetermined options from options
property are used or autocomplete is used.
options Object[] - for filter type chips and chipssingle the controlled
vocabulary options.
subsets string[] - if a filter of type 'text' or 'chips' with
freetext_allowed (thus triggering autocomplete) has subordinate filters for which
the autosuggest results should also be shown - add the filter identifiers here		 array - []
appliedFilters this variable is just used in mode list, for mode form leave it empty and use property formFilterValues
to provide values per filter instead.
possibility to set applied filters from outside, for necessary object properties
see filterList (except options - this property is not necessary for applied filters)		 array - []
defaultFilter in mode list specify a default value for a filter that is set when none of the
available filters is selected, should have the following properties:

label string - the label of the filter (displayed
if not main search) - this prop can be customized by specifying
labelPropertyName.filter.
id string - the identifier of the filter (displayed
if not main search) - this prop can be customized by specifying
identifierPropertyName.filter.
type string - the filter type. Possible values: text, chips, chipssingle, date, daterange.
options Object[] - for filter type chips and chipssingle the controlled
vocabulary options.
filter_values Object[], string[], Object - the values selected - object for date
or array of objects or strings for type text, type chips and chipssingle,

defaultFilter does not need the property subsets since results for all filters are
shown per default

this property is not relevant in mode form		 object - {
label: 'Fulltext',
id: 'default',
type: 'text',
options: [],
filter_values: []
}
formFilterList this variable is just used in mode form, for mode list leave it empty and use property filterList
to provide a list of filters instead.
for mode 'form' provide a specification for the form fields in the form of OpenAPi
schema object (opens new window).
see also BaseForm form-field-json prop - currently all field types except
multiline and chips-below and for date/time fields only single date, date range and date time fields
are supported. Also field groups are supported but maximum nesting level is 1.		 object - {}
formFilterValues this variable is just used in mode form, for mode list leave it empty and use property appliedFilters
to provide values per filter instead.
provide values for the fields specified in formFilterList. Main filter can be filled by adding a default property.		 object - {}
formProps pass props for BaseForm directly via this prop, for example autocompleteResults,
isLoading or fieldProps (except valueList and formFieldJson which are passed separately
since they are also utilized (and modified) in this component).		 object - {}
autocompleteResults provide the component with the fetched autocomplete results
(drop down options).
this needs to be an object array with the properties specified in
autocompletePropertyNames.		 array - []
language specify a language (ISO 639-1) (used for label if label is language specific object
e.g. { de: 'xxx', en: 'yyy' }) or for date display conversion in mode 'form'.		 string - 'en'
isLoadingIndex set the row loader from outside per row index number - -1
advancedSearchText specify informational texts for the component - this needs to be an object with the following
properties (if you don't want to display any text leave an empty string):

title: text shown as first line on the drop-down in filters area for mode list.
subtext: text shown as second line on the drop-down in filters area for mode list.
availableOptions: text shown with chips options for controlled vocabulary
searchfor modelist.<br/> **collapsedDateTime**: for modeform: set the text for the collapsed filter row which is<br/> displayed for date or time values of ranges when only one field is filled. (e.g.until 12.12.2023)<br/> **advancedButtonLabel**: button text displayed for Advanced Search Toggle button for modeform`.

The values of this object might be plain text or a key for an i18n file.		 object - {
title: 'Advanced Search',
subtext: 'Select a filter',
availableOptions: 'Available options',

collapsedDateTime: {
from: 'from',
until: 'until',
range: 'to',
},

advancedButtonLabel: 'Advanced Search'
}
dropDownInfoTexts specify informational texts for the drop-down - this needs to be an object with the following
properties:

autocompleteNoOptions: info text shown when autocomplete search does not yield
any results.
autocompleteOngoing: info text displayed while autocomplete search is ongoing
(and no previous results are displayed).
autocompleteInitial: info text shown when user first opens the search
component.
chipsNoOptions: info text shown when no options for controlled vocabulary search
are available (anymore).
chipsMaxOptions: text displayed if more than max number of options that can be
displayed are available (configure via prop maxNumberControlledOptions).
chipsNoMatch: text displayed if string in input does not match any options.
chipsOngoing: info text shown when controlled vocabulary chips are being
fetched.

The values of this object might be plain text or a key for an i18n file
This prop can be ignored when the no-options slot is used.		 object - {
autocompleteNoOptions: 'No matching options found',
autocompleteOngoing: 'Autocomplete is being fetched...',
autocompleteInitial: 'Please start typing or select a filter to see options',
chipsNoOptions: 'No more options available',
chipsMaxOptions: 'Please start typing to see options',
chipsNoMatch: 'No matching options were found',
chipsOngoing: 'Options are being loaded...'
}
placeholder add a placeholder for the search input, either a string used for every row or
add separate values for main filter row and already added filters
properties:
filterRow: for already added filter rows.
main: for the primary search input field.

each of these specific placeholders can again be a string or an object with different
placeholders for each search type (text, chips, date)		 object|string - () => ({
filterRow: 'Add values to your filter',
main: 'Search and Discover',
})
identifierPropertyName specify the object property that can be used for identification of filters,
autocomplete options and controlled vocabulary options.
Could be a string (used for all the mentioned objects) or an object with the following
properties:
filter: identifier property name in filter objects.
autocompleteOption: identifier property name in autocomplete option objects.
controlledVocabularyOption: identifier property name in controlled
vocabulary option objects.
formInputs: for mode 'form' in case the form contains chips or autocomplete input fields,
the object properties for label and identifier need to be set here (in case they are different
from the input components default (e.g. see BaseChipsInput identifierPropertyName))
if identifierPropertyName is also set via fieldProps the latter is the preferred value.
Caveat: Please note that the property idInternal is used for internal handlings and the property
might be overwritten		 object|string - () => ({
filter: 'id',
autocompleteOption: 'id',
controlledVocabularyOption: 'id',
formInputs: 'source',
})
labelPropertyName specify the object property that should be used for label display of filters,
autocomplete options and controlled vocabulary options.
Could be a string (used for all the mentioned objects) or an object with the following
properties:
filter: label property name in filter objects.
autocompleteOption: label property name in autocomplete option objects.
controlledVocabularyOption: label property name in controlled
vocabulary option objects.
formInputs: for mode 'form' in case the form contains chips or autocomplete input fields,
the object properties for label and identifier need to be set here (in case they are different
from the input components default (e.g. see BaseChipsInput labelPropertyName))
if labelPropertyName is also set via fieldProps the latter is the preferred value.
Caveat: Please note that the property labelInternal is used for internal handlings and the property
might be overwritten		 object|string - () => ({
filter: 'label',
autocompleteOption: 'title',
controlledVocabularyOption: 'label',
formInputs: 'label',
})
autocompletePropertyNames autocomplete results need a label, and id and a data property that contains all the actual
autocomplete results for that specific category
TODO: make category optional		 object - {
label: 'label',
id: 'id',
data: 'data'
}
assistiveText this prop gives the option to add assistive text for screen readers for
the BaseSearch component.
properties:
addFilter: text/label used for add filter icon for mode list.
removeFilter: text/label used for remove filter icon for mode list.
selectFilterLabel: label (not visible) used for filter chips input field for mode list.
searchLabel: label (not visible) used for search input field.
selectedOption: text read when a selected option is focused (currently only
working for type chips with autocomplete (=freetext_allowed))
loaderActive: text that is announced when autocomplete results are being fetched (prop
isLoading is set true)
autocompleteResultsRetrieved: text announced when autocomplete results are returned.
use {optionsNumber} and {collectionsNumber} in the string to announce the number of
total options and collections found respectively.
autocompleteNoResults: Text announced when no results were found with a given
search string.
autocompleteInitial: Text announced when no search string was provided for
autocomplete.
categoryAnnouncement: Text announced when a new category is entered in the
autocomplete drop down options list with keyboard navigation. string '{label}' will
be replaced by the actual specified category label
optionsAnnouncement: announced together with category when in category selection
mode (after using arrowLeft key on autocomplete input) - to give the user a feeling
how many options were found for the announced category. string '{number}' will be
replaced by the number of entries in that category.
autocompleteOptionFilledToForm: text announced when an option was selected from the autocomplete
dropdown, and it is filled into the respective form field. (only for mode form)
advancedButtonDescription: button description for Advanced Search Toggle button for mode form.
For accessibility purposes. You may add the string {state} which will be replaced with the respective
'open' and 'close' value specified in formState (see below). Only relevant for mode form.
formState: an object with properties open (text that is read when form is closed and button
functionality is to open the form) and close (text that is read when form is open and button
functionality is to close the form). Only relevant for mode form.
removeAllFiltersLabel: label for the remove icon in the collapsed filter row.
Only relevant for mode form. For accessibility purposes
removeFilterValueNotification: notification that is read by screen readers when a filter
value was removed. Add the string {value} to read the filter value that was removed and
{label} to read the label of the filter from which the value was removed. Only relevant for mode form.
collapsedFilterRowRemovedNotification: notification read when the last filter was removed from
the collapsed filter row. Or remove row was clicked. Only relevant for mode form.
collapsedAppliedFiltersLabel: description for the filters in the collapsed filter row.
Only relevant for mode form. For accessibility purposes.
collapsedBooleanFilterValue: Set text that should be read for a boolean filter value. You may add
the string {label} which will be replaced by the filter label.
Only relevant for mode form. For accessibility purposes.
collapsedOptionToRemoveSelected: text read when an option is focused (and thus selected), should
announce to the screen reader user that option can now be removed via Backspace or Delete.
results: provide text that should be announced when the search has
yielded results (or not).

Caveat: results has a watcher attached to trigger the
announcement so make sure the property values are reset after filling them
by using update:assistive-text or resetting it manually (after a timeout)		 object - {
addFilter: 'Add filter',
removeFilter: 'Remove filter',
selectFilterLabel: 'Select filter',
searchLabel: 'Search for Entries',
selectedOption: '',
autocompleteLoaderActive: 'loading options.',
autocompleteResultsRetrieved: '{optionsNumber} options found in {collectionsNumber} categories.',
autocompleteNoResults: 'No results found.',
autocompleteInitial: 'Please start typing to see suggestions.',
categoryAnnouncement: 'category {label}.',
optionsAnnouncement: '{number} options.',
autocompleteOptionFilledToForm: 'option {optionLabel} filled to field {fieldLabel}.',
advancedButtonDescription: 'Click to {state} advanced search form.',

formState: {
open: 'open',
close: 'close',
},

removeAllFiltersLabel: 'Remove all filters.',
removeFilterValueNotification: 'Filter value {value} was removed from filter {label}.',
collapsedFilterRowRemovedNotification: 'All search filters were reset.',
collapsedAppliedFiltersLabel: 'Currently applied Filters',
collapsedBooleanFilterValue: 'Filter {label} was set',
collapsedOptionToRemoveSelected: 'Press delete or backspace to remove.',
results: ''
}
applyBoxShadow if desired the box shadow around the search rows can be deactivated here boolean - true
dateFieldDelay use this prop to set a delay in ms before date input calendar is displayed number - 0
advancedFormOpen prop only relevant for mode form
set advanced search (form) visibility from outside
this can also be used to not show the advanced search after initial loading		 boolean - true
highlightAutocompleteMatch set this flag to true to highlight autocomplete option characters that match
the current search input string		 boolean - false
highlightAutocompleteTags if highlightAutocompleteMatch is set true
provide tag names to style the matched characters
(without '<' and '>', e.g. ['b'] for <b>)		 array - []
interpretFormChipsLabelAsHtml mode form: if necessary selected chip text can be rendered as v-html directive
either set this prop true or false

this will only be applied to chips with an identifier property and of course
can only apply to form field field_type chips

if only chips of certain form fields should be rendered as html use prop
formProps.fieldProps.interpretChipsLabelAsHtml or if certain fields should
be excluded set this prop to true and set formProps.fieldProps.interpretChipsLabelAsHtml
for that field false		 boolean - false

# Events

Event name Properties Description
search undefined Filter[] - the updated list of applied filters - last filter in the list is always the main inform parent that search should be triggered
fetch-autocomplete searchString string - the string to autocomplete
filter Filter - the filter object
index number - the filter index of all filters (main and applied)		 inform parent to fetch autocomplete data for the provided filter
fetch-form-autocomplete value string - the string to autocomplete
name string - the name of the field
source string - the url to request the data from
equivalent ?string - string specified for related fields. e.g. for contributor roles equivalent is contributor
parentFields ?string[] - in case the autocomplete event originates from a subform the subform id's (field property names) are specified in this array (most nested property last)		 event emitted when a form drop down (e.g. chips input field) needs autocomplete
update:applied-filters undefined Filter[] - the list of updated applied filters inform parent of changes in applied filters - event emitted for mode list
update:form-filter-values undefined Object - a form filter values object with a property for each filter field - main filter values inform parent of form filter value changes - event emitted for mode form
update:advanced-form-open in mode form when 'advanced search' button was clicked

# Slots

Name Description Bindings
autocomplete-option to allow for modification of the autocomplete option option Object - the option object as specified in the [autocompletePropertyNames.data] array
collection-id string - the currently active collection as provided in [autocompletePropertyNames.id]
form-label-addition all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
form-pre-input-field all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
form-input-field-addition-before all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
form-input-field-inline-before all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
form-input-field-addition-after all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
form-post-input-field all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
form-error-icon all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm.
form-remove-icon all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm.
form-below-input all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
form-drop-down-entry all BaseForm slots are available with the prefix 'form-'. For a more detailed description and demonstration refer to BaseForm. field-name string - the name of the displayed field (for time range fields there is a '-time' suffix added)
group-names string[] - in case the slot is for a subform (form group) field, groupNames contains the parent field groups names
option object - the option object

# Demo

Search functionality with simple freetext and advanced search with 'filters' or a filter form.

Search mode list

To see autocomplete results try typing 'zentrum'.

Search mode form

adds the filters in the form of a form below the primary search row that can be collapsed.

Last Updated: 5/17/2023, 3:45:47 PM

BaseAutocompleteInput →