diff --git a/source/_static/images/import_documentation/framework-basic-use/solid-form-addable.png b/source/_static/images/import_documentation/framework-basic-use/solid-form-addable.png
index 90c7ce578cb94b336573eca51a8fd3f12a534dc5..c81f978566e7544ba7ea9b57a3a2e2a4c7f97d59 100644
Binary files a/source/_static/images/import_documentation/framework-basic-use/solid-form-addable.png and b/source/_static/images/import_documentation/framework-basic-use/solid-form-addable.png differ
diff --git a/source/import_documentation/first_step/get-started.rst b/source/import_documentation/first_step/get-started.rst
index a7c992f1946d047921a6d6cca3486b7d0f745338..810578d6492ab6cc183334d7cd8a4dd9f1c21b11 100644
--- a/source/import_documentation/first_step/get-started.rst
+++ b/source/import_documentation/first_step/get-started.rst
@@ -125,7 +125,8 @@ It starts to look better !
Any HTML element can be used as widget, but Startin'blox also provide **built-in widgets** to easily manage specific
cases. To display images from their url, use the ``solid-display-img`` widget :
-.. code:: html
+
+.. code-block:: html
<solid-display
data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
@@ -138,16 +139,17 @@ cases. To display images from their url, use the ``solid-display-img`` widget :
Fields can also be grouped in **sets** using brackets : each bracket opens or closes a group, and groups can be
nested. The word before the opening bracket is the group name and can be used to have a specific widget to display this group.
-.. code:: html
+.. code-block:: html
+
+ <solid-display
+ data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
+ fields="title, image.url, meta(itunes:author, itunes:category.text), description"
+ widget-title="h1"
+ widget-image.url="solid-display-img"
+ widget-meta="p"
+ no-render
+ />
- <solid-display
- data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
- fields="title, image.url, meta(itunes:author, itunes:category.text), description"
- widget-title="h1"
- widget-image.url="solid-display-img"
- widget-meta="p"
- no-render
- />
.. figure:: ../../_static/images/import_documentation/podcast_tutorial/Render3-Podcast-Tutorial.png
:alt: Data displayed with image
@@ -180,7 +182,7 @@ Apply CSS to have your own look-and-feel
You can also target specific field with an attribute selector because ``<solid-display>`` component adds a
``name="[field]"`` attribute to the displayed data.
-.. code:: html
+.. code:: css
[name="itunes:category.text"]{
display: inline-block;
@@ -196,7 +198,8 @@ You can also target specific field with an attribute selector because ``<solid-d
But sometimes it's easier and cleaner to use classes. ``class-[field]`` tags let's you specify a class name.
-.. code:: html
+
+.. code-block:: html
<style>
.bordered {
@@ -218,15 +221,17 @@ But sometimes it's easier and cleaner to use classes. ``class-[field]`` tags let
no-render
/>
+
You can also use arbitrary text (enclosed by single quotes) in the fields list to display a text node :
.. code:: html
- <solid-display
- data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
- fields="title, image.url, meta('By: ', itunes:author, itunes:category.text), description"
- [...]
- />
+ <solid-display
+ data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
+ fields="title, image.url, meta('By: ', itunes:author, itunes:category.text), description"
+ [...]
+ />
+
.. figure:: ../../_static/images/import_documentation/podcast_tutorial/Render6-Podcast-Tutorial.png
:alt: Data displayed, CSS and text enclosed by sigle quotes
@@ -241,20 +246,22 @@ a list we have to tell the framework that it should be treated as multiple value
This is achieved with the ``multiple-[field]`` attributes. This tag creates a nested ``<solid-display>`` for each entry in
``item``. ``multiple-[field]-fields`` attribute is used to control which nested fields are displayed for each item.
-.. code:: html
- <solid-display
- data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
- fields="title, header(image.url, info( meta('By: ', itunes:author, itunes:category.text), description)), item"
- widget-title="h1"
- widget-image.url="solid-display-img"
- widget-meta="p"
- class-itunes:category.text="bordered"
- widget-header="header"
- multiple-item
- multiple-item-fields="title"
- no-render
- />
+.. code-block:: html
+
+ <solid-display
+ data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
+ fields="title, header(image.url, info( meta('By: ', itunes:author, itunes:category.text), description)), item"
+ widget-title="h1"
+ widget-image.url="solid-display-img"
+ widget-meta="p"
+ class-itunes:category.text="bordered"
+ widget-header="header"
+ multiple-item
+ multiple-item-fields="title"
+ no-render
+ />
+
.. figure:: ../../_static/images/import_documentation/podcast_tutorial/Render7-Podcast-Tutorial.png
:alt: Add item in data displayed
@@ -265,25 +272,26 @@ Custom template
To go further, we need to create our own widget template using the ``solid-widget`` tag. Let's show other episode data:
-.. code:: html
+.. code-block:: html
- <solid-widget name="podcast-episode">
- <template>
- <solid-display
- data-src="${value}"
- fields="title, meta(pubDate, itunes:duration), description"
- widget-title="h2"
- widget-description="p"
- />
- </template>
- </solid-widget>
+ <solid-widget name="podcast-episode">
+ <template>
+ <solid-display
+ data-src="${value}"
+ fields="title, meta(pubDate, itunes:duration), description"
+ widget-title="h2"
+ widget-description="p"
+ />
+ </template>
+ </solid-widget>
+
+ <solid-display
+ data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
+ [...]
+ multiple-item="podcast-episode"
+ no render
+ />
- <solid-display
- data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml"
- [...]
- multiple-item="podcast-episode"
- no render
- />
``solid-widget`` tag must be used with ``template`` to avoid its content to be rendered during the first page display.
The code included in the template is then used by Startin'blox to render each item. And you can use here again all the
@@ -315,26 +323,28 @@ Now if I use ``widget-pubDate="format-date"`` in ``<solid-widget name="podcast-e
And this template mechanism plays also nicely with other HTML5 standard tags, such as ``audio`` :
+
.. code:: html
- <solid-widget name="audio-player">
- <template>
- <audio src="${value}" controls/>
- </template>
- </solid-widget>
+ <solid-widget name="audio-player">
+ <template>
+ <audio src="${value}" controls/>
+ </template>
+ </solid-widget>
+
+ <solid-widget name="podcast-episode">
+ <template>
+ <solid-display
+ data-src="${value}"
+ fields="title, meta('Épisode du ', pubDate, ' - ', itunes:duration), description, enclosure.url"
+ widget-title="h2"
+ widget-description="p"
+ widget-pubDate="format-date"
+ widget-enclosure.url="audio-player"
+ />
+ </template>
+ </solid-widget>
- <solid-widget name="podcast-episode">
- <template>
- <solid-display
- data-src="${value}"
- fields="title, meta('Épisode du ', pubDate, ' - ', itunes:duration), description, enclosure.url"
- widget-title="h2"
- widget-description="p"
- widget-pubDate="format-date"
- widget-enclosure.url="audio-player"
- />
- </template>
- </solid-widget>
.. figure:: ../../_static/images/import_documentation/podcast_tutorial/Render10-Podcast-Tutorial.png
:alt: Add audio player solid-widget
diff --git a/source/import_documentation/framework_guide/how-to-use-SIB.rst b/source/import_documentation/framework_guide/how-to-use-SIB.rst
index 43cf6cbd1268b3f17b3fb6680f5e401b1dd5b9b6..93829191c09e30e1a35bb42b791495dede775dcf 100644
--- a/source/import_documentation/framework_guide/how-to-use-SIB.rst
+++ b/source/import_documentation/framework_guide/how-to-use-SIB.rst
@@ -19,6 +19,7 @@ To present it really simply, a ``solid-display`` component with a ``data-src`` a
data-src="data/documentation/users.jsonld"
fields="first_name, last_name"
></solid-display>
+
<solid-display
data-src="data/documentation/user-1.jsonld"
fields="first_name, last_name"
@@ -48,6 +49,7 @@ Startin'blox proposes 2 ways to display it:
* **period** syntax
* ``nested-field`` attribute
+
.. code-block:: html
<solid-display
@@ -71,8 +73,8 @@ The widgets are used to specify how data is displayed. Their use is detailed in
:alt: nested-data
-How to create a form
---------------------
+How to add and edit data
+------------------------
To create a form, indicate in ``data-src`` attribute the data model to which it corresponds. If the data model is a **resource**, the form will be used to edit data. If it's a **container**, the form will create a new resource.
@@ -111,21 +113,21 @@ Then, add attributes and widgets to change label values, precise inputs type, et
.. figure:: ../../_static/images/import_documentation/framework-basic-use/solid-form.png
:alt: Example of solid-form use
-Example with addable feature
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+How to add new values in a form
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The feature ``addable`` adds a solid-form to add a value to a field. Here, hobbies is concerned:
.. code-block:: html
<solid-form
- class="form"
data-src="data/documentation/users.jsonld"
fields="first_name, last_name, hobbies"
label-first_name="First name:"
label-last_name="Last name:"
label-hobbies="Hobbies:"
+ submit-button="Send form"
widget-hobbies="solid-form-dropdown-addable-label"
range-hobbies="data/documentation/hobbies.jsonld"
@@ -133,7 +135,7 @@ The feature ``addable`` adds a solid-form to add a value to a field. Here, hobbi
addable-hobbies-fields="name"
addable-hobbies-widget-name="solid-form-text-label"
addable-hobbies-label-name="Add a new hobby:"
- addable-hobbies-naked
+ addable-hobbies-submit-button="Add hobby"
></solid-form>
The red frame represents the widget tag ``solid-form-dropdown-addable-label``,
@@ -143,9 +145,9 @@ the blue frame represents the ``<solid-form>`` created by ``addable`` attribute:
:alt: Example of solid-form with addable feature
-Specific case - data-holder attribute
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-To modify or add data including data linked, adding a second solid-form is necessary. It can be done thanks to a custom solid-widget. The second-form can also contain attributes:
+Specific case - how to add and edit nested data
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+To modify or add data including data linked, adding a second solid-form is necessary, with ``data-holder`` and ``data-src=${value}`` attributes. It can be done thanks to a custom solid-widget. The second-form can also contain attributes:
.. code-block:: html
@@ -225,7 +227,7 @@ Jsonld data structure used for the example:
:alt: Example of jsonld data container
-How to use solid-form-search
+How to filter displayed data
----------------------------
From the example above, by adding ``filtered-by`` attribute reffering to a ``solid-form-search`` component, data displayed can be filtered:
@@ -404,7 +406,7 @@ How to use special attributes, values
store://...
~~~~~~~~~~~
-It allows to fetch and display values from the :ref:`store <store-mixin>`.
+It allows to fetch from the :ref:`store <store-mixin>` and display any value from any data resource, for any concerned attribute.
*Here, without it, the field's name is displayed by default.*
@@ -433,6 +435,7 @@ It allows to keep and pass the resource data-src between views when a :ref:`soli
*Here, it ensures the personal informations of user clicked are displayed.*
+
.. code-block:: html
<solid-router use-hash>
@@ -464,12 +467,6 @@ It allows to keep and pass the resource data-src between views when a :ref:`soli
></solid-display>
</div>
+
.. figure:: ../../_static/images/import_documentation/framework-basic-use/bind-resources.png
:alt: Example of bind-resources use
-
-data-holder - ${value}
-~~~~~~~~~~~~~~~~~~~~~~
-
-These elements have already been introduced on examples above, for more information, please visit :ref:`solid-widget<solid-widget>`, :ref:`list-mixin<list-mixin>`, :ref:`widget-mixin<widget-mixin>` pages.
-
-