Widgets API Reference¶
Widgets are created at the moment you ask for it for the first time. The name of the widget is analyzed to build a widget which uses the features and template you want.
Here is a schema of how it works:

A widget is built like this.
solid-[type]-[template]-[features]
¶
All the keywords must be separated by ``-`` but can be put in any order.
type
¶
Can be display
, form
or set
. Will select the directory of template to use.
template
¶
Name of the template to use. Available templates:
display
directoryvalue
: displaysvalue
directly in the widget tag.div
: displaysvalue
inside a<div>
taglink
: displaysvalue
as anhref
attribute in a<a>
tagimg
: displaysvalue
as asrc
attribute in a<img>
tagboolean
: displays label (or name) in a<label>
tag ifvalue == true
form
directorytext
: setvalue
in an<input>
of typetext
.textarea
: setvalue
in a<textarea>
.richtext
: setvalue
in an<div>
and initialize a light rich text editor by usingQuill
.checkbox
: create a checkbox, which is checked ifvalue == true
.date
: setvalue
in an<input>
of typedate
.rangedate
: set 2 values in 2<input>
of typedate
. Used for filtering with min and max. Possible to addstart-value-[field]
andend-value-[field]
attributes to set min and max values. Date format to follow : “YYYY-MM-DD”. Each attribute acceptstoday
as value.number
: setvalue
in an<input>
of typenumber
.rangenumber
: set 2 values in 2<input>
of typenumber
. Used for filtering with min and max. Possible to addstart-value-[field]
andend-value-[field]
attributes to set min and max values.hidden
: setvalue
in an<input>
of typehidden
.dropdown
: setvalue
in a<select>
. The list is provided via therange
attribute, which expects a container’s URL, or via theenum
attribute, which takes a list of the values separated by commas.radio
: setvalue
in a list of radio buttons. The list is provided via therange
attribute, which expects a container’s URL, or via theenum
attribute, which takes a list of the values separated by commas.multiple
: Accept a container URI as avalue
, and inserts one widget per resource with a “remove” button for each widget, and an “add” button.multipleselect
: Accept a container URI as avalue
, and inserts a dropdown widget with themultiple
attribute.checkboxes
: Accept a container URI as avalue
, allow to select multiple values with in a list of checkbox inputs. The list is provided via therange
attribute, which expects a container’s URL, or via theenum
attribute, which takes a list of the values separated by commas.file
: Inserts an<input/>
and an<input type="file"/>
. When a file is selected it’s uploaded, URL of file is returned by request and set as the<input/>
value. The upload URL is provided via theupload-url
attribute.image
: Works likefile
but allow only images in the input, and create a preview of the image when selected by the user.color
: setvalue
in a<input>
of typecolor
.
set
default
: inserts widgets directly in the set tag.div
: inserts widgets in a<div>
tag.ul
: inserts widgets in a<ul>
tag.
default (no template keyword defined)
action
: Displays a link inside a<solid-link>
tag withsrc
for thedata-src
attribute,value
for thenext
attribute andlabel
as text content.multiple
: insert asolid-display
with the@id
of a container asdata-src
. The fields to display are chosen with themultiple-[field name]-fields
attribute.
features
¶
Features to add to the widget. You can choose as many as you want
label
: adds alabel
before the template. Uses the attributename
iflabel
is not defined.labellast
: adds alabel
after the template. Uses the attributename
iflabel
is not defined.autocompletion
: initializes theSlimSelect
plugin. Works only with dropdowns.autolink
: analyzes widget content, and transforms all links in anchor.mailto
: addsmailto:
at the beginning of anhref
attribute. Works only with links.tel
: addstel:
at the beginning of anhref
attribute. Works only with links.blank
: adds an attributetarget="_blank"
. Works only with links.placeholder
: adds a placeholder in the input. Uses the attributename
orlabel
ifplaceholder
is not defined. Works only with input widgets.date
: transforms the value in a date, in the browser’s default locale format.datetime
: transforms the value in a date and time, in the browser’s default locale format.multiline
: shows a value on multiple lines (replace\n
by<br>
).markdown
: takes markdown code and displays formatted text. Works only with a display template (value, div, link).addable
: adds a<solid-form>
that allows to add data on the field concerned. It accepts attributes from solid-form by usingaddable-[field]-[attribute]="value"
format. Ifaddable-data-src
is not provided, the solid-form will use the URI inrange-[field]
as data-src, if declared.