SiB-Widget.rst

solid-widget
============

Take a ``name`` as an attribute and a HTML template, and create an HTML
custom element you can use as a widget. i.e.

.. code:: html

   <!-- Your custom widget to display a customer... -->
   <solid-widget name="my-custom-widget">
     <template>
       <h2>Customer name: ${value.name}</h2>
     </template>
   </solid-widget>

   <!-- ... used in a solid-display -->
   <solid-display
     data-src="http://server/projects/"
     fields="name, customer"
     widget-customer="my-custom-widget"
   ></solid-display>

In a ``solid-widget``, you have access to these values:

-  ``id``: id of the displayed resource
-  ``value``: all the values of the current resources
-  ``name``: name of the current field
-  ``label``: if defined, label of the current field
-  ``range``: if defined, range of the current field

..

   NB: Do not forget to define your custom template in a ``<template>``
   tag. Otherwise, your widget will not be declared properly.

Widgets
-------

The following widgets are available:

Display widgets
~~~~~~~~~~~~~~~

-  ``solid-display-value`` (default): Displays the value.
-  ``solid-display-div``: Displays the ``value`` inside a ``<div>``
   HTML tag.
-  ``solid-display-labelled-div``: Displays the ``value`` inside a
   ``<div>`` HTML tag, after the ``label`` contained in a ``<label>``
   HTML tag
-  ``solid-display-multiline``:Displays the ``value`` inside a
   ``<div>``, ``\n`` are replaced by ``<br>``.
-  ``solid-display-labelled-boolean``: Displays the ``label`` inside a
   ``<label>`` HTML tag if the ``value`` is true
-  ``solid-display-img``: Inserts the ``value`` as the src attribute
   value of an ``<img>`` HTML tag.
-  ``solid-display-mailto``: Displays a link inside a ``<a>`` HTML tag
   with a ``mailto:value`` as path. If a label is defined for this
   field, it’s displayed as the content of the link.
-  ``solid-display-tel``: Displays a link inside a ``<a>`` HTML tag
   with a ``tel:value`` as path
-  ``solid-display-link``: Displays a link inside a ``<a>`` HTML tag
   with the value as path, and the label as text content
-  ``solid-display-date``: Displays a date in the browser’s default
   locale format
-  ``solid-display-date-time``: Displays a date and a time in the
   browser’s default locale format

Form widgets
~~~~~~~~~~~~

-  ``solid-form-label-text``: Inserts an ``<input/>`` HTML tag of type
   “text”, in a ``<label>`` HTML tag.
-  ``solid-form-checkbox``: Inserts an ``<input/>`` HTML tag of type
   “checkbox”, in a ``<label>`` HTML tag.
-  ``solid-form-date``: Inserts an ``<input/>`` HTML tag of type
   “date”, in a ``<label>`` HTML tag.
-  ``solid-form-range-date``:
-  ``solid-form-json``: Inserts an ``<input/>`` HTML tag of type
   “text”, in a ``<label>`` HTML tag, and with its ``value`` converted
   from JSON to string
-  ``solid-form-placeholder-text``: Inserts an ``<input/>`` HTML tag
   of type “text”, with the ``label`` as placeholder.
-  ``solid-form-textarea``: Inserts an ``<textarea>`` HTML tag in a
   ``<label>`` HTML tag.
-  ``solid-form-dropdown``: Inserts a ``<select>`` HTML tag to select
   a unique value from a list. The list is provided via the
   ``range-xyz``, which expects a container’s URL. **xyz** is the name
   of the field using the ``solid-form-dropdown`` widget.
-  ``solid-form-placeholder-dropdown``: Inserts a ``<select>`` HTML
   tag to select a unique value from a list. It has no label but a
   default disabled value as a label
-  ``solid-form-auto-completion``: Inserts a ``<input />`` HTML tag
   and load an autocomplete plugin. The list is provided via the
   ``range-xyz``, which expects a container’s URL. **xyz** is the name
   of the field using the ``solid-form-auto-completion`` widget.
-  ``solid-form-number``: Inserts an ``<input/>`` HTML tag of type
   “number”, in a ``<label>`` HTML tag.
-  ``solid-form-range-number``:
-  ``solid-form-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 the ``upload-url`` attribute.
-  ``solid-form-hidden``: Inserts an ``<input/>`` HTML tag of type
   “hidden”, in a ``<label>`` HTML tag.

Multiple widgets
~~~~~~~~~~~~~~~~

-  ``solid-multiple`` (default for display): Inserts all the widgets
   in a ``<solid-multiple>`` tag.
-  ``solid-multiple-form`` (default for forms): Inserts all the
   widgets in a ``<solid-multiple-form>`` tag, with a “remove” button for
   each widget, and an “add” button.
-  ``solid-multiple-select``: Inserts all the values as ``<option>``
   in a ``<select>`` tag with a ``multiple`` attribute.

Set widgets
~~~~~~~~~~~

-  ``solid-set-default`` (default): Inserts content directly in the
   set tag.
-  ``solid-set-div``: Inserts content in a ``<div/>`` HTML tag
-  ``solid-set-ul``: Inserts content in a ``<ul/>`` HTML tag
-  ``solid-set-fieldset``: Inserts content in a ``<fieldset/>`` HTML
   tag

Actions widgets
~~~~~~~~~~~~~~~

-  ``solid-action``: Displays a link inside a ``<solid-link>`` tag with
   ``src`` for the ``data-src`` attribute, ``value`` for the ``next``
   attribute and ``label`` as text content