diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst
index 9d4be3fbe8f39b3943f631da203824f7b5325a84..f62b6b8a454d0499493dd2c362c43b8e5241e265 100644
--- a/source/import_documentation/Developping-with-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-with-SibTemplateElement.rst
@@ -8,23 +8,46 @@ It is a class that can extend your component in order to relieve you of some com
.. warning::
To start this tutorial, you should have followed `this first part <https://docs.startinblox.com/import_documentation/How-to-make-components.html>`__ .
-For the example, we are gonna make a FAQ component like this:
+What are we going to do ?
+-------------------------
+For the example, we are gonna make a simple FAQ component.
+It just display questions and answers in an accordion. If somebody doesn't find its question, we want him to send an email to a moderation we decide.
+
+Something like this :
.. image:: ./../../_static/images/import_documentation/faq.gif
:alt: A FAQ component as example
- .. note::
- Remember to rename your folder and file with Solid-FAQ !
-1. Create a component that extends SolidTemplateElement
------------------------------------------------------
+Let's suppose we want to make the moderator's title and email customizable.
+To get this render, we will just have to implement the component to our html page with like this :
+
+.. code:: html
+
+ <solid-faq
+ data-src="./datas-faq.jsonLD"
+ fields="question, answer"
+ moderator-email="alice@startinblox.com"
+ title="Super faq"
+ ></solid-faq>
+
+.. note::
+ To learn more about web components, we recommend this `introduction <https://www.webcomponents.org/introduction>`__.
+
+**Let's start :)**
+1. Set the base of you component in a solid-faq.js file
+-----------------------------------------------------
+ .. note::
+ Remember to rename your folder with Solid-FAQ !
+Create a component that extends SolidTemplateElement.
Here is the minimum code your component must contain that extends ``SolidTemplateElement``.
.. code:: js
+ // solid-faq.js
// First import SolidTemplateElement
import SolidTemplateElement from 'https://unpkg.com/@startinblox/core@0.10/dist/solid-template-element.js';
@@ -55,10 +78,7 @@ Here is the minimum code your component must contain that extends ``SolidTemplat
2. Define the attributes you want for your component
---------------------------------------------------
-**What custom settings do you want for your component?**
-Let's assume we want to customize the title and the email of the moderator.
-
-It's in your ``static get propsDefinition()`` method that it takes place.
+You are going to set these attribute in your ``static get propsDefinition()`` method.
.. code:: js
@@ -71,10 +91,12 @@ It's in your ``static get propsDefinition()`` method that it takes place.
}
.. note::
- All the SiB components have the attribute ``data-src``, which receives the data sources for the component.
+ Note the syntaxe convention => moderatorEmail: 'moderator-email'
3. Create your template
-----------------------
+To display the questions and answers, we are going to use `Solid-display <https://docs.startinblox.com/import_documentation/Components/SiB-Display.html>`__.
+If a moderator's email is filled in then we display the possibility to send him an email.
Pass your attributes to your template and write it.
@@ -91,7 +113,7 @@ Pass your attributes to your template and write it.
fields="question, answer"
class-question="accordion"
class-answer="panel"
- id="test"
+ id="faq"
></solid-display>
`;
if(moderatorEmail) {
@@ -115,8 +137,11 @@ Add the JS you need to make your accordion work, like this:
.. code:: js
// /js/main.js
- var component = document.getElementById("test");
+ //We select the component
+ var component = document.getElementById("faq");
+ //When the component is generated, we set the event
component.addEventListener("populate", (event) => {
+ //Manage the accordion
var acc = document.getElementsByClassName("accordion");
var i;
@@ -135,6 +160,10 @@ Add the JS you need to make your accordion work, like this:
}
})
+.. note::
+ **Did you notice the populate event?** It's an event that allows you to trigger javascript only after the component you want to manipulate has been generated.
+ See `the Event documentation <https://docs.startinblox.com/import_documentation/Events.html>`__ for more explanation.
+
Here is the CSS used for the demo:
.. code:: css
@@ -178,6 +207,7 @@ Here is the CSS used for the demo:
color: white;
}
+**Use Helper functions**
SiB framework provide you `Helpers function <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
Add at the begin of your ``solid-faq.js``, import your JS and CSS with those functions:
diff --git a/source/import_documentation/get-started.rst b/source/import_documentation/get-started.rst
index 69630df1c13bf453b76057988ccaa03b8f79570c..3ab3b1c8ee32d9a5dc48044159872cc7cc90197c 100644
--- a/source/import_documentation/get-started.rst
+++ b/source/import_documentation/get-started.rst
@@ -7,13 +7,9 @@ Interoperability
It means that any front can use any data sources from any back because it communicates with each other with a universal API.
-.. figure:: ../_static/images/import_documentation/Centralized-Vs-Decentralized.png
+.. figure:: ./../_static/images/import_documentation/Centralized-Vs-Decentralized.png
:alt: What is interoperability ?
-
-.. image:: ./../../_static/images/import_documentation/Centralized-Vs-Decentralized.png
- :alt: test
-
So you can learn how to use the back and the front independently.
.. note::
diff --git a/source/index.rst b/source/index.rst
index 6ac8ae63ecf65c045f8d4b8aaa2eca1db5bab537..3a24dc82e929d65c824a38be84d5f1e30fbbdd71 100644
--- a/source/index.rst
+++ b/source/index.rst
@@ -64,11 +64,12 @@ Welcome to Startinblox's documentation!
import_documentation/Widgets/Reference
import_documentation/Widgets/Examples
-
+Å“
.. toctree::
- :maxdepth: 2
+ :maxdepth: 2
:caption: Javascript Api:
+ import_documentation/Events
import_documentation/Helpers-functions
import_documentation/Store-doc