diff --git a/.doc/UI/source/TwigBaseTuto/Step3/Hello2.png b/.doc/UI/source/TwigBaseTuto/Step3/Hello2.png new file mode 100644 index 000000000..d2218e5e8 Binary files /dev/null and b/.doc/UI/source/TwigBaseTuto/Step3/Hello2.png differ diff --git a/.doc/UI/source/TwigBaseTuto/Step3/Hello3.png b/.doc/UI/source/TwigBaseTuto/Step3/Hello3.png new file mode 100644 index 000000000..09baec37f Binary files /dev/null and b/.doc/UI/source/TwigBaseTuto/Step3/Hello3.png differ diff --git a/.doc/UI/source/TwigBaseTuto/Step3/Step3.rst b/.doc/UI/source/TwigBaseTuto/Step3/Step3.rst index d92d9246b..8e16f1268 100644 --- a/.doc/UI/source/TwigBaseTuto/Step3/Step3.rst +++ b/.doc/UI/source/TwigBaseTuto/Step3/Step3.rst @@ -6,4 +6,82 @@ We have seen in :ref:`Step2` how to create a static template. Let's send some variables to have a more dynamic display. +.. code-block:: php + :linenos: + DisplayPage($aParams); + } + } + +The ``DisplayPage()`` method accept an array of parameters. This array is transformed into variables for the Twig template. + +Here two variables are created: ``sName`` and ``sDate``, we can use them in the template. + +.. code-block:: twig + :linenos: + + {% UITitle ForPage {sTitle:'Hello ' ~ sName ~ '!'} %}{% EndUITitle %} + {% UIContentBlock Standard {DataAttributes: {role: 'date'}} %} + We are currently {{ sDate }} + {% EndUIContentBlock %} + +The output is then + +.. image:: Hello2.png + +The variables can be of any type, for example you can give an array as a variable: + +.. code-block:: php + :linenos: + + DisplayPage($aParams); + } + } + +Here ``aQuarter`` is an array containing some months, we can use it in a selector: + +.. code-block:: twig + :linenos: + + {% UITitle ForPage {sTitle:'Hello ' ~ sName ~ '!'} %}{% EndUITitle %} + {% UIContentBlock Standard {DataAttributes: {role: 'date'}} %} + We are currently {{ sDate }} + {% EndUIContentBlock %} + + {% UIForm Standard {sId:'my-form'} %} + Select Month: + {% UISelect ForSelect {sName:'month'} %} + {% for index,sMonth in aQuarter %} + {% UISelectOption ForSelectOption {sValue: index, sLabel: sMonth, bSelected:false} %} + {% endfor %} + {% EndUISelect %} + {% EndUIForm %} + +The output is: + +.. image:: Hello3.png