FAF: Documentation UI Twig Blocks

.doc/UI/bin/generate_uiblock.php

@@ -170,7 +170,7 @@ EOF;
 EOF;
 			} else {
 				$sSyntax = <<<EOF
-    {% $sTag Type $sType {{$sParameters}} %}
+    {% $sTag $sType {{$sParameters}} %}
 EOF;
 			}
 			echo "$sSyntax\n";

.doc/UI/source/TwigBaseTuto/Step3/Step3.rst

@@ -1,6 +1,8 @@
 .. Copyright (C) 2010-2021 Combodo SARL
 .. http://opensource.org/licenses/AGPL-3.0
 
+.. _Step3:
+
 3. Passing variables to templates
 =================================
 

.doc/UI/source/TwigBaseTuto/Step4/Step4.rst

@@ -0,0 +1,76 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+
+.. _Step4:
+
+4. Adding new operations
+========================
+
+We currently have only one operation ``HelloWorld``. Generally multiple operations are needed, let's add a new one.
+
+In the previous part :ref:`Step3` we have created a form, it will be used to call the operation ``SelectMonth``.
+
+Modify the form to add an hidden input to set the operation and add a submit button:
+
+.. code-block:: twig
+    :lineno-start: 6
+    :caption: templates/HelloWorld.html.twig
+
+    {% UIForm Standard {sId:'myform'} %}
+        Select Month:
+        {% UISelect ForSelect {sName:'month'} %}
+            {% for index,sMonth in aQuarter %}
+                {% UISelectOption ForSelectOption {sValue: index, sLabel: sMonth, bSelected:false} %}
+            {% endfor %}
+        {% EndUISelect %}
+        {% UIInput ForHidden {sName:'operation', sValue:'SelectMonth'} %}
+        {% UIContentBlock Standard {DataAttributes: {role: 'actions'}} %}
+            {% UIButton ForPrimaryAction {sLabel:'Ok', bIsSubmit:true} %}
+        {% EndUIContentBlock %}
+    {% EndUIForm %}
+
+The output of this template is:
+
+.. image:: form.png
+
+Now add the operation in the controller:
+
+.. code-block:: php
+    :linenos:
+    :caption: src/Controller/MyModuleController.php
+
+    <?php
+
+    // ...
+
+    class MyModuleController extends Controller
+    {
+        // ...
+
+        public function OperationSelectMonth()
+        {
+            $aMonths = ['January', 'February', 'March'];
+            $iMonth = utils::ReadParam('month', 0);
+            $aParams['sSelectedMonth'] = $aMonths[$iMonth];
+            $this->DisplayPage($aParams);
+        }
+    }
+
+The corresponding template must be created ``templates/SelectMonth.html.twig``
+
+.. code-block:: twig
+    :linenos:
+    :caption: templates/SelectMonth.html.twig
+
+    {% UITitle ForPage {sTitle:'Selected month'} %}{% EndUITitle %}
+
+    {% UIContentBlock Standard {DataAttributes: {role: 'Information'}} %}
+        The selected month is {{ sSelectedMonth }}
+    {% EndUIContentBlock %}
+
+The output of this operation is:
+
+.. image:: SelectMonth.png
+
+
+

.doc/UI/source/TwigBaseTuto/Step4/src/Controller/MyModuleController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace MyCompany\iTop\MyModule\Controller;
+
+use Combodo\iTop\Application\TwigBase\Controller\Controller;
+use UserRights;
+use utils;
+
+class MyModuleController extends Controller
+{
+	public function OperationHelloWorld()
+	{
+		$aParams['sName'] = UserRights::GetUser();
+		$aParams['sDate'] = date("r");
+		$aParams['aQuarter'] = ['January', 'February', 'March'];
+		$this->DisplayPage($aParams);
+	}
+
+	// ...
+	public function OperationSelectMonth()
+	{
+		$aMonths = ['January', 'February', 'March'];
+		$iMonth = utils::ReadParam('month', 0);
+		$aParams['sSelectedMonth'] = $aMonths[$iMonth];
+		$this->DisplayPage($aParams);
+	}
+}

.doc/UI/source/TwigBaseTuto/TwigBaseTuto.rst

@@ -11,3 +11,4 @@ Twig Base Tutorial
     Step1/Step1
     Step2/Step2
     Step3/Step3
+    Step4/Step4

.doc/UI/source/generated/Component/Button/Button.rst

@@ -68,7 +68,7 @@ Button Neutral
 
 .. code-block:: twig
 
-    {% UIButton Type Neutral {sLabel:'value', sName:'value', sId:'value'} %}
+    {% UIButton Neutral {sLabel:'value', sName:'value', sId:'value'} %}
 
 :parameters:
 
@@ -89,7 +89,7 @@ Button ForPrimaryAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForPrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForPrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -114,7 +114,7 @@ Button ForSecondaryAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -139,7 +139,7 @@ Button ForPositiveAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForPositiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForPositiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -164,7 +164,7 @@ Button ForDestructiveAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -189,7 +189,7 @@ Button AlternativeNeutral
 
 .. code-block:: twig
 
-    {% UIButton Type AlternativeNeutral {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton AlternativeNeutral {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -214,7 +214,7 @@ Button ForAlternativePrimaryAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForAlternativePrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForAlternativePrimaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -239,7 +239,7 @@ Button ForAlternativeSecondaryAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForAlternativeSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForAlternativeSecondaryAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -264,7 +264,7 @@ Button ForAlternativeValidationAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForAlternativeValidationAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForAlternativeValidationAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -289,7 +289,7 @@ Button ForAlternativeDestructiveAction
 
 .. code-block:: twig
 
-    {% UIButton Type ForAlternativeDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForAlternativeDestructiveAction {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -314,7 +314,7 @@ Button ForCancel
 
 .. code-block:: twig
 
-    {% UIButton Type ForCancel {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton ForCancel {sLabel:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -339,7 +339,7 @@ Button IconAction
 
 .. code-block:: twig
 
-    {% UIButton Type IconAction {sIconClasses:'value', sTooltipText:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
+    {% UIButton IconAction {sIconClasses:'value', sTooltipText:'value', sName:'value', sValue:'value', bIsSubmit:true, sId:'value'} %}
 
 :parameters:
 
@@ -366,7 +366,7 @@ Button LinkNeutral
 
 .. code-block:: twig
 
-    {% UIButton Type LinkNeutral {sURL:'value', sLabel:'value', sIconClasses:'value', sTarget:'value', sId:'value'} %}
+    {% UIButton LinkNeutral {sURL:'value', sLabel:'value', sIconClasses:'value', sTarget:'value', sId:'value'} %}
 
 :parameters:
 
@@ -391,7 +391,7 @@ Button IconLink
 
 .. code-block:: twig
 
-    {% UIButton Type IconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sTarget:'value', sId:'value'} %}
+    {% UIButton IconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sTarget:'value', sId:'value'} %}
 
 :parameters:
 
@@ -416,7 +416,7 @@ Button DestructiveIconLink
 
 .. code-block:: twig
 
-    {% UIButton Type DestructiveIconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sName:'value', sTarget:'value', sId:'value'} %}
+    {% UIButton DestructiveIconLink {sIconClasses:'value', sTooltipText:'value', sURL:'value', sName:'value', sTarget:'value', sId:'value'} %}
 
 :parameters:
 

.doc/UI/source/generated/Component/ButtonGroup/ButtonGroup.rst

@@ -40,7 +40,7 @@ ButtonGroup ButtonWithOptionsMenu
 
 .. code-block:: twig
 
-    {% UIButtonGroup Type ButtonWithOptionsMenu {oButton:value, oMenu:value} %}
+    {% UIButtonGroup ButtonWithOptionsMenu {oButton:value, oMenu:value} %}
 
 :parameters:
 

.doc/UI/source/generated/Component/Input/FileSelect/FileSelect.rst

@@ -40,7 +40,7 @@ FileSelect Standard
 
 .. code-block:: twig
 
-    {% UIFileSelect Type Standard {sName:'value', sId:'value'} %}
+    {% UIFileSelect Standard {sName:'value', sId:'value'} %}
 
 :parameters:
 

.doc/UI/source/generated/Component/Input/Input.rst

@@ -44,7 +44,7 @@ Input ForHidden
 
 .. code-block:: twig
 
-    {% UIInput Type ForHidden {sName:'value', sValue:'value', sId:'value'} %}
+    {% UIInput ForHidden {sName:'value', sValue:'value', sId:'value'} %}
 
 :parameters:
 
@@ -65,7 +65,7 @@ Input Standard
 
 .. code-block:: twig
 
-    {% UIInput Type Standard {sType:'value', sName:'value', sValue:'value', sId:'value'} %}
+    {% UIInput Standard {sType:'value', sName:'value', sValue:'value', sId:'value'} %}
 
 :parameters:
 
@@ -88,7 +88,7 @@ Input ForInputWithLabel
 
 .. code-block:: twig
 
-    {% UIInput Type ForInputWithLabel {sLabel:'value', sInputName:'value', sInputValue:'value', sInputId:'value', sInputType:'value'} %}
+    {% UIInput ForInputWithLabel {sLabel:'value', sInputName:'value', sInputValue:'value', sInputId:'value', sInputType:'value'} %}
 
 :parameters:
 

.doc/UI/source/generated/Component/Input/Select/SelectOption.rst

@@ -40,7 +40,7 @@ SelectOption ForSelectOption
 
 .. code-block:: twig
 
-    {% UISelectOption Type ForSelectOption {sValue:'value', sLabel:'value', bSelected:true, sId:'value'} %}
+    {% UISelectOption ForSelectOption {sValue:'value', sLabel:'value', bSelected:true, sId:'value'} %}
 
 :parameters:
 

.doc/UI/source/generated/Component/Spinner/Spinner.rst

@@ -40,7 +40,7 @@ Spinner Standard
 
 .. code-block:: twig
 
-    {% UISpinner Type Standard {sId:'value'} %}
+    {% UISpinner Standard {sId:'value'} %}
 
 :parameters:
 

.doc/UI/source/generated/Component/Toolbar/ToolbarSpacer/ToolbarSpacer.rst

@@ -40,7 +40,7 @@ ToolbarSpacer Standard
 
 .. code-block:: twig
 
-    {% UIToolbarSpacer Type Standard {sId:'value'} %}
+    {% UIToolbarSpacer Standard {sId:'value'} %}
 
 :parameters: