Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • documentation/doc
  • PhilH/doc
  • louis.csn/doc
  • fabien4vo/doc
  • rngadam/doc
  • anastasia/doc
6 results
Show changes
Showing
with 619 additions and 174 deletions
.. _solid-table:
solid-table
=============
===========
*Available from version 0.16*
......@@ -24,7 +24,6 @@ Mixins
------
This component uses the following mixins:
* :ref:`required-mixin <required-mixin>`
* :ref:`counter-mixin <counter-mixin>`
* :ref:`federation-mixin <federation-mixin>`
* :ref:`filter-mixin <filter-mixin>`
......@@ -32,6 +31,8 @@ This component uses the following mixins:
* :ref:`highlighter-mixin <highlighter-mixin>`
* :ref:`list-mixin <list-mixin>`
* :ref:`paginate-mixin <paginate-mixin>`
* :ref:`required-mixin <required-mixin>`
* :ref:`paginate-mixin <server-pagination-mixin>`
* :ref:`sorter-mixin <sorter-mixin>`
* :ref:`store-mixin <store-mixin>`
* :ref:`widget-mixin <widget-mixin>`
......@@ -39,15 +40,14 @@ This component uses the following mixins:
Please check their documentation to know more about their capabilities.
Attributes
----------
Specific attributes
-------------------
``fields``
~~~~~~~~~~
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.
List of fields displayed in the table.
More details on its use below (in **widget-mixin attributes**).
``header``
~~~~~~~~~~
......@@ -64,8 +64,8 @@ Attributes
.. code:: javascript
document.querySelector('solid-table').component.selectedLines
// returns [ "resourceId1", "resourceId2" ]
document.querySelector('solid-table').component.selectedLines
// returns [ "resourceId1", "resourceId2" ]
``editable-[field]``
~~~~~~~~~~~~~~~~~~~~
......@@ -76,15 +76,71 @@ Attributes
.. code:: html
<solid-table
data-src="https://server/users/"
fields="first_name"
editable-first_name
widget-first_name="solid-form-placeholder-text"
placeholder-first_name="Your First Name"
></solid-table>
<solid-table
data-src="https://server/users/"
fields="first_name"
editable-first_name
widget-first_name="solid-form-placeholder-text"
placeholder-first_name="Your First Name"
></solid-table>
Mixin attributes
-----------------
**From counter-mixin :**
.. include:: ../Mixins/counter-mixin.rst
:start-line: 17
**From filter-mixin :**
.. include:: ../Mixins/filter-mixin.rst
:start-line: 18
**From grouper-mixin :**
.. include:: ../Mixins/grouper-mixin.rst
:start-line: 18
**From highlighter-mixin :**
.. include:: ../Mixins/highlighter-mixin.rst
:start-line: 17
**From list-mixin :**
.. include:: ../Mixins/list-mixin.rst
:start-line: 25
**From paginate-mixin :**
.. include:: ../Mixins/paginate-mixin.rst
:start-line: 17
**From required-mixin :**
.. include:: ../Mixins/required-mixin.rst
:start-line: 17
**From sorter-mixin :**
.. include:: ../Mixins/sorter-mixin.rst
:start-line: 17
**From store-mixin :**
.. include:: ../Mixins/store-mixin.rst
:start-line: 21
:end-before: Events
**From widget-mixin :**
.. include:: ../Mixins/widget-mixin.rst
:start-line: 18
Widgets
-------
By default, the widget used is ``<solid-display-value>``. Cf the
`Widget <https://docs.startinblox.com/import_documentation/Widgets/Reference.html>`__ page for more info.
By default, the widget used is ``<solid-display-value>``. Cf the
:ref:`Widget <reference>` page for more info.
......@@ -29,7 +29,58 @@ In a ``solid-widget``, you have access to these values:
- ``label``: if defined, label of the current field
- ``range``: if defined, range of the current field
..
.. note::
NB: Do not forget to define your custom template in a ``<template>``
tag. Otherwise, your widget will not be declared properly.
Attributes
----------
``data-holder``
~~~~~~~~~~~~~~~
Special attribute which can be inserted in a ``<solid-form>`` or an ``<input>`` within a ``<solid-widget>``.
When set on an element in the widget, it takes the ``value`` of this element and associate it with the ``field`` targetted by the widget.
If this attribute is combined with ``data-src="${value}"`` on a ``<solid-form>`` in a widget, values from the nested resource are directly editable. It works only if ``value`` is a resource (and not if it's a literal).
``data-src="${value}"``
~~~~~~~~~~~~~~~~~~~~~~~
It is usable to edit a nested resource (ie: a profile of a user, a customer of a project, ...) by creating a ``<solid-form>`` in a ``<solid-widget>``.
The ``value`` will be the ``@id`` of the nested resource, thus putting it in the ``data-src`` will create a form field on this nested resource.
It cannot be used without ``data-holder`` attribute.
The example below illustrates the input widget with and without ``value="${value}"``
(input's ``value="${value}"`` is equivalent to solid-form's ``data-src="${value}"``) :
.. code:: html
<solid-form
data-src="../data/list/users.jsonld"
fields="email"
widget-email="custom-form-widget-1"
></solid-form>
<solid-widget name="custom-form-widget-1">
<template>
<input type="text" data-holder />
</template>
</solid-widget>
<solid-form
data-src="../data/list/user-1.jsonld"
fields="email"
widget-email="custom-form-widget-2"
></solid-form>
<solid-widget name="custom-form-widget-2">
<template>
<input type="text" data-holder value="${value}" />
</template>
</solid-widget>
.. figure:: ../../_static/images/import_documentation/img-core-examples/data-holder-in-solid-widget.png
:alt: solid-widget with and without value="${value}" attribute
......@@ -27,4 +27,3 @@ Attributes
fields="username"
counter-template="<strong>${counter} users here</strong>"
></solid-display>
......@@ -20,7 +20,7 @@ Attributes
Target a ``<solid-form-search>`` used to filter current list of resource.
example:
Example:
.. code:: html
......@@ -41,8 +41,6 @@ Attributes
``search-fields`` **deprecated**
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The properties you want to use to filter the list of resources.
You can add multiple fields, separated by a comma.
......
.. _grouper-mixin:
grouper-mixin
============
=============
The grouper mixin is a post-processor mixin, compatible with list-mixin.
It provides the ability to group resources, depending of the values of one of their properties.
......@@ -17,7 +17,6 @@ Attributes
``group-by``
~~~~~~~~~~~~
The resources will be grouped by the field you give as a parameter.
In this example, the mixin will render one
......@@ -38,7 +37,7 @@ Attributes
set the ``group-by`` attribute to ``nested_resource.name``.
``group-widget``
~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~
*Available from version 0.13*
default: ``solid-group-default``
......@@ -55,8 +54,6 @@ Attributes
</template>
</solid-widget>
``group-class``
~~~~~~~~~~~~~~~
The name of the class to add on each group widget.
\ No newline at end of file
......@@ -20,7 +20,7 @@ Attributes
``next``
~~~~~~~~
`name` attribute of the ``<solid-route>`` that should be accessed when a ``<solid-display>``, ``<solid-map>`` or ``<solid-calendar>`` element is clicked.
``name`` attribute of the ``<solid-route>`` that should be accessed when a ``<solid-display>``, ``<solid-map>`` or ``<solid-calendar>`` element is clicked.
It can also be used to indicate the ``name`` attribute of the ``<solid-route>`` to reach after :
......
.. _paginate-mixin:
paginate-mixin
===============
==============
The paginate mixin is a post-processor mixin, compatible with list-mixin.
It provides the ability to paginate a list of resources.
......@@ -15,7 +15,7 @@ Attributes
----------
``paginate-by``
~~~~~~~~~~~~
~~~~~~~~~~~~~~~
The list can be split in pages. The "previous" and "next"
buttons and the pages counter will be added automatically.
......@@ -31,7 +31,7 @@ Attributes
``paginate-loop``
~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~
If this attribute is present, when the user is on the last page, the "Next" button brings back to the first one.
Also, when he is on the first page, the "Previous" button brings to the last page.
......
.. _server-pagination-mixin:
server-pagination-mixin
================
The server-pagination mixin is a post-processor mixin, which provides the ability to handle the pagination server side, hence reducing the number of resources fetched on first call.
Used by:
--------
* :ref:`solid-display <solid-display>`
Attributes
----------
``limit``
~~~~~~~~~~~~~~~
The number of resources to fetch.
In this example, the list will show pages of 5 users.
.. code:: html
<solid-display
data-src=http://server/users/"
fields="username"
limit="5"
></solid-display>
``offset``
~~~~~~~~~~~~~~~
The offset of the first resource to fetch
In this example, the list will show pages of 5 users, skipping the first ten.
.. code:: html
<solid-display
data-src=http://server/users/"
fields="username"
limit="5"
offset="10"
></solid-display>
\ No newline at end of file
......@@ -53,7 +53,7 @@ Attributes
The ``fields`` attribute of ``<solid-form-search>`` must at least contain ``field``.
``Field`` attribute contains the fields of the resource to be offered to the user for sorting the data.
``Order`` attribute allows you to propose 2 sorting orders: ascending (``asc`) and descending (``desc``).
``Order`` attribute allows you to propose 2 sorting orders: ascending (``asc``) and descending (``desc``).
By default, the order is ascending.
The ``<solid-display>`` cannot combine ``order-asc`` or ``order-desc`` attribute AND ``sorted-by`` attribute.
......
......@@ -18,6 +18,7 @@ Used by:
Attributes
----------
.. _data-src:
``data-src``
~~~~~~~~~~~~
The uri of the LDP resource you want to fetch and use in the component.
......@@ -26,6 +27,7 @@ Attributes
When the data has been successfuly fetched, the mixin ask the component to render.
.. _nested-field:
``nested-field``
~~~~~~~~~~~~~~~~
The name of the field of the requested resource to
......@@ -33,6 +35,28 @@ Attributes
with the attribute ``bind-resources``) but you need to display
another field of this source.
The example below illustrates how to use nested-field attribute :
* The ``profile`` is a resource nested in the current resource, it will automatically fetch the ``city``, ``phone``, ``website`` values to display them.
* The second solid-display shows another way to display the values from a nested resource with dot ``.``.
.. code:: html
<solid-display
data-src="data/list/user-1.jsonld"
nested-field="profile"
fields="city, phone, website"
></solid-display>
<solid-display
data-src="data/list/user-1.jsonld"
fields="profile.city, profile.phone, profile.website"
></solid-display>
.. figure:: ../../_static/images/import_documentation/img-core-examples/nested-field.png
:alt: nested-field attribute use
.. _extra-context:
``extra-context``
~~~~~~~~~~~~~~~~~
The id of the ``<script>`` tag which contains
......@@ -49,6 +73,7 @@ Attributes
this extra context will be applied on all the components which
doesn’t have an ``extra-context`` attribute.
.. _loader-id:
``loader-id``
~~~~~~~~~~~~~
Id of the loader element you want to display during the loading time.
......@@ -75,6 +100,7 @@ Attributes
.. image:: ./../../_static/images/import_documentation/loader.gif
:alt: Exemple of loader
.. _no-render:
``no-render``
~~~~~~~~~~~~~
*Available from version 0.13*
......@@ -89,8 +115,9 @@ Attributes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.13*
This mixin decode all attribute values starting by ``store://resource`` or
``store://user`` and replace them by the values fetched from the store.
This mixin decode all attribute values starting by ``store://resource``,
``store://container`` or ``store://user`` and replace them by the values fetched
from the store.
It can be a value fetched from the current resource or the current logged in user (works with ``sib-auth``).
......
.. _translation-mixin:
translation-mixin
=================
*Available from version 0.17*
The translation mixin provides an automatic translation in elements, depending on the browser language (English and French). Translations are default values, visible if no value is given by an attribute.
The concerned elements are :
- the submit-button in :ref:`solid-form <solid-form>`,
- the button in :ref:`solid-delete <solid-delete>`,
- the confirmation message from :ref:`validation-mixin <validation-mixin>`,
- the text in modal dialog's buttons from :ref:`validation-mixin <validation-mixin>`,
- :ref:`search-placeholder-[field] <search-placeholder-[field]>` and :ref:`search-text-[field] <search-text-[field]>` attributes available with ``autocompletion`` feature (SlimSelect plugin) from :ref:`widget API reference <reference>`.
Used by:
--------
* :ref:`store-mixin <store-mixin>`
* :ref:`validation-mixin <validation-mixin>`
\ No newline at end of file
......@@ -14,6 +14,7 @@ Used by:
Attributes
----------
.. _confirmation-type:
``confirmation-type``
~~~~~~~~~~~~~~~~~~~~~
It is a prerequisite and can take two options :
......@@ -21,26 +22,32 @@ Attributes
- ``confirm``: to access to a basic modal dialog.
- ``dialog``: to get a ``<dialog>`` more customizable.
.. _confirmation-message:
``confirmation-message``
~~~~~~~~~~~~~~~~~~~~~~~~
Message displayed in the modal dialog (``confirm`` or ``dialog`` type).
The message by default is "Please, confirm your choice".
The message by default is "Please, confirm your choice" in English, "Merci de confirmer votre choix" in French.
**The attributes below only concern ``dialog`` type.**
.. _confirmation-submit-text:
``confirmation-submit-text``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Text displayed on the submit button ("Ok" by default).
Text displayed on the submit button (by default, "Ok" in English, "Oui" in French).
.. _confirmation-cancel-text:
``confirmation-cancel-text``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Text displayed on the cancel button ("Cancel" by default).
Text displayed on the cancel button (by default "Cancel" in English, "Annuler" in French).
.. _confirmation-submit-class:
``confirmation-submit-class``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Submit button class name (undefined by default).
.. _confirmation-cancel-class:
``confirmation-cancel-class``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Cancel button class name (undefined by default).
......@@ -63,4 +70,30 @@ Attributes
confirmation-submit-text="Yes, I am"
confirmation-submit-class="submit-button"
confirmation-cancel-class="cancel-button"
></solid-form>
\ No newline at end of file
></solid-form>
.. _confirmation-widget:
``confirmation-widget``
~~~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.17*
Allows to insert a widget in the modal dialog, instead of ``confirmation-message`` (confirmation-widget prevails over confirmation-message).
The widget can contain a ``<solid-display>`` to display data from the resource concerned.
Example of confirmation-widget attribute use :
.. code:: html
<solid-widget name="confirm-delete-widget">
<template>
<div>
<p>Are you sure to delete <strong><solid-display fields="name" data-src="${value}" style="display:inline-block"></solid-display></strong> ? </p>
</div>
</template>
></solid-widget>
<solid-delete
data-src="http://server/user/"
confirmation-type="dialog"
confirmation-widget="confirm-delete-widget"
></solid-delete>
......@@ -9,22 +9,27 @@ Used by:
* :ref:`solid-display <solid-display>`
* :ref:`solid-form <solid-form>`
* :ref:`solid-form-search <solid-form-search>`
* :ref:`solid-map <solid-map>`
* :ref:`solid-table <solid-table>`
Attributes
----------
.. _fields:
``fields``
~~~~~~~~~~
The ordered list of fields to be displayed, separated by commas.
By default, all the fields of the resource are displayed.
By default, all the fields of the resource are used.
To not show any fields, put an empty fields (eg.
``<solid-display fields />)``
``<solid-display fields />)``.
By default, all displayed fields are inserted into a ``<div>``
By default, all displayed fields are inserted into a ``<div>``.
It is possible to use the dot ``.`` to display data from a nested resource.
**Sets**
......@@ -40,8 +45,9 @@ Attributes
fields="fullName(first_name, last_name), email"
></solid-display>
You can customize the group widget, see the `Sets widgets <https://docs.startinblox.com/import_documentation/Widgets/Reference.html>`__
page for more info.
Make sure you don’t give your set the same name as a field as it would result in an infinite loop.
You can customize the group widget, see the :ref:`Sets widgets <reference>` page for more info.
**Strings**
......@@ -57,6 +63,7 @@ Attributes
It will create a ``<span>`` element filled with the text ``Email: ``.
.. _value-field:
``value-[field]``
~~~~~~~~~~~~~~~~~
To display a string not contained within the data.
......@@ -68,47 +75,68 @@ Attributes
value-title="My custom and static title"
></solid-display>
.. _default-field:
``default-[field]``
~~~~~~~~~~~~~~~~~~~
Value displayed for ``[field]`` when it’s empty or not defined.
.. _widget-field:
``widget-[field]``
~~~~~~~~~~~~~~~~~~
The widget to be used to display the ``[field]``. This widget can be:
- A core widget. More informations on the `widget reference <https://docs.startinblox.com/import_documentation/Widgets/Reference.html>`__ page
- A custom widget. More informations on the `solid-widget <https://docs.startinblox.com/import_documentation/Components/SiB-Widget.html>`__ page
- A core widget. More informations on the :ref:`widget reference <reference>` page.
- A custom widget. More informations on the :ref:`solid-widget <solid-widget>` page.
- A native HTML tag (ie: ``h1``). The value will be inserted as text content of the tag.
.. _default-widget:
``default-widget``
~~~~~~~~~~~~~~~~~~
The widget to use for all the fields, except if a specific one is defined for a field.
.. _default-widget-field:
``default-widget-[field]``
~~~~~~~~~~~~~~~~~~~~~~~~~~
The widget displayed by default if the ``[field]`` is empty.
.. _action-field:
``action-[field]``
~~~~~~~~~~~~~~~~~~
Displays a link with a ``<solid-link>`` tag with the current resource as ``data-src`` and the value of the attribute as ``next``.
Displays a link with a ``<solid-link>`` tag with the current resource as ``data-src`` and
the value of the attribute as ``next``.
.. _link-text-field:
``link-text-[field]``
~~~~~~~~~~~~~~~~~~~~~
*Works only with solid-display-link(-mailto/tel/blank) and solid-action*
*Available from version 0.18*
Modify the displayed value as link in :
- ``<a>`` for solid-display-link,
- ``<solid-link>`` in solid-action.
.. _src-field:
``src-[field]``
~~~~~~~~~~~~~~~
Defines the ``data-src`` in the solid-link created by the ``action-[field]`` attribute.
.. _label-field-wm:
``label-[field]``
~~~~~~~~~~~~~~~~~
Set the label for the ``[field]``.
.. _placeholder-field:
``placeholder-[field]``
~~~~~~~~~~~~~~~~~~~~~~~
Set the placeholder for the ``[field]``.
.. _class-field:
``class-[field]``
~~~~~~~~~~~~~~~~~
Set the class applied to the widget of the ``[field]`` or the set.
.. _editable-field-wm:
``editable-[field]``
~~~~~~~~~~~~~~~~~~~~
*Works only with display widgets*
......@@ -130,12 +158,43 @@ Attributes
editable-name
></solid-display>
.. _alt-field:
``alt-[field]``
~~~~~~~~~~~~~~~
*Works only with solid-display-img*
Set the alt for the field ``[field]``.
.. _empty-set:
``empty-[set]``
~~~~~~~~~~~~~~~
*Available from version 0.17*
Name of the widget to display when all the fields in ``[set]`` are empty.
.. _empty-set-value:
``empty-[set]-value``
~~~~~~~~~~~~~~~~~~~~~
*Available from version 0.17*
Value to pass to the empty widget if all fields in ``[set]`` are empty. It is accessible in ``${value}``
.. code:: html
<solid-display
data-src="http://server/users/"
fields="fullname(first_name, last_name)"
empty-fullname="no-name-widget"
empty-fullname-value="add-name"
></solid-display>
<solid-widget name="no-name-widget">
<template>
<small>No fullname filled in. <solid-link next="${value}">click here to add one</solid-link></small>
</template>
</solid-widget>
.. _multiple-field:
``multiple-[field]``
~~~~~~~~~~~~~~~~~~~~
Allows to display the container ``[field]`` nested in the current resource.
......@@ -150,8 +209,7 @@ Attributes
It can be used in :
- ``solid-display``: a nested ``solid-display`` will be created with the container URI as
data-src.
- ``solid-display``: a nested ``solid-display`` will be created with the container URI as data-src.
All attributes of the form ``multiple-[field]-[attribute]`` are transfered
on the nested ``solid-display`` as ``[attribute]``.
For example, to choose the fields you want to display, you can set:
......@@ -169,14 +227,14 @@ Attributes
- ``solid-form`` : all the resources of the container are displayed in a text widget.
Buttons are automatically created to add and remove elements.
For ``solid-form`` only:
For ``solid-form`` only :
- ``multiple-[field]-add-label`` : Text of the “+” button used to add an element
``multiple-[field]-add-label``
++++++++++++++++++++++++++++++
- ``multiple-[field]-remove-label`` : Text of the “x” button used to remove an element
Text of the “+” button used to add an element
*Available from version 0.18*
``multiple-[field]-remove-label``
+++++++++++++++++++++++++++++++++
- ``multiple-[field]-add-class`` : Class of the “+” button used to add an element
Text of the “x” button used to remove an element
- ``multiple-[field]-remove-class`` : Class of the “x” button used to remove an element
\ No newline at end of file
Add a component to a website
***************************
****************************
Use Startin'blox according to your needs.
Startin'blox was designed to be modular. You need to add a calendar or a map to your website?
......@@ -21,6 +21,7 @@ In the documentation of the component you’ve chosen, you’ll find the
script to import.
.. code:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
<!-- ... Import your component ... -->
......
.. _widgets-examples:
Examples
=========
Common widgets
--------------
Here is a few examples of widgets use. First, there is the HTML using Startin'blox and then, the displayed result in a webpage.
All the values from ``<solid-display>`` are displayed with and without widget.
solid-display-img
~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/user-1.jsonld"
fields="notimage, image"
value-notimage="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
value-image="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
widget-image="solid-display-img"
alt-image="pink flowers"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-img.png
:alt: Widget solid-display-img
solid-display-link
~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/user-1.jsonld"
fields="notlink, link"
value-notlink="https://startinblox.com/fr/"
value-link="https://startinblox.com/fr/"
widget-link="solid-display-link"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-link.png
:alt: Widget solid-display-link
solid-display-link-mailto
~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/user-5.jsonld"
fields="email"
></solid-display>
<solid-display
data-src="data/list/user-5.jsonld"
fields="email"
widget-email="solid-display-link-mailto"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-mailto.png
:alt: Widget solid-display-link-mailto
solid-display-value-date
~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/event-1.jsonld"
fields="date"
></solid-display>
<solid-display
data-src="data/list/event-1.jsonld"
fields="date"
widget-date="solid-display-value-date"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-date.png
:alt: Widget solid-display-value-date
solid-form-radio
~~~~~~~~~~~~~~~~
range attribute
.. code:: html
<solid-form
data-src="data/list/event-1.jsonld"
fields="contact"
widget-contact="solid-form-radio"
range-contact="data/list/users.jsonld"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-radio.png
:alt: Widget solid-form-radio
solid-form-dropdown
~~~~~~~~~~~~~~~~~~~
enum attribute
.. code:: html
<solid-form
data-src="data/list/event-1.jsonld"
fields="personnes"
widget-personnes="solid-form-dropdown"
enum-personnes="Sacha, Camille, Charlie, Lou"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-dropdown.png
:alt: Widget solid-form-dropdown
solid-form-textarea-label
~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-form
data-src="data/list/event-1.jsonld"
fields="description"
widget-description="solid-form-textarea-label"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-textarea.png
:alt: Widget solid-form-textarea-label
solid-form-text-placeholder
~~~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-form
data-src="./data/list/users.jsonld"
fields="first_name"
widget-first_name="solid-form-text-placeholder"
placeholder-first_name="Enter your name"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-placeholder.png
:alt: Widget solid-form-text-placehoder
solid-form-text-label
~~~~~~~~~~~~~~~~~~~~~
.. code:: html
<solid-form
data-src="./data/list/users.jsonld"
fields="first_name"
widget-first_name="solid-form-text-label"
label-first_name="First name :"
></solid-form>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-label.png
:alt: Widget solid-form-text-label
solid-set-div
~~~~~~~~~~~~~
.. code:: html
<solid-display
data-src="data/list/users.jsonld"
fields="name(first_name, ' - ' ,last_name, ' - ', username)"
widget-name="solid-set-div"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-set.png
:alt: Widget solid-set-div
*The border is applied on solid-set-div*
solid-action
~~~~~~~~~~~~
A classic example of solid-action use is a list of resources (users here) with only one field displayed and the possibility to access additionnal informations by clicking on "User details" :
.. code:: html
<solid-display
data-src="data/list/users.jsonld"
fields="name, details"
value-details="User details"
label-name="Name :"
widget-name="solid-display-value-label"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action.png
:alt: Basic solid-display
This is the solid-display with action attribute and link-text-[field] attribute use to replace the basic value-[field] from above.
.. code:: html
<solid-display
data-src="data/list/users.jsonld"
fields="name, details"
label-name="Name :"
widget-name="solid-display-value-label"
action-details="user-details"
link-text-details="User details"
></solid-display>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action2.png
:alt: Widget solid-action
By adding a router, a route and another view, clicking on the solid-action displays the view (dotted border):
.. code:: html
<solid-router use-hash>
<solid-route
hidden
use-id
name="user-details"
></solid-route>
</solid-router>
<solid-display
data-src="data/list/users.jsonld"
fields="name, details"
label-name="Name :"
widget-name="solid-display-value-label"
action-details="user-details"
link-text-details="User details"
></solid-display>
<div data-view="user-details" hidden>
<solid-display
bind-resources
fields="first_name, last_name, username, email"
></solid-display>
</div>
.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action3.png
:alt: Widget solid-action with view
Step-by-step widget creation
----------------------------
Create your widget
~~~~~~~~~~~~~~~~~~
......
.. _reference:
Widgets API Reference
======================
=====================
Widgets are tools that allow to choose, precise how to display data.
Widgets are created at the moment you ask for it for the first time.
They 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:
......@@ -9,22 +13,31 @@ Here is a schema of how it works:
.. figure:: ../../_static/images/import_documentation/Widgets-API-Developers.png
:alt: Widget API 1
A widget is built like this.
``solid-[type]-[template]-[features]``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*All the keywords must be separated by ``-`` but can be put in any order.*
Its name must begin by "**solid-**", followed by at least a ``type`` (except for ``default`` type) and a ``template``, and eventually one or several ``features``.
*All the keywords must be separated by an hyphen``-``, it is recommended to keep that order (to harmonise widget names writing).*
``type``
++++++++
Can be ``display`` , ``form`` or ``set``. Will select the directory of template to use.
It refers to the "kind" of data to display :
- ``display`` refers to a display formatting,
- ``form`` to display a form element (``<input>``, ``<textarea>``, ``<select>``, etc),
- ``set`` to precise how to display values of fields in :ref:`sets <widget-mixin>`.
It will select the directory of template to use.
``template``
++++++++++++
Name of the template to use.
Each type has several templates. They specify how to use or display the value(s) and/or to indicate the HTML tag to use.
Name of the template to use. Available templates:
Available templates :
- ``display`` directory
......@@ -40,13 +53,15 @@ Name of the template to use. Available templates:
- ``textarea``: set ``value`` in a ``<textarea>``.
- ``richtext``: set ``value`` in an ``<div>`` and initialize a light rich text editor by using ``Quill``.
- ``checkbox``: create a checkbox, which is checked if ``value == true``.
- ``email``: set ``value`` in an ``<input>`` of type ``email``.
- ``date``: set ``value`` in an ``<input>`` of type ``date``.
- ``rangedate``: set 2 values in 2 ``<input>`` of type ``date``. Used for filtering with min and max.
Possible to add ``start-value-[field]`` and ``end-value-[field]`` attributes to set min and max values. Date format to follow : "YYYY-MM-DD". Each attribute accepts ``today`` as value.
- ``number``: set ``value`` in an ``<input>`` of type ``number``.
- ``rangenumber``: set 2 values in 2 ``<input>`` of type ``number``. Used for filtering with min and max.
Possible to add ``start-value-[field]`` and ``end-value-[field]`` attributes to set min and max values.
- ``hidden``: set ``value`` in an ``<input>`` of type ``hidden``.
- ``hidden``: set ``value`` in an ``<input>`` of type ``hidden``. If you need to use a boolean or numeric value you can add a ``bool`` or
``num`` mixin (ie: ``solid-form-hidden-bool``).
- ``dropdown``: set ``value`` in a ``<select>``. The list is provided via the ``range`` attribute, which expects a container’s URL, or via the ``enum`` attribute, which takes a list of the values separated by commas.
- ``radio``: set ``value`` in a list of radio buttons. The list is provided via the ``range`` attribute, which expects a container’s URL, or via the ``enum`` attribute, which takes a list of the values separated by commas.
- ``multiple``: Accept a container URI as a ``value``, and inserts one widget per resource with a “remove” button for each widget, and an “add” button.
......@@ -66,21 +81,21 @@ Name of the template to use. Available templates:
- ``div``: inserts widgets in a ``<div>`` tag.
- ``ul``: inserts widgets in a ``<ul>`` tag.
- **default** (no template keyword defined)
- **default** (no type keyword defined)
- ``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.
``value`` for the ``next`` attribute and ``link-text`` as text content.
- ``multiple``: insert a ``solid-display`` with the ``@id`` of a container as ``data-src``.
The fields to display are chosen with the ``multiple-[field name]-fields`` attribute.
``features``
++++++++++++
Features to add to the widget. You can choose as many as you want
They allows to modify the behavior or the display of the widget. It is possible to add one or several features to the widget's name :
- ``label``: adds a ``label`` before the template. Uses the attribute ``name`` if ``label`` is not defined.
- ``labellast``: adds a ``label`` after the template. Uses the attribute ``name`` if ``label`` is not defined.
- ``autocompletion``: initializes the ``SlimSelect`` plugin. Works only with dropdowns.
- ``autocompletion``: initializes the ``SlimSelect`` plugin. Works only with ``dropdown`` and ``multipleselect`` templates.
- ``autolink``: analyzes widget content, and transforms all links in anchor.
- ``mailto``: adds ``mailto:`` at the beginning of an ``href`` attribute. Works only with links.
- ``tel``: adds ``tel:`` at the beginning of an ``href`` attribute. Works only with links.
......
.. _about-our-components:
About our components
######################
####################
**When you should create a component**
......
......@@ -8,7 +8,8 @@ With the core of the framework and some offical components, we'll be able to bui
To start, simply import the core in your HTML file:
.. code:: html
.. code-block:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
</head>
......@@ -21,7 +22,8 @@ You can now freely use all the component included in the core.
For the example we are going to build a directory.
.. code:: html
.. code-block:: html
<!-- ... Add a form ... -->
<sib-form
data-src="https://api.startinblox.com/users/"
......@@ -49,7 +51,8 @@ The form and the display are connected to the same data sources. When you add pe
Let's assume we want to add a menu to our app. We're gonna add the router component ``sib-router``
.. code:: html
.. code-block:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
<!-- ... Import SiB Router ... -->
......
Convention about commit messages for Startin’blox
=================================================
Commit messages are used to automatically define the version bump of the
next release. Therefore they must reflect the nature of the modification
and the stability of the code.
The commit message should have this pattern: ``type: message``
With the possible commit types:
=========== ========= ================= ========= ============
Commit Type Title Description Release In changelog
=========== ========= ================= ========= ============
``minor`` Minor Minor release ``minor`` ``yes``
``major`` Major Major release ``major`` ``yes``
``feature`` Features New behavior ``patch`` ``yes``
``update`` Updates Change behavior ``patch`` ``yes``
``bugfix`` Bug Fixes Fix bugs ``patch`` ``yes``
``ui`` Interface Change appearance ``patch`` ``yes``
``syntax`` Syntax Refactoring code ``patch`` ``yes``
\ Other All others ``patch`` ``no``
=========== ========= ================= ========= ============
`See
reference <https://git.happy-dev.fr/startinblox/management#commit-messages>`__
Deploy a SIB application on alwaysdata
======================================
- Public: Startinblox dev and devops
- Requires: ``tech@startinblox.com`` permissions
Create account
--------------
1. Create the ``<app>`` account on the chosen server
2. Configure SSH access to the server
Configure a SIB server
----------------------
Installation
~~~~~~~~~~~~
1. From webadmin create a new ``<app>_db`` postgres database
2. Setup python default version to ``v3.6``
3. Configure a ``Python`` website:
- address: ``api.<app>.startinblox.com``
- type: ``Python WSGI``
- path: ``/sibserver/server/wsgi.py``
- workdir: ``/sibserver``
- python version: ``3.6.x``
- statics: ``/static/=/static/``
4. Connect through SSH to `Install a SIB
server <./install_sib_server>`__ with a **production** configuration
::
site_url: https://api.<app>.startinblox.com
allowed_hosts:
- api.<app>.startinblox.com
db_host: postgresql-<app>.alwaysdata.net
db_name: <app>_db
db_user: <app>
db_pass: <db pass>
smtp_host: smtp-<app>.alwaysdata.net
smtp_user: <app>@alwaysdata.net
smtp_pass: <email pass>
admin_email: admin@example.org
admin_name: admin
admin_pass: admin
xmpp_url: 'https://jabber.happy-dev.fr'
jabber_host: 'happy-dev.fr'
Note: Don’t forget to restart app after changing configuration.
Test the setup
~~~~~~~~~~~~~~
SMTP:
::
$ python sibserver/manage.py sendtestemail plup@plup.io
Configure the front application
-------------------------------
1. `Build your application <./build_sib_application>`__ with your
``https://api.<app>.startinblox.com`` URL
2. Transfer the ``dist`` folder content to a ``front`` folder on the
server
3. Configure a ``Static`` website:
- name: Front
- addresses: ``<app>.startinblox.com``
- type: Static files
- root folder: ``/front/``