feat: document expression field in form element library (8.5) (#3633)

* chore: improve dynamic list description in form element library

* feat: document expression field in form element library

* chore: backport expression field documentation to 8.5

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

@@ -0,0 +1,23 @@
+---
+id: forms-element-library-expression
+title: Expression field
+description: A form element to compute form state
+---
+
+An expression field allowing the user to compute new data based on form state.
+
+![Form Expression Field Symbol](/img/form-icons/form-expression.svg)
+
+### Configurable properties
+
+- **Key**: Binds the field to a form variable, refer to [data binding docs](../configuration/forms-config-data-binding.md).
+- **Target value**: Defines an [expression](../../feel/language-guide/feel-expressions-introduction.md) to evaluate.
+- **Compute on**: Defines when the expression should be evaluated. Either whenever the result changes, or only on form submission.
+- **Deactivate if**: [Expression](../../feel/language-guide/feel-expressions-introduction.md) to disable the expression.
+- **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).
+
+:::info
+
+The expression field is a simple way to create intermediary data which may be re-used within your form, or further down your process. To effectively use this component, a good understanding of [FEEL](../../feel/language-guide/feel-expressions-introduction.md) is required.
+
+:::

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

@@ -94,7 +94,7 @@ The following form elements are currently available within Camunda Forms:
  <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>Add and remove variable-length entries</td>
+ <td>Turn sets of form elements into editable lists</td>
  </tr>
 
  <tr>
@@ -109,6 +109,12 @@ The following form elements are currently available within Camunda Forms:
  <td>Render tabular data</td>
  </tr>
 
+ <tr>
+ <td><img src="/img/form-icons/form-expression.svg" alt="Expression Symbol" height="60"></img></td>
+ <td><a href="../forms-element-library-expression">Expression field</a></td>
+ <td>Compute intermediary data</td>
+ </tr>
+
  <tr>
  <td><img src="/img/form-icons/form-image.svg" alt="Image Symbol" height="60"></img></td>
  <td><a href="../forms-element-library-image">Image view</a></td>

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

@@ -23,6 +23,7 @@ module.exports = {
  lib_dir + "forms-element-library-dynamiclist",
  lib_dir + "forms-element-library-iframe",
  lib_dir + "forms-element-library-table",
+ lib_dir + "forms-element-library-expression",
  lib_dir + "forms-element-library-image",
  lib_dir + "forms-element-library-spacer",
  lib_dir + "forms-element-library-separator",

optimize_sidebars.js

@@ -720,6 +720,10 @@ module.exports = {
  "Table",
  "components/modeler/forms/form-element-library/forms-element-library-table/"
  ),
+ docsLink(
+ "Expression field",
+ "components/modeler/forms/form-element-library/forms-element-library-expression/"
+ ),
  docsLink(
  "Image view",
  "components/modeler/forms/form-element-library/forms-element-library-image/"

versioned_docs/version-8.5/components/modeler/forms/form-element-library/forms-element-library-expression.md

@@ -0,0 +1,23 @@
+---
+id: forms-element-library-expression
+title: Expression field
+description: A form element to compute form state
+---
+
+An expression field allowing the user to compute new data based on form state.
+
+![Form Expression Field Symbol](/img/form-icons/form-expression.svg)
+
+### Configurable properties
+
+- **Key**: Binds the field to a form variable, refer to [data binding docs](../configuration/forms-config-data-binding.md).
+- **Target value**: Defines an [expression](../../feel/language-guide/feel-expressions-introduction.md) to evaluate.
+- **Compute on**: Defines when the expression should be evaluated. Either whenever the result changes, or only on form submission.
+- **Deactivate if**: [Expression](../../feel/language-guide/feel-expressions-introduction.md) to disable the expression.
+- **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).
+
+:::info
+
+The expression field is a simple way to create intermediary data which may be re-used within your form, or further down your process. To effectively use this component, a good understanding of [FEEL](../../feel/language-guide/feel-expressions-introduction.md) is required.
+
+:::

versioned_docs/version-8.5/components/modeler/forms/form-element-library/forms-element-library.md

@@ -94,7 +94,7 @@ The following form elements are currently available within Camunda Forms:
  <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>Add and remove variable-length entries</td>
+ <td>Turn sets of form elements into editable lists</td>
  </tr>
 
  <tr>
@@ -109,6 +109,12 @@ The following form elements are currently available within Camunda Forms:
  <td>Render tabular data</td>
  </tr>
 
+ <tr>
+ <td><img src="/img/form-icons/form-expression.svg" alt="Expression Symbol" height="60"></img></td>
+ <td><a href="../forms-element-library-expression">Expression field</a></td>
+ <td>Compute intermediary data</td>
+ </tr>
+
  <tr>
  <td><img src="/img/form-icons/form-image.svg" alt="Image Symbol" height="60"></img></td>
  <td><a href="../forms-element-library-image">Image view</a></td>

versioned_docs/version-8.5/components/modeler/forms/sidebar-schema.js

@@ -23,6 +23,7 @@ module.exports = {
  lib_dir + "forms-element-library-dynamiclist",
  lib_dir + "forms-element-library-iframe",
  lib_dir + "forms-element-library-table",
+ lib_dir + "forms-element-library-expression",
  lib_dir + "forms-element-library-image",
  lib_dir + "forms-element-library-spacer",
  lib_dir + "forms-element-library-separator",

versioned_sidebars/version-8.5-sidebars.json

@@ -334,6 +334,7 @@
  "components/modeler/forms/form-element-library/forms-element-library-dynamiclist",
  "components/modeler/forms/form-element-library/forms-element-library-iframe",
  "components/modeler/forms/form-element-library/forms-element-library-table",
+ "components/modeler/forms/form-element-library/forms-element-library-expression",
  "components/modeler/forms/form-element-library/forms-element-library-image",
  "components/modeler/forms/form-element-library/forms-element-library-spacer",
  "components/modeler/forms/form-element-library/forms-element-library-separator",