docs(forms): Add dynamic list section and clean up iframe section (#3138

)

* feat: document dynamic list and related features

Related to bpmn-io/form-js#796

* fix: iframe text spacing and closing note

* style(formatting): technical review

---------

Co-authored-by: Christina Ausley <christina.ausley@camunda.com>

docs/components/modeler/forms/configuration/forms-config-data-binding.md

@@ -66,3 +66,29 @@ If the above group has a path set to `user.info`, and if each field's key matche
   }
 }
 ```
+
+Group paths can be shared by multiple groups, as long as fields themselves do not conflict. However, depending on your use case, it might make sense for your visual and data structure to match.
+
+### Path configuration for dynamic lists
+
+While dynamic lists share similarities with groups in form structuring, they differ slightly in terms of path configuration. Since dynamic lists are bound to arrays, they cannot share paths with other dynamic lists or groups.
+
+In this instance, consider a dynamic list with the path `contacts`. Each entry in the list might contain fields like `name` and `phone`. The dynamic list directly outputs an array of objects under its own path, and the key of those child variables is used in the creation of the individual objects. The resulting data structure would resemble:
+
+```
+{
+  "contacts": [
+    {
+      "name": "John Doe",
+      "phone": "123-456-7890"
+    },
+    {
+      "name": "Jane Smith",
+      "phone": "098-765-4321"
+    }
+    // Additional objects for each item in the list
+  ]
+}
+```
+
+This structure is maintained when binding to input data as well. You can programmatically control how many list items are rendered from the number of elements in the array at the binding path, whether individual element data is provided or not.

docs/components/modeler/forms/form-element-library/forms-element-library-dynamiclist.md

@@ -0,0 +1,24 @@
+---
+id: forms-element-library-dynamiclist
+title: Dynamic list
+description: Learn about the dynamic list form element to dynamically manage a list of form elements.
+---
+
+The **dynamic list** element is designed to dynamically manage a list of form elements. It enables users to add or remove items from the list and is particularly useful in scenarios where the number of items in a list is not fixed.
+
+![Dynamic List Symbol](/img/form-icons/form-dynamiclist.svg)
+
+## Configurable properties
+
+- **Group label**: Label displayed on top of the dynamic list. Can either be an [expression](../../feel/language-guide/feel-expressions-introduction.md), plain text, or [templating syntax](../configuration/forms-config-templating-syntax.md).
+- **Path**: Assigns a path that maps its children into a data object, defined as a variable name or a dot separated variable accessor. See the [data binding docs](../configuration/forms-config-data-binding.md) for more details.
+- **Default number of items**: Specifies the default number of items rendered when no input data is provided.
+- **Allow add/delete items**: Enables users to add new items to or delete existing items from the list.
+- **Disable collapse**: Prevents items in the list from being collapsed.
+- **Number of non-collapsing items**: Defines the number of items in the list that will not collapse.
+- **Vertical alignment**: Determines the alignment of items in the list.
+- **Hide if**: [Expression](../../feel/language-guide/feel-expressions-introduction.md) to hide the dynamic list.
+
+## Usage
+
+The dynamic list element facilitates the management of data lists in forms. It is highly adaptable, with features like default item count, add/delete capabilities, and control over item collapse. It's the ideal component for scenarios where users need to input a variable number of items, such as adding multiple contacts or entries in a form.

docs/components/modeler/forms/form-element-library/forms-element-library-group.md

@@ -13,6 +13,7 @@ The group element serves as a container to group various form elements together.
 - **Group label**: Label displayed on top of the group. Can either be an [expression](../../feel/language-guide/feel-expressions-introduction.md), plain text, or [templating syntax](../configuration/forms-config-templating-syntax.md).
 - **Path**: Assigns a path that maps its children into a data object, may be left empty, defined as a variable name or a dot separated variable accessor. See the [data binding docs](../configuration/forms-config-data-binding.md) for more details.
 - **Show outline**: Can be toggled on and off to display a separating outline around the group
+- **Vertical alignment**: Determines the alignment of items in the list.
 - **Hide if**: [Expression](../../feel/language-guide/feel-expressions-introduction.md) to hide the group.
 - **Columns**: Space the field will use inside its row. **Auto** means it will automatically adjust to available space in the row. Read more about the underlying grid layout in the [Carbon Grid documentation](https://carbondesignsystem.com/guidelines/2x-grid/overview).
 

docs/components/modeler/forms/form-element-library/forms-element-library-iframe.md

@@ -7,7 +7,10 @@ description: Learn about the iFrame form element to embed external content.
 This is an element allowing the user to embed external content via an iFrame.
 
 :::note
-Every iFrame component is a sandbox. This means that the content of the iFrame is not able to access the parent page, cookies, browser storage, and others.[Learn more about sandbox iFrames](https://www.w3schools.com/tags/att_iframe_sandbox.asp).
+
+Every iFrame component is a sandbox. This means that the content of the iFrame is not able to access the parent page, cookies, browser storage, and others. [Learn more about sandbox iFrames](https://www.w3schools.com/tags/att_iframe_sandbox.asp).
+
+:::
 
 ![Form iFrame Symbol](/img/form-icons/form-iframe.svg)
 

docs/components/modeler/forms/form-element-library/forms-element-library.md

@@ -85,6 +85,12 @@ The following form elements are currently available within Camunda Forms:
     <td>Group multiple form elements</td>
   </tr>
 
+  <tr>
+    <td><img src="/img/form-icons/form-dynamiclist.svg" alt="Dynamic List Symbol" height="60"></img></td>
+    <td><a href="../forms-element-library-dynamiclist">Dynamic list</a></td>
+    <td>And and remove variable-length entries</td>
+  </tr>
+
   <tr>
     <td><img src="/img/form-icons/form-iframe.svg" alt="iFrame Symbol" height="60"></img></td>
     <td><a href="../forms-element-library-iframe">iFrame</a></td>

docs/components/modeler/forms/sidebar-schema.js

@@ -19,6 +19,7 @@ module.exports = {
         lib_dir + "forms-element-library-checklist",
         lib_dir + "forms-element-library-taglist",
         lib_dir + "forms-element-library-group",
+        lib_dir + "forms-element-library-dynamiclist",
         lib_dir + "forms-element-library-iframe",
         lib_dir + "forms-element-library-image",
         lib_dir + "forms-element-library-spacer",