solid-form-search

Allows you to filter the contents of a component that uses the filter-mixin such as solid-display or solid-map. This must have a filtered-by attribute set to the id of the current solid-form-search.

<solid-form-search
   id="my-filter"
   fields="email"
   label-email="search by email"
></solid-form-search>

<solid-display
   data-src="http://server/users"
   fields="username, last_name, email"
   filtered-by="my-filter"
></solid-display>

Mixins

This component uses the following mixins:

widget-mixin

Please check their documentation to know more about their capabilities.

Specific attributes

`fields`

List of fields used to perform the search.

More details on its use below (in widget-mixin attributes).

`label-[field]`

When displaying a form, the default labels are the fields names of the model. If you want something fancier, you can set this attribute. i.e. label-username="Your name"

`submit-button`

Available from version 0.13

Text of the submit button to create in the search form. If the attribute is not defined, no button will be added and the form will trigger the search on change.

`class-submit-button`

Define the class of the div containing the submit button.

`range-[field]`

URL of a container which list the accepted values for the field [field]. It’s particularly useful with a dropdown or multipleselect field.

`enum-[field]`

Available from version 0.13

List of values of your choice for the field [field]. They have to be filled manually and must be separated by commas. It’s particularly useful with a dropdown or radio field.

Two formats are possible:

enum-[field]="value1, value2, value3" : each value will be displayed

and loaded in value attribute

enum-[field]="value1 = a, value2 = b, value3 = c": each value will be displayed

and “a”, “b”, “c” will be loaded in value attribute.

`start-value-[field]`

Available from version 0.15

Allows to define the value of the first <input> to filter data. Only usable with solid-form-rangedate and solid-form-rangenumber. In solid-form-rangedate, it can be defined to today.

`end-value-[field]`

Available from version 0.15

Allows to define the value of the second <input> to filter data. Only usable with solid-form-rangedate and solid-form-rangenumber. In solid-form-rangedate, it can be defined to today.

`autocomplete-[field]`

Available from version 0.15

Equal to the value off, it cancels the automatic entry of values in the relevant [field]. It can be added to inputs, textarea and select.

`search-placeholder-[field]`

Available from version 0.17

Allows to modify “searchPlaceholder” displayed in the search bar (from SlimSelect plugin). Its value by default is “Search” in English, “Rechercher” in French. It works only with the autocompletion feature.

`search-text-[field]`

Available from version 0.17

Allows to modify “searchText” displayed when no value is found (from SlimSelect plugin). Its value by default is “No result” in English, “Aucun résultat” in French. It works only with the autocompletion feature.
<solid-form-search
   id="filter-multiselectautocomp"
   fields="skills"
   widget-skills="solid-form-multipleselect-autocompletion-placeholder"
   placeholder-skills="Please, pick a value"
   search-text-skills="Nothing found"
   search-placeholder-skills="Searching..."
></solid-form-search>
<solid-display
   data-src="data/list/users.jsonld"
   fields="username, skills"
   multiple-skills
   filtered-by="filter-multiselectautocomp"
></solid-display>

`auto-range-[field]`

Available from version 0.17

Dynamically populates a dropdown based on the values of the solid-display``(s) associated. For each ``solid-display, it will look for its field values, and add them to the dropdown. Each value is displayed only once. field can target a container or a resource.

In this example below, auto-range-skills ``attribute catches all skill values for all users in the ``data-src data/list/users and displays in the dropdown all skills once :
<solid-form-search
   id="filter-autorange"
   fields="skills"
   auto-range-skills
></solid-form-search>
<solid-display
   data-src="data/list/users.jsonld"
   fields="username, skills"
   multiple-skills
   filtered-by="filter-autorange"
></solid-display>

Mixin attributes

From widget-mixin :

`fields`

The ordered list of fields to be displayed, separated by commas.

By default, all the fields of the resource are used.

To not show any fields, put an empty fields (eg. <solid-display fields />).

By default, all displayed fields are inserted into a <div>.

It is possible to use the dot . to display data from a nested resource.

Sets

To group fields within a <div> tag, enclose some fields in parenthesis.

In this example, a <div name="fullName"> will be created, and it will contain the widgets of the first name and the last name of the user.
<solid-display
    data-src="http://server/users/1/"
    fields="fullName(first_name, last_name), email"
></solid-display>
Make sure you don’t give your set the same name as a field as it would result in an infinite loop.

You can customize the group widget, see the Sets widgets page for more info.

Strings

To display static strings in the fields list, put it inside quotes.
<solid-display
    data-src="http://server/users/1/"
    fields=" 'Email: ', email "
></solid-display>
It will create a <span> element filled with the text ``Email: ``.

`value-[field]`

To display a string not contained within the data.

<solid-display
    fields="title"
    value-title="My custom and static title"
></solid-display>

`default-[field]`

Value displayed for [field] when it’s empty or not defined.

`widget-[field]`

The widget to be used to display the [field]. This widget can be:

A core widget. More informations on the widget reference page.

A custom widget. More informations on the solid-widget page.

A native HTML tag (ie: h1). The value will be inserted as text content of the tag.

`default-widget`

The widget to use for all the fields, except if a specific one is defined for a field.

`default-widget-[field]`

The widget displayed by default if the [field] is empty.

`action-[field]`

Displays a link with a <solid-link> tag with the current resource as data-src and the value of the attribute as next.

`link-text-[field]`

Works only with solid-display-link(-mailto/tel/blank) and solid-action Available from version 0.18

Modify the displayed value as link in :

<a> for solid-display-link,

<solid-link> in solid-action.

`src-[field]`

Defines the data-src in the solid-link created by the action-[field] attribute.

`label-[field]`

Set the label for the [field].

`placeholder-[field]`

Set the placeholder for the [field].

`class-[field]`

Set the class applied to the widget of the [field] or the set.

`editable-[field]`

Works only with display widgets

Add an “edit” button next to the [field] to let the user edit it. The changes are saved as soon as the field loses focus.

The editable attribute works with the following templates:

display-div

display-link
<solid-display
    data-src="http://server/users/1/"
    fields="name"
    widget-name="solid-display-div"
    editable-name
></solid-display>

`alt-[field]`

Works only with solid-display-img

Set the alt for the field [field].

`empty-[set]`

Available from version 0.17

Name of the widget to display when all the fields in [set] are empty.

`empty-[set]-value`

Available from version 0.17

Value to pass to the empty widget if all fields in [set] are empty. It is accessible in ${value}

<solid-display
    data-src="http://server/users/"
    fields="fullname(first_name, last_name)"
    empty-fullname="no-name-widget"
    empty-fullname-value="add-name"
></solid-display>

<solid-widget name="no-name-widget">
    <template>
        <small>No fullname filled in. <solid-link next="${value}">click here to add one</solid-link></small>
    </template>
</solid-widget>

`multiple-[field]`

Allows to display the container [field] nested in the current resource.

It takes a container URI as a value, fetch all the resources of this container and display them.

Multiple widget can be specified, example: multiple-skills="my-custom-multiple-widget". If argument is used without value, default multiple widget is used.

It can be used in :

solid-display: a nested solid-display will be created with the container URI as data-src.

All attributes of the form multiple-[field]-[attribute] are transfered on the nested solid-display as [attribute]. For example, to choose the fields you want to display, you can set: multiple-[field]-fields="name, @id"
<solid-display
    data-src="http://server/users/1/"
    fields="skills"
    multiple-skills
    multiple-skills-fields="name"
></solid-display>
solid-form : all the resources of the container are displayed in a text widget.

Buttons are automatically created to add and remove elements.

For solid-form only :

multiple-[field]-add-label : Text of the “+” button used to add an element
multiple-[field]-remove-label : Text of the “x” button used to remove an element

Available from version 0.18

multiple-[field]-add-class : Class of the “+” button used to add an element
multiple-[field]-remove-class : Class of the “x” button used to remove an element

Widgets

By default, the widget used is <solid-form-label-text>. Cf the Widget page for more info.

Events

`formChange`

Triggered when the form values change

solid-form-search

Mixins

Specific attributes

fields

label-[field]

submit-button

class-submit-button

range-[field]

enum-[field]

start-value-[field]

end-value-[field]

autocomplete-[field]

search-placeholder-[field]

search-text-[field]

auto-range-[field]

Mixin attributes

fields

value-[field]

default-[field]

widget-[field]

default-widget

default-widget-[field]

action-[field]

link-text-[field]

src-[field]

label-[field]

placeholder-[field]

class-[field]

editable-[field]

alt-[field]

empty-[set]

empty-[set]-value

multiple-[field]

Widgets

Events

formChange

`fields`

`label-[field]`

`submit-button`

`class-submit-button`

`range-[field]`

`enum-[field]`

`start-value-[field]`

`end-value-[field]`

`autocomplete-[field]`

`search-placeholder-[field]`

`search-text-[field]`

`auto-range-[field]`

`fields`

`value-[field]`

`default-[field]`

`widget-[field]`

`default-widget`

`default-widget-[field]`

`action-[field]`

`link-text-[field]`

`src-[field]`

`label-[field]`

`placeholder-[field]`

`class-[field]`

`editable-[field]`

`alt-[field]`

`empty-[set]`

`empty-[set]-value`

`multiple-[field]`

`formChange`