FAF: Documentation UI Twig Blocks

2026-04-23 10:38:45 +02:00 · 2021-05-30 11:45:13 +02:00
parent 862e49ba4e
commit 96bf56b51c
37 changed files with 355 additions and 135 deletions
--- a/.doc/UI/bin/generate_uiblock.php
+++ b/.doc/UI/bin/generate_uiblock.php
@@ -116,8 +116,8 @@ EOF;
 	echo ":Tag: **$sTag**\n";
 	echo "\n";
 	echo ":Syntax:\n";
-	echo " \n";
-	echo "::\n";
+	echo "\n";
+	echo ".. code-block:: twig\n";
 	echo "\n";
 	echo "$sSyntax\n";
 	echo "\n";
@@ -159,7 +159,7 @@ EOF;
 			echo "\n";
 			echo ":syntax:\n";
 			echo "\n";
-			echo "::\n";
+			echo ".. code-block:: twig\n";
 			echo "\n";
 			$sParameters = DisplayParamsAsString($aParams);
 			if ($bHasSubBlocks) {
--- a/.doc/UI/source/TwigBase/TwigBase.rst
+++ b/.doc/UI/source/TwigBase/TwigBase.rst
@@ -0,0 +1,6 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+
+Twig Base Presentation
+======================
+
--- a/.doc/UI/source/TwigBaseReference/TwigBaseReference.rst
+++ b/.doc/UI/source/TwigBaseReference/TwigBaseReference.rst
@@ -0,0 +1,5 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+
+Twig Base Reference
+===================
--- a/.doc/UI/source/TwigBaseTuto/Step1/Step1.rst
+++ b/.doc/UI/source/TwigBaseTuto/Step1/Step1.rst
@@ -0,0 +1,70 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+
+.. _Step1:
+
+1. Creating the structure
+=========================
+
+Create a module using the `helper to create a new extension <https://www.itophub.io/wiki/page?id=latest%3Acustomization%3Adatamodel#creating_your_own_extension>`_ you'll get the following structure::
+
+    my-module
+    ├── assets
+    │   ├── css
+    │   ├── img
+    │   └── js
+    ├── doc
+    ├── src
+    │   ├── Controller
+    │   ├── Helper
+    │   ├── Hook
+    │   ├── Model
+    │   └── Service
+    └── vendor
+
+``src/Controller``
+
+    Contains all the PHP to control the display of the different pages of the module.
+
+``src/Service``
+
+    Contains the PHP used to generate the data to be displayed.
+
+Create a folder ``templates`` for the *Twig* templates used for the presentation::
+
+    my-module
+    ├── assets
+    │   ├── css
+    │   ├── img
+    │   └── js
+    ├── doc
+    ├── src
+    │   ├── Controller
+    │   ├── Helper
+    │   ├── Hook
+    │   ├── Model
+    │   └── Service
+    ├── templates
+    └── vendor
+
+
+If your module is for iTop version 3.0 and above, you can put all the dictionaries into a dedicated folder ``dictionaries``::
+
+    my-module
+    ├── assets
+    │   ├── css
+    │   ├── img
+    │   └── js
+    ├── dictionaries
+    ├── doc
+    ├── src
+    │   ├── Controller
+    │   ├── Helper
+    │   ├── Hook
+    │   ├── Model
+    │   └── Service
+    ├── templates
+    └── vendor
+
+
+
--- a/.doc/UI/source/TwigBaseTuto/Step2/Setup.png
+++ b/.doc/UI/source/TwigBaseTuto/Step2/Setup.png
--- a/.doc/UI/source/TwigBaseTuto/Step2/Step2.png
+++ b/.doc/UI/source/TwigBaseTuto/Step2/Step2.png
--- a/.doc/UI/source/TwigBaseTuto/Step2/Step2.rst
+++ b/.doc/UI/source/TwigBaseTuto/Step2/Step2.rst
@@ -0,0 +1,95 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+
+.. _Step2:
+
+2. Hello World!
+===============
+
+The controller
+--------------
+
+Create a controller into ``my-module/src/Controller``, let's call it ``MyModuleController`` extending  ``Combodo\iTop\Application\TwigBase\Controller\Controller``
+
+.. code-block:: php
+    :linenos:
+
+    <?php
+
+    namespace MyCompany\iTop\MyModule\Controller;
+    use Combodo\iTop\Application\TwigBase\Controller\Controller;
+
+    class MyModuleController extends Controller
+    {
+    }
+
+Let's add a *Hello World* operation
+
+.. code-block:: php
+    :linenos:
+
+    <?php
+
+    class MyModuleController extends Controller
+    {
+        public function OperationHelloWorld()
+        {
+            $this->DisplayPage();
+        }
+    }
+
+This will just display the Twig template corresponding to this operation.
+Here the operation is **HelloWorld** without space.
+The name of the method is built from the operation name by adding *Operation* at the beginning: ``OperationHelloWorld``.
+
+Calling the method ``DisplayPage()`` will render the template named after the operation: ``HelloWorld.html.twig`` it will be located in the folder ``my-module/templates``.
+
+The template
+------------
+
+Let's create the template ``my-module/templates/HelloWorld.html.twig`` with a nice title.
+
+.. code-block:: twig
+    :linenos:
+
+    {% UITitle ForPage {sTitle:'Hello World!'} %}{% EndUITitle %}
+
+Twig syntax can be found `Here <https://twig.symfony.com/doc/3.x/>`_.
+
+For more information on specific iTop Twig tags you can check :ref:`Components` and :ref:`Layouts`
+
+The end point
+-------------
+
+Then create landing page for your module ``my-module/index.php``
+
+.. code-block:: php
+    :linenos:
+
+    <?php
+
+    namespace MyCompany\iTop\SystemInformation;
+
+    use MyCompany\iTop\MyModule\Controller\MyModuleController;
+
+    require_once(APPROOT.'application/startup.inc.php');
+
+    $oUpdateController = new MyModuleController(MODULESROOT.'my-module/templates', 'my-module');
+    $oUpdateController->SetDefaultOperation('HelloWorld');
+    $oUpdateController->HandleOperation();
+
+Create an instance of the controller indicating the templates path and the module name.
+The default operation is set to the operation we want when entering the module.
+The method ``HandleOperation()`` will call the method corresponding to the specified operation.
+
+Now you have to build the autoloader by running ``composer dump-autoload`` into the module folder ``my-module``.
+
+The next operation is the `setup <https://www.itophub.io/wiki/page?id=latest%3Ainstall%3Ainstall_wizard>`_. You will be able to select your module.
+
+.. image:: Setup.png
+
+For more comfort during the development of your module, you can `install the toolkit <https://www.itophub.io/wiki/page?id=latest%3Acustomization%3Adatamodel#installing_the_toolkit>`_ and update your iTop with symlinks.
+
+if you go to your module page ``https://localhost/itop/pages/exec.php?exec_module=my-module&exec_page=index.php`` you should see:
+
+.. image:: Step2.png
--- a/.doc/UI/source/TwigBaseTuto/Step3/Step3.rst
+++ b/.doc/UI/source/TwigBaseTuto/Step3/Step3.rst
@@ -0,0 +1,9 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+
+3. Passing variables to templates
+=================================
+
+We have seen in :ref:`Step2` how to create a static template. Let's send some variables to have a more dynamic display.
+
+
--- a/.doc/UI/source/TwigBaseTuto/TwigBaseTuto.rst
+++ b/.doc/UI/source/TwigBaseTuto/TwigBaseTuto.rst
@@ -0,0 +1,13 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+
+Twig Base Tutorial
+==================
+
+.. toctree::
+    :maxdepth: 1
+    :caption: Tutorial:
+
+    Step1/Step1
+    Step2/Step2
+    Step3/Step3
--- a/.doc/UI/source/generated/Component/Alert/Alert.rst
+++ b/.doc/UI/source/generated/Component/Alert/Alert.rst
@@ -21,8 +21,8 @@ Twig Tag
 :Tag: **UIAlert**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIAlert Type {Parameters} %}
        Content Goes Here
@@ -55,7 +55,7 @@ Alert Neutral

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert Neutral {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
@@ -78,7 +78,7 @@ Alert ForInformation

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert ForInformation {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
@@ -101,7 +101,7 @@ Alert ForSuccess

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert ForSuccess {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
@@ -124,7 +124,7 @@ Alert ForWarning

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert ForWarning {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
@@ -147,7 +147,7 @@ Alert ForDanger

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert ForDanger {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
@@ -170,7 +170,7 @@ Alert ForFailure

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert ForFailure {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
@@ -193,7 +193,7 @@ Alert WithBrandingPrimaryColor

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert WithBrandingPrimaryColor {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
@@ -216,7 +216,7 @@ Alert WithBrandingSecondaryColor

 :syntax:

-::
+.. code-block:: twig

    {% UIAlert WithBrandingSecondaryColor {sTitle:'value', sContent:'value', sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Button/Button.rst
+++ b/.doc/UI/source/generated/Component/Button/Button.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIButton**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIButton Type {Parameters} %}

@@ -66,7 +66,7 @@ Button Neutral

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type Neutral {sLabel:'value', sName:'value', sId:'value'} %}

@@ -87,7 +87,7 @@ Button ForPrimaryAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForPrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -112,7 +112,7 @@ Button ForSecondaryAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -137,7 +137,7 @@ Button ForPositiveAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForPositiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -162,7 +162,7 @@ Button ForDestructiveAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -187,7 +187,7 @@ Button AlternativeNeutral

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type AlternativeNeutral {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -212,7 +212,7 @@ Button ForAlternativePrimaryAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForAlternativePrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -237,7 +237,7 @@ Button ForAlternativeSecondaryAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForAlternativeSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -262,7 +262,7 @@ Button ForAlternativeValidationAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForAlternativeValidationAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -287,7 +287,7 @@ Button ForAlternativeDestructiveAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForAlternativeDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -312,7 +312,7 @@ Button ForCancel

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type ForCancel {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -337,7 +337,7 @@ Button IconAction

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type IconAction {sIconClasses:'value', sTooltipText:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}

@@ -364,7 +364,7 @@ Button LinkNeutral

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type LinkNeutral {sURL:'value', sLabel:'value', sIconClasses:'value', sTarget:'value', sId:'value'} %}

@@ -389,7 +389,7 @@ Button IconLink

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type IconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sTarget:'value', sId:'value'} %}

@@ -414,7 +414,7 @@ Button DestructiveIconLink

 :syntax:

-::
+.. code-block:: twig

    {% UIButton Type DestructiveIconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sName:'value', sTarget:'value', sId:'value'} %}

--- a/.doc/UI/source/generated/Component/ButtonGroup/ButtonGroup.rst
+++ b/.doc/UI/source/generated/Component/ButtonGroup/ButtonGroup.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIButtonGroup**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIButtonGroup Type {Parameters} %}

@@ -38,7 +38,7 @@ ButtonGroup ButtonWithOptionsMenu

 :syntax:

-::
+.. code-block:: twig

    {% UIButtonGroup Type ButtonWithOptionsMenu {oButton:value, oMenu:value} %}

--- a/.doc/UI/source/generated/Component/CollapsibleSection/CollapsibleSection.rst
+++ b/.doc/UI/source/generated/Component/CollapsibleSection/CollapsibleSection.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UICollapsibleSection**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UICollapsibleSection Type {Parameters} %}
        Content Goes Here
@@ -40,7 +40,7 @@ CollapsibleSection Standard

 :syntax:

-::
+.. code-block:: twig

    {% UICollapsibleSection Standard {sTitle:'value', sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Component.rst
+++ b/.doc/UI/source/generated/Component/Component.rst
@@ -1,31 +1,32 @@
 .. Copyright (C) 2010-2021 Combodo SARL
 .. http://opensource.org/licenses/AGPL-3.0

-UI Component
-============
+.. _Components:
+
+UI Components
+=============

 A UI component is a unitary block used to display information in iTop console.

-
 .. toctree::
   :maxdepth: 1
   :caption: Components:

   Alert/Alert
-   Title/Title
-   FieldSet/FieldSet
-   Field/Field
   Button/Button
   ButtonGroup/ButtonGroup
   CollapsibleSection/CollapsibleSection
   DataTable/DataTable
+   Field/Field
   FieldBadge/FieldBadge
+   FieldSet/FieldSet
   Form/Form
-   Input/Input
   Input/FileSelect/FileSelect
+   Input/Input
   Input/Select/Select
   Input/Select/SelectOption
   Panel/Panel
   Spinner/Spinner
+   Title/Title
   Toolbar/Toolbar
   Toolbar/ToolbarSpacer/ToolbarSpacer
--- a/.doc/UI/source/generated/Component/DataTable/DataTable.rst
+++ b/.doc/UI/source/generated/Component/DataTable/DataTable.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIDataTable**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIDataTable Type {Parameters} %}
        Content Goes Here
@@ -50,7 +50,7 @@ DataTable ForResult

 :syntax:

-::
+.. code-block:: twig

    {% UIDataTable ForResult {oPage:value, sListId:'value', oSet:value, aExtraParams:value} %}
        Content Goes Here
@@ -75,7 +75,7 @@ DataTable ForObject

 :syntax:

-::
+.. code-block:: twig

    {% UIDataTable ForObject {oPage:value, sListId:'value', oSet:value, aExtraParams:value} %}
        Content Goes Here
@@ -100,7 +100,7 @@ DataTable ForRendering

 :syntax:

-::
+.. code-block:: twig

    {% UIDataTable ForRendering {sListId:'value', oSet:value, aExtraParams:value} %}
        Content Goes Here
@@ -123,7 +123,7 @@ DataTable ForRenderingObject

 :syntax:

-::
+.. code-block:: twig

    {% UIDataTable ForRenderingObject {sListId:'value', oSet:value, aExtraParams:value} %}
        Content Goes Here
@@ -146,7 +146,7 @@ DataTable ForStaticData

 :syntax:

-::
+.. code-block:: twig

    {% UIDataTable ForStaticData {sTitle:'value', aColumns:{name:value, name:value}, aData:{name:value, name:value}, sId:'value', aExtraParams:{name:value, name:value}, sFilter:'value', aOptions:{name:value, name:value}} %}
        Content Goes Here
@@ -177,7 +177,7 @@ DataTable ForForm

 :syntax:

-::
+.. code-block:: twig

    {% UIDataTable ForForm {sRef:'value', aColumns:{name:value, name:value}, aData:{name:value, name:value}, sFilter:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Field/Field.rst
+++ b/.doc/UI/source/generated/Component/Field/Field.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIField**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIField Type {Parameters} %}
        Content Goes Here
@@ -48,7 +48,7 @@ Field FromParams

 :syntax:

-::
+.. code-block:: twig

    {% UIField FromParams {aParams:value} %}
        Content Goes Here
@@ -67,7 +67,7 @@ Field FromObject

 :syntax:

-::
+.. code-block:: twig

    {% UIField FromObject {sLabel:'value', oInput:value, sLayout:'value'} %}
        Content Goes Here
@@ -90,7 +90,7 @@ Field Large

 :syntax:

-::
+.. code-block:: twig

    {% UIField Large {sLabel:'value', sValueHtml:'value'} %}
        Content Goes Here
@@ -111,7 +111,7 @@ Field Small

 :syntax:

-::
+.. code-block:: twig

    {% UIField Small {sLabel:'value', sValueHtml:'value'} %}
        Content Goes Here
@@ -132,7 +132,7 @@ Field Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIField Standard {sLabel:'value', sLayout:'value', sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/FieldBadge/FieldBadge.rst
+++ b/.doc/UI/source/generated/Component/FieldBadge/FieldBadge.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIFieldBadge**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIFieldBadge Type {Parameters} %}
        Content Goes Here
@@ -40,7 +40,7 @@ FieldBadge ForField

 :syntax:

-::
+.. code-block:: twig

    {% UIFieldBadge ForField {sValue:'value', oStyle:value} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/FieldSet/FieldSet.rst
+++ b/.doc/UI/source/generated/Component/FieldSet/FieldSet.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIFieldSet**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIFieldSet Type {Parameters} %}
        Content Goes Here
@@ -40,7 +40,7 @@ FieldSet Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIFieldSet Standard {sLegend:'value', sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Form/Form.rst
+++ b/.doc/UI/source/generated/Component/Form/Form.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIForm**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIForm Type {Parameters} %}
        Content Goes Here
@@ -40,7 +40,7 @@ Form Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIForm Standard {sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Input/FileSelect/FileSelect.rst
+++ b/.doc/UI/source/generated/Component/Input/FileSelect/FileSelect.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIFileSelect**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIFileSelect Type {Parameters} %}

@@ -38,7 +38,7 @@ FileSelect Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIFileSelect Type Standard {sName:'value', sId:'value'} %}

--- a/.doc/UI/source/generated/Component/Input/Input.rst
+++ b/.doc/UI/source/generated/Component/Input/Input.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIInput**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIInput Type {Parameters} %}

@@ -42,7 +42,7 @@ Input ForHidden

 :syntax:

-::
+.. code-block:: twig

    {% UIInput Type ForHidden {sName:'value', sValue:'value', sId:'value'} %}

@@ -63,7 +63,7 @@ Input Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIInput Type Standard {sType:'value', sName:'value', sValue:'value', sId:'value'} %}

@@ -86,7 +86,7 @@ Input ForInputWithLabel

 :syntax:

-::
+.. code-block:: twig

    {% UIInput Type ForInputWithLabel {sLabel:'value', sInputName:'value', sInputValue:'value', sInputId:'value', sInputType:'value'} %}

--- a/.doc/UI/source/generated/Component/Input/Select/Select.rst
+++ b/.doc/UI/source/generated/Component/Input/Select/Select.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UISelect**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UISelect Type {Parameters} %}
        Content Goes Here
@@ -42,7 +42,7 @@ Select ForSelect

 :syntax:

-::
+.. code-block:: twig

    {% UISelect ForSelect {sName:'value', sId:'value'} %}
        Content Goes Here
@@ -63,7 +63,7 @@ Select ForSelectWithLabel

 :syntax:

-::
+.. code-block:: twig

    {% UISelect ForSelectWithLabel {sName:'value', sLabel:'value', sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Input/Select/SelectOption.rst
+++ b/.doc/UI/source/generated/Component/Input/Select/SelectOption.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UISelectOption**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UISelectOption Type {Parameters} %}

@@ -38,7 +38,7 @@ SelectOption ForSelectOption

 :syntax:

-::
+.. code-block:: twig

    {% UISelectOption Type ForSelectOption {sValue:'value', sLabel:'value', bSelected:true, sId:'value'} %}

--- a/.doc/UI/source/generated/Component/Panel/Panel.rst
+++ b/.doc/UI/source/generated/Component/Panel/Panel.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIPanel**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIPanel Type {Parameters} %}
        Content Goes Here
@@ -56,7 +56,7 @@ Panel Neutral

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel Neutral {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -77,7 +77,7 @@ Panel ForInformation

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel ForInformation {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -98,7 +98,7 @@ Panel ForSuccess

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel ForSuccess {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -119,7 +119,7 @@ Panel ForWarning

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel ForWarning {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -140,7 +140,7 @@ Panel ForDanger

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel ForDanger {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -161,7 +161,7 @@ Panel ForFailure

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel ForFailure {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -182,7 +182,7 @@ Panel WithBrandingPrimaryColor

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel WithBrandingPrimaryColor {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -203,7 +203,7 @@ Panel WithBrandingSecondaryColor

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel WithBrandingSecondaryColor {sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
@@ -224,7 +224,7 @@ Panel ForClass

 :syntax:

-::
+.. code-block:: twig

    {% UIPanel ForClass {sClass:'value', sTitle:'value', sSubTitle:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Spinner/Spinner.rst
+++ b/.doc/UI/source/generated/Component/Spinner/Spinner.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UISpinner**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UISpinner Type {Parameters} %}

@@ -38,7 +38,7 @@ Spinner Standard

 :syntax:

-::
+.. code-block:: twig

    {% UISpinner Type Standard {sId:'value'} %}

--- a/.doc/UI/source/generated/Component/Title/Title.rst
+++ b/.doc/UI/source/generated/Component/Title/Title.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UITitle**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UITitle Type {Parameters} %}
        Content Goes Here
@@ -46,7 +46,7 @@ Title ForPage

 :syntax:

-::
+.. code-block:: twig

    {% UITitle ForPage {sTitle:'value', sId:'value'} %}
        Content Goes Here
@@ -67,7 +67,7 @@ Title ForPageWithIcon

 :syntax:

-::
+.. code-block:: twig

    {% UITitle ForPageWithIcon {sTitle:'value', sIconUrl:'value', sIconCoverMethod:'value', bIsMedallion:true, sId:'value'} %}
        Content Goes Here
@@ -94,7 +94,7 @@ Title Neutral

 :syntax:

-::
+.. code-block:: twig

    {% UITitle Neutral {sTitle:'value', iLevel:value, sId:'value'} %}
        Content Goes Here
@@ -117,7 +117,7 @@ Title Standard

 :syntax:

-::
+.. code-block:: twig

    {% UITitle Standard {oTitle:value, iLevel:value, sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Toolbar/Toolbar.rst
+++ b/.doc/UI/source/generated/Component/Toolbar/Toolbar.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIToolbar**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIToolbar Type {Parameters} %}
        Content Goes Here
@@ -44,7 +44,7 @@ Toolbar ForAction

 :syntax:

-::
+.. code-block:: twig

    {% UIToolbar ForAction {sId:'value'} %}
        Content Goes Here
@@ -63,7 +63,7 @@ Toolbar Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIToolbar Standard {sId:'value', aContainerClasses:{name:value, name:value}} %}
        Content Goes Here
@@ -84,7 +84,7 @@ Toolbar ForButton

 :syntax:

-::
+.. code-block:: twig

    {% UIToolbar ForButton {sId:'value', aContainerClasses:{name:value, name:value}} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Component/Toolbar/ToolbarSpacer/ToolbarSpacer.rst
+++ b/.doc/UI/source/generated/Component/Toolbar/ToolbarSpacer/ToolbarSpacer.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIToolbarSpacer**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIToolbarSpacer Type {Parameters} %}

@@ -38,7 +38,7 @@ ToolbarSpacer Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIToolbarSpacer Type Standard {sId:'value'} %}

--- a/.doc/UI/source/generated/Layout/Layout.rst
+++ b/.doc/UI/source/generated/Layout/Layout.rst
@@ -1,8 +1,10 @@
 .. Copyright (C) 2010-2021 Combodo SARL
 .. http://opensource.org/licenses/AGPL-3.0

-UI Layout
-=========
+.. _Layouts:
+
+UI Layouts
+==========

 A UI block that serves as a layout for the page.

@@ -10,6 +12,6 @@ A UI block that serves as a layout for the page.
   :maxdepth: 1
   :caption: Components:

-   UIContentBlock
+   MultiColumn/Column/Column
   MultiColumn/MultiColumn
-   MultiColumn/Column/Column
+   UIContentBlock
--- a/.doc/UI/source/generated/Layout/MultiColumn/Column/Column.rst
+++ b/.doc/UI/source/generated/Layout/MultiColumn/Column/Column.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIColumn**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIColumn Type {Parameters} %}
        Content Goes Here
@@ -42,7 +42,7 @@ Column Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIColumn Standard {sId:'value'} %}
        Content Goes Here
@@ -61,7 +61,7 @@ Column ForBlock

 :syntax:

-::
+.. code-block:: twig

    {% UIColumn ForBlock {oBlock:value, sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Layout/MultiColumn/MultiColumn.rst
+++ b/.doc/UI/source/generated/Layout/MultiColumn/MultiColumn.rst
@@ -20,8 +20,8 @@ Twig Tag
 :Tag: **UIMultiColumn**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIMultiColumn Type {Parameters} %}
        Content Goes Here
@@ -40,7 +40,7 @@ MultiColumn Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIMultiColumn Standard {sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/generated/Layout/UIContentBlock.rst
+++ b/.doc/UI/source/generated/Layout/UIContentBlock.rst
@@ -21,8 +21,8 @@ Twig Tag
 :Tag: **UIContentBlock**

 :Syntax:
- 
-::
+
+.. code-block:: twig

    {% UIContentBlock Type {Parameters} %}
        Content Goes Here
@@ -43,7 +43,7 @@ UIContentBlock Standard

 :syntax:

-::
+.. code-block:: twig

    {% UIContentBlock Standard {sId:'value', aContainerClasses:{name:value, name:value}} %}
        Content Goes Here
@@ -64,7 +64,7 @@ UIContentBlock ForCode

 :syntax:

-::
+.. code-block:: twig

    {% UIContentBlock ForCode {sCode:'value', sId:'value'} %}
        Content Goes Here
--- a/.doc/UI/source/index.rst
+++ b/.doc/UI/source/index.rst
@@ -5,8 +5,17 @@ Welcome to iTop 3.0 UI's documentation!
 =======================================

 .. toctree::
-    :maxdepth: 2
-    :caption: Contents:
+    :maxdepth: 1
+    :caption: Twig Base:
+
+    TwigBase/TwigBase
+    TwigBaseTuto/TwigBaseTuto
+    TwigBaseReference/TwigBaseReference
+
+
+.. toctree::
+    :maxdepth: 1
+    :caption: Tags reference:

    generated/Component/Component
    generated/Layout/Layout
--- a/.doc/UI/source/manual/Component/Alert/AlertFooter.rst
+++ b/.doc/UI/source/manual/Component/Alert/AlertFooter.rst
@@ -4,7 +4,9 @@
 Examples
 --------

-Example to generate an temporary information with a spinner (on the real display the spinner is animated)::
+Example to generate an temporary information with a spinner (on the real display the spinner is animated)
+
+.. code-block:: twig

    {% UIAlert ForInformation {'sId':'header-requirements', 'IsCollapsible':false, 'IsClosable':false} %}
        {% UIContentBlock Standard {'aContainerClasses':['ibo-update-core-header-requirements'],
@@ -18,7 +20,9 @@ The information displayed:

 .. image:: /manual/Component/Alert/AlertInformationExample.png

-The javascript to set a success or a failure in return of an ajax call::
+The javascript to set a success or a failure in return of an ajax call
+
+.. code-block:: js

    function (data) {
        var oRequirements = $("#header-requirements");
@@ -34,13 +38,17 @@ The javascript to set a success or a failure in return of an ajax call::

 ----

-Example to generate a hidden alert to display using javascript in case of error::
+Example to generate a hidden alert to display using javascript in case of error
+
+.. code-block:: twig

    {% UIAlert ForFailure {sId:"dir_error_outer", IsCollapsible:false, IsClosable:false, IsHidden:true} %}
        *The content goes here*
    {% EndUIAlert %}

-The javascript to show the alert::
+The javascript to show the alert
+
+.. code-block:: js

    $("#dir_error_outer").removeClass("ibo-is-hidden");

--- a/.doc/UI/source/manual/Component/Field/FieldFooter.rst
+++ b/.doc/UI/source/manual/Component/Field/FieldFooter.rst
@@ -2,14 +2,16 @@
 .. http://opensource.org/licenses/AGPL-3.0


-:Related Tag: :ref:`FieldSet <FieldSet>`
+:Related Tag: :ref:`FieldSet`

 ----

 Examples
 --------

-Example to generate a Field::
+Example to generate a Field
+
+.. code-block:: twig

    {% UIField Small {sLabel: "Product"} %}
        iTop
--- a/.doc/UI/source/manual/Component/FieldSet/FieldSetFooter.rst
+++ b/.doc/UI/source/manual/Component/FieldSet/FieldSetFooter.rst
@@ -2,7 +2,7 @@
 .. http://opensource.org/licenses/AGPL-3.0


-:Related Tag: :ref:`Field <Field>`
+:Related Tag: :ref:`Field`

 ----

--- a/.doc/UI/source/manual/Component/Title/TitleFooter.rst
+++ b/.doc/UI/source/manual/Component/Title/TitleFooter.rst
@@ -7,7 +7,7 @@ Examples

 :The following code:

-::
+.. code-block:: twig

    {% UITitle ForPage {sTitle: 'UI:FullTextSearchTitle_Text'|dict_format(sFullText)} %}{% EndUITitle %}