FAF: Documentation UI Twig Blocks

.doc/UI/source/Component/Component.rst

@@ -13,6 +13,8 @@ A UI component is a unitary block used to display information in iTop console.
 
    Alert/Alert
    Title/Title
+   FieldSet/FieldSet
+   Field/Field
    Button/Button
    ButtonGroup/ButtonGroup
    CollapsibleSection/CollapsibleSection

.doc/UI/source/Component/Field/Field.rst

@@ -0,0 +1,127 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+.. _Field:
+
+Field
+=====
+
+*In Progress*
+
+----
+
+Output Result
+-------------
+
+:Example Fields:
+
+.. image:: Field.png
+
+----
+
+Twig Tag
+--------
+
+:Tag: **UIField**
+
+:Syntax:
+
+::
+
+    {% UIField Type {Parameters} %}
+        Content Goes Here
+    {% EndUIField %}
+
+:Type:
+
++------------------------------+-----------------------------------------------------+
+| *Standard*                   | Create a *Default FieldSet*                         |
++------------------------------+-----------------------------------------------------+
+| *Small*                      | Create a *FieldSet* with *small* layout             |
++------------------------------+-----------------------------------------------------+
+| *Large*                      | Create a *FieldSet* with *large* layout             |
++------------------------------+-----------------------------------------------------+
+| *FromParams*                 | Create a *FieldSet* from given parameters           |
++------------------------------+-----------------------------------------------------+
+
+:Field *Standard* parameters:
+
++-------------------+--------+-----------+---------------------------------------------+
+| *sLabel*          | string | optional  | Label (default empty)                       |
++-------------------+--------+-----------+---------------------------------------------+
+| *sLayout*         | string | optional  | Layout ('small' or 'large') default 'small' |
++-------------------+--------+-----------+---------------------------------------------+
+| *sId*             | string | optional  | ID of the HTML block                        |
++-------------------+--------+-----------+---------------------------------------------+
+
+:Field *Small* and *Large* parameters:
+
++-------------------+--------+-----------+----------------------------------+
+| *sLabel*          | string | Mandatory | Label                            |
++-------------------+--------+-----------+----------------------------------+
+| *sValueHtml*      | string | optional  | HTML value (default empty)       |
++-------------------+--------+-----------+----------------------------------+
+
+:Field *FromParams* parameters:
+
++-------------------+--------+-----------+----------------------------------+
+| *aParams*         | array  | Mandatory | array of parameters              |
++-------------------+--------+-----------+----------------------------------+
+
+:*aParams* values:
+
++-------------------+--------+----------------------------------------------+
+| *layout*          | string | Layout ('small' or 'large')                  |
++-------------------+--------+----------------------------------------------+
+| *attcode*         | string | Attribute code                               |
++-------------------+--------+----------------------------------------------+
+| *atttype*         | string | Attribute type                               |
++-------------------+--------+----------------------------------------------+
+| *attlabel*        | string | Attribute label                              |
++-------------------+--------+----------------------------------------------+
+| *value_raw*       | string | Attribute raw value                          |
++-------------------+--------+----------------------------------------------+
+| *comments*        | string | Comments (tooltip)                           |
++-------------------+--------+----------------------------------------------+
+| *input_id*        | string | Input id                                     |
++-------------------+--------+----------------------------------------------+
+| *input_type*      | string | Input type                                   |
++-------------------+--------+----------------------------------------------+
+| *attflags*        | array  | Array of flags                               |
++-------------------+--------+----------------------------------------------+
+
+:*attflags* values:
+
++-------------------+---------+----------------------------------------------+
+| *1*               | boolean | Hidden flag                                  |
++-------------------+---------+----------------------------------------------+
+| *2*               | boolean | Read only flag                               |
++-------------------+---------+----------------------------------------------+
+| *4*               | boolean | Mandatory flag                               |
++-------------------+---------+----------------------------------------------+
+| *8*               | boolean | Must change flag                             |
++-------------------+---------+----------------------------------------------+
+| *16*              | boolean | Must prompt flag                             |
++-------------------+---------+----------------------------------------------+
+| *32*              | boolean | Slave flag                                   |
++-------------------+---------+----------------------------------------------+
+
+
+:See also: :ref:`UIBlock Common parameters <UIBlock_parameters>`
+
+:Related Tag: :ref:`FieldSet <FieldSet>`
+
+----
+
+Examples
+--------
+
+Example to generate a Field::
+
+    {% UIField Small {sLabel: "Product"} %}
+        iTop
+    {% EndUIField %}
+
+
+The result:
+
+.. image:: Field.png

.doc/UI/source/Component/FieldSet/FieldSet.rst

@@ -0,0 +1,73 @@
+.. Copyright (C) 2010-2021 Combodo SARL
+.. http://opensource.org/licenses/AGPL-3.0
+.. _FieldSet:
+
+FieldSet
+========
+
+*In Progress*
+
+----
+
+Output Result
+-------------
+
+:Example FieldSets:
+
+.. image:: FieldSet.png
+
+----
+
+Twig Tag
+--------
+
+:Tag: **UIFieldSet**
+
+:Syntax:
+
+::
+
+    {% UIFieldSet Type {Parameters} %}
+        Content Goes Here
+    {% EndUIFieldSet %}
+
+:Type:
+
++------------------------------+-----------------------------------------------------+
+| *Standard*                   | Create a *Default FieldSet*                         |
++------------------------------+-----------------------------------------------------+
+| *Small*                      | Create a *FieldSet* with *small* layout             |
++------------------------------+-----------------------------------------------------+
+| *Large*                      | Create a *FieldSet* with *large* layout             |
++------------------------------+-----------------------------------------------------+
+| *FromParams*                 | Create a *FieldSet* from given parameters           |
++------------------------------+-----------------------------------------------------+
+
+:FieldSet common parameters:
+
++-------------------+--------+-----------+----------------------------------+
+| *sLegend*         | string | Mandatory | Displayed legend of the FieldSet |
++-------------------+--------+-----------+----------------------------------+
+| *sId*             | string | optional  | ID of the HTML block             |
++-------------------+--------+-----------+----------------------------------+
+
+:See also: :ref:`UIBlock Common parameters <UIBlock_parameters>`
+
+:Related Tag: :ref:`Field <Field>`
+
+----
+
+Examples
+--------
+
+Example to generate a FieldSet::
+
+    {% UIFieldSet Standard {sLegend: "iTop environment"} %}
+        {% UIField ... %}
+        ...
+    {% EndUIFieldSet %}
+
+The result:
+
+.. image:: FieldSet-explained.png
+