Newer
Older
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
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
<sib-display
id="list"
data-src="http://localhost:8000/todos/"
value-created="Created by:"
fields="image, status(state), author(created, name), info(task, date), deadline"
widget-image="sib-display-img"
search-fields="name, author"
next="detail"
></sib-display>
**Attributes:**
- **``data-src``**: The uri of the LDP resource you want to display. If
this resource is a container, ``<sib-display>`` will create a child
``<sib-display>`` for each resource it contains, and ``<sib-form>``
will display a blank form with appropriate fields to create a new
resource.
- **``value-xyz``**: To display a string not contained within the data.
- **``fields``**: The ordered list of fields to be displayed, separated
by commas.
By default, all the fields of the resource are displayed.
To not show any fields, put an empty fields (eg.
``<sib-display fields />)``
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
``<sib-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 ``<sib-display-div>``. Cf the
`Display widgets <#display-widgets>`__ section below for more info.
- **``default-widget``**: 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
child of multiple widget
- **``each-class-xyz``**: Used with ``multiple-xyz``, class of each
child of multiple widget
- **``each-range-xyz``**: Used with ``multiple-xyz``, range value of
each child of multiple widget
- **``multiple-xyz-add-label``**: Used with ``multiple-xyz``, text
of the “+” button
- **``multiple-xyz-remove-label``**: Used with ``multiple-xyz``,
text of the “×” button
- **``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
``xyz``
- **``search-label-xyz``**: Set the label for the search field
``xyz``
- **``search-widget-xyz``**: The form widget of the search field
``xyz``
- **``search-range-xyz``**: The range of values of the search field
``xyz``
- **``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
- **``order-by``**: The name of the field you want to use to order the
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.
- **``next``**: ``name`` attribute of the ``<sib-route>`` that should
be accessed when a ``<sib-display>`` element is clicked. See the
documentation of ``<sib-router>`` for more details.
- **``action-xyz``**:
- **``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:
``sib-display-div``, ``sib-display-labelled-div``,
``sib-display-mailto`` and ``sib-display-tel``
- **``counter-template``**: To display the number of resources fetched
by the ``sib-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
during the loading time.
- **``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 or not defined
- **``empty-widget``**: Widget to display when there is no element in
the container
- **``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 ``sib-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