Newer
Older
Receives the URL of a resource or of a container of resources via its
``data-src`` attribute, and displays it.
Each field of the displayed
resources can be rendered by a specific widget, either custom or chosen
from the default ones. Filters and searching capabilities can be easily
added to interact with the list of data being displayed.
.. code:: html
<!--head-->
<script type="module" src="https://unpkg.com/@startinblox/core@0.9"></script>
<!--body-->
data-src="https://api.startinblox.com/users/"
fields="first_name, last_name"
data-src
~~~~~~~~
The uri of the LDP resource you want to display.
If this resource is a container, ``<solid-display>`` will create a child
``<solid-display>`` for each resource it contains, and ``<solid-form>``
will display a blank form with appropriate fields to create a new
resource.
by commas.
By default, all the fields of the resource are displayed.
To not show any fields, put an empty fields (eg.
To group fields within a ``<div>`` tag that will have the ``name``
attribute set up to ``xyz``, enclose some fields in parenthesis. For
example: ``fields="xyz(first_name, last_name), email"``. You can
customize the group widget, see the `sets widgets <#set-widgets>`__
section below for more info.
By default, all displayed fields are direct children of
``<solid-display>``. Make sure you don’t give your set the same name as
a field as it would result in an infinite loop.
widget-xyz
~~~~~~~~
The widget to be used to display the ``xyz``
field. By default, the widget used is ``<solid-display-div>``. Cf the
`Display widgets <#display-widgets>`__ section below for more info.
The widget to use for all the fields, except if a specific one is defined for a field.
multiple-xyz
~~~~~~~~~~~~~~~~
Show field ``xyz`` as multiple field containing
one widget for each child. Multiple widget can be specified, example:
``multiple-skills="my-custom-multiple-widget"``. If argument is used
without value, default multiple widget is used. Cf the `Multiple
widgets <#multiple-widgets>`__ section below for more info.
each-label-xyz
++++++++++++++
Used with ``multiple-xyz``, label of each
each-class-xyz
++++++++++++++
Used with ``multiple-xyz``, class of each
each-range-xyz
++++++++++++++
Used with ``multiple-xyz``, range value of
multiple-xyz-add-label
+++++++++++++
Used with ``multiple-xyz``, text
multiple-xyz-remove-label
++++++++++++++++++++++++++++
Used with ``multiple-xyz``,
search-fields
~~~~~~~~~~~~~~~~
It is possible to search/filter your list by
choosing the fields you want to filter it with. To be able to filter
my users by ``name`` for instance, I can set
``search-fields="name"``. This will display a form with the
appropriate inputs to filter the list.
- ``search-value-xyz``: The default value of the search field
- ``search-label-xyz``: Set the label for the search field
- ``search-widget-xyz``: The form widget of the search field
- ``search-range-xyz``: The range of values of the search field
paginate-by
~~~~~~~~~~~~~~~~
The list can also be split in pages, for example
set ``paginate-by="5"`` to display pages of 5 elements, the prev/next
buttons and the counter will be added automatically
list. For example, ``order-by="username"`` will order the users list
alphabetically based on the username.
highlight-xyz
~~~~~~~~~~~~~~~~
The resources to put at the top of the list.
For example, ``highlight-date="2019-05-20"`` will display first all
the resources which have a field date equal to “2019-05-20”.
group by
~~~~~~~~~~~~~~~~
The resources will be grouped by the field you give
as a parameter. For example, ``group-by="date"`` will render one
``<div>`` by date, and put the corresponding resources inside.
``name`` attribute of the ``<solid-route>`` that should
be accessed when a ``<solid-display>`` element is clicked. See the
documentation of ``<solid-router>`` for more details.
label-xyz
~~~~~~~~~~~~~~~~
Set the label for the field ``xyz``
editable-xyz
~~~~~~~~~~~~~~~~
Add an “edit” button next to the ``xyz`` 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 widgets:
``solid-display-div``, ``solid-display-labelled-div``,
``solid-display-mailto`` and ``solid-display-tel``
counter-template
~~~~~~~~~~~~~~~~
To display the number of resources fetched
by the ``solid-display``. It takes a string in which you can use HTML
tags, and the ``counter`` variable to add the number.
i.e. ``"<strong>${counter} results</strong>"``
extra-context
~~~~~~~~~~~~~~~~
The id of the ``<script>`` tag which contains
the context you want to add for this component. An extra context
looks like this:
.. code:: html
<script id="custom-context" type="application/ld+json">
{ "user": "https://api.test-paris.happy-dev.fr/users/" }
</script>
If your ``<script>`` tag has the attribute ``data-default-context``,
this extra context will be applied on all the components which
doesn’t have an ``extra-context`` attribute.
loader-id
~~~~~~~~~~~~~~~~
Id of the loader element you want to display
class-xyz
~~~~~~~~~~~~~~~~
Class attribute added to the fields ``xyz``.
child-xyz
~~~~~~~~~~~~~~~~
add attribute ``xyz`` to all children.
nested-field
~~~~~~~~~~~~~~~~
Name of the field of the requested resource to
display. Useful when the source url is auto-generated (for instance,
with the attribute ``bind-resources``) but you need to display
another field of this source.
default-xyz
~~~~~~~~~~~~~~~~
Value displayed for field ``xyz`` when it’s
empty-widget
~~~~~~~~~~~~~~~~
Widget to display when there is no element in
empty-value
~~~~~~~~~~~~~~~~
To display a value in the empty widget. It can
be accessed in the widget like this: ``${value}``
API
---
In Javascript, you have access to different variables and methods on a ``solid-display`` element:
- ``sibDisplay.resource``: returns the Proxy of the current resource
- ``sibDisplay.resource.clearCache()`` (async): clears the cache of the store for this resource
- ``sibDisplay.resourceId``: returns the id of the current resource