From 623aedfd8228c9087505f3accd51e4a6621a6cf8 Mon Sep 17 00:00:00 2001 From: Jesse Leite Date: Thu, 30 Mar 2023 23:39:59 -0400 Subject: [PATCH 1/2] Document dynamic rendering of form sections. --- content/collections/tags/form-create.md | 27 ++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md index b27428fa8..3afba5949 100644 --- a/content/collections/tags/form-create.md +++ b/content/collections/tags/form-create.md @@ -122,6 +122,8 @@ This way you can let Control Panel users select which form should be used on an ## Dynamic Rendering +### Dynamically Rendering Fields + Instead of hardcoding individual fields, you may loop through the `fields` array to render fields in a dynamic fashion. ``` @@ -154,7 +156,7 @@ Each item in the `fields` array contains the following data configurable in the | `instructions` | string | User-friendly instructions label | | `validate` | array | Contains an array of validation rules | -### Pre-rendered HTML +### Pre-rendered Field HTML Using the `field` variable will intelligently render inputs as inputs, textareas as textareas, and snozzberries as snozzberries. @@ -193,6 +195,29 @@ This approach, combined with the [blueprint editor](/blueprints), will give you ``` +### Dynamically Rendering Sections + +If you have defined multiple sections in your form's blueprint, you can loop over these `sections` in a dynamic fashion as well. + +``` +{{ sections }} +
+ {{ display }} + {{ fields }} + ... + {{ /fields }} +
+{{ /sections }} +``` + +Each item in the `sections` array contains the following data configurable in the form's blueprint. + +| Variable | Type | Description | +|---|---| --- | +| `display` | string | User-friendly section label | +| `fields` | array | An array of [fields](#dynamically-rendering-fields) defined within that section | + + ## Conditional Fields 🆕 You may conditionally show and hide fields by utilizing the [conditional fields](/conditional-fields#overview) settings in your form's blueprint editor. Once configured, by including the necessary front-end scripts and enabling JavaScript on the `form:create` tag, all of the conditional logic will Just Work™. From 2b62a0e9b965cfe68e1c5e57c8f660d3b8bf8f2f Mon Sep 17 00:00:00 2001 From: Jesse Leite Date: Thu, 20 Apr 2023 15:18:45 -0400 Subject: [PATCH 2/2] We also support section `instructions`. --- content/collections/tags/form-create.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/collections/tags/form-create.md b/content/collections/tags/form-create.md index 3afba5949..5e199d136 100644 --- a/content/collections/tags/form-create.md +++ b/content/collections/tags/form-create.md @@ -215,6 +215,7 @@ Each item in the `sections` array contains the following data configurable in th | Variable | Type | Description | |---|---| --- | | `display` | string | User-friendly section label | +| `instructions` | string | User-friendly section instructions | | `fields` | array | An array of [fields](#dynamically-rendering-fields) defined within that section |