From 3a66238365eb3b077504c6bfdca152db90d1de0a Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 11 Mar 2024 15:13:07 +0000
Subject: [PATCH] content: 1.2.11

---
 app_data/assets/contents.json                 |  20 +
 .../images/icons/ask_question_white.svg       |   1 +
 app_data/assets/images/icons/book_white.svg   |   1 +
 app_data/assets/images/icons/house_white.svg  |   1 +
 app_data/assets/images/icons/star_white.svg   |   1 +
 app_data/assets/images/icons/tick.svg         |   1 +
 app_data/sheets/contents.json                 |  44 +-
 .../component_demo/comp_data_items_list.json  |   5 +
 .../debug/example_tg_stepper_data.json        |  21 +
 .../debug_data_items_rendering_data.json      |  13 +
 .../data_list/feat_task_group_1_data.json     |   8 +-
 .../component_demo/comp_data_items.json       | 539 ++++++++++++++++
 .../template/component_demo/comp_drawer.json  |  81 +++
 .../template/component_demo/comp_html.json    |  33 +
 .../component_demo/comp_radio_group.json      |  30 +-
 .../template/component_demo/comp_text.json    |   2 +-
 .../debug/example_task_group_content.json     |  99 ---
 .../debug/example_task_group_stepper.json     | 594 +++++++++++++-----
 .../template/debug/feature_display_group.json |  63 ++
 .../sheets/template/debug/tg_1_subtask_3.json |  27 +
 .../template/debug_data_items_r_template.json |  17 +
 .../template/debug_data_items_rendering.json  |  47 ++
 app_data/sheets/template/feat_footer.json     |  43 ++
 app_data/sheets/template/temp_data_items.json | 487 ++++++++++++++
 config.ts                                     |  21 +-
 25 files changed, 1900 insertions(+), 299 deletions(-)
 create mode 100644 app_data/assets/images/icons/ask_question_white.svg
 create mode 100644 app_data/assets/images/icons/book_white.svg
 create mode 100644 app_data/assets/images/icons/house_white.svg
 create mode 100644 app_data/assets/images/icons/star_white.svg
 create mode 100644 app_data/assets/images/icons/tick.svg
 create mode 100644 app_data/sheets/data_list/debug/example_tg_stepper_data.json
 create mode 100644 app_data/sheets/data_list/debug_data_items_rendering_data.json
 delete mode 100644 app_data/sheets/template/debug/example_task_group_content.json
 create mode 100644 app_data/sheets/template/debug/tg_1_subtask_3.json
 create mode 100644 app_data/sheets/template/debug_data_items_r_template.json
 create mode 100644 app_data/sheets/template/debug_data_items_rendering.json
 create mode 100644 app_data/sheets/template/feat_footer.json
 create mode 100644 app_data/sheets/template/temp_data_items.json

diff --git a/app_data/assets/contents.json b/app_data/assets/contents.json
index 370dc9b..1f9e14c 100644
--- a/app_data/assets/contents.json
+++ b/app_data/assets/contents.json
@@ -55,6 +55,10 @@
     "md5Checksum": "8ed1f2802b37a7a11382ebabcdd9dfd0",
     "size_kb": 527.3
   },
+  "images/icons/ask_question_white.svg": {
+    "md5Checksum": "d52f43b75aacee5da8c3e33a76ecf3b7",
+    "size_kb": 1.4
+  },
   "images/icons/audio/pause-sharp.svg": {
     "md5Checksum": "d8254b68a74026926ccff7e6a7437409",
     "size_kb": 0.1
@@ -71,6 +75,10 @@
     "md5Checksum": "b3ed52ec26505b93fd559e711fa92863",
     "size_kb": 0.1
   },
+  "images/icons/book_white.svg": {
+    "md5Checksum": "12c477faa57812b7a16bc6a0d0424c06",
+    "size_kb": 0.7
+  },
   "images/icons/favicon.svg": {
     "md5Checksum": "25a750c5524bd7c519b2b53a3abe5036",
     "size_kb": 2.1
@@ -87,6 +95,10 @@
     "md5Checksum": "3837dbad3c5c5b8158a5370064283c20",
     "size_kb": 0.6
   },
+  "images/icons/house_white.svg": {
+    "md5Checksum": "f65ea96d7ff53e9bed8613e7f2fe3302",
+    "size_kb": 0.6
+  },
   "images/icons/in_progress.svg": {
     "md5Checksum": "6105962bc0edd981675d874dc8a51035",
     "size_kb": 1.1
@@ -103,6 +115,14 @@
     "md5Checksum": "bc87b2ae05c7c762ca7673657c0efb56",
     "size_kb": 1.6
   },
+  "images/icons/star_white.svg": {
+    "md5Checksum": "0f9f695561b9bd2c21944bb6dd47d704",
+    "size_kb": 1
+  },
+  "images/icons/tick.svg": {
+    "md5Checksum": "b4e6f1e9ba6e5bcdd2e404bc432ba745",
+    "size_kb": 0.3
+  },
   "images/icons/tick_white.svg": {
     "md5Checksum": "81136e04436759812dc3f6e90c61de11",
     "size_kb": 0.3
diff --git a/app_data/assets/images/icons/ask_question_white.svg b/app_data/assets/images/icons/ask_question_white.svg
new file mode 100644
index 0000000..677231f
--- /dev/null
+++ b/app_data/assets/images/icons/ask_question_white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.93 76.93"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M75.25,42.35A20.3,20.3,0,0,0,63.84,28.66a21.49,21.49,0,0,0-4.51-1.42,29.65,29.65,0,0,0-6.25-.18H53A26,26,0,1,0,7.42,47.17L3.71,58.58l12.05-4.95a26,26,0,0,0,21.05.75,14.14,14.14,0,0,0,.9,2.31c2.95,7.06,9.12,10.71,17.83,10.71a20.09,20.09,0,0,0,8.72-2l9.73,4-3-9.16a20.27,20.27,0,0,0,4.24-17.88ZM16.32,51.61l-.42-.21L7.15,54.94l2.67-8.26-.42-.46a23.61,23.61,0,1,1,6.92,5.39ZM69,59.25l-.43.46,1.95,5.81L64.15,63l-.45.23a17.86,17.86,0,0,1-8.17,2c-7.86,0-13.19-3.15-15.82-9.37,0-.06-.06-.12-.08-.19a11.84,11.84,0,0,0-.81-2.17A25.46,25.46,0,0,0,44.13,50a26,26,0,0,0,9.06-20.76c1.35,0,2.71,0,4.06.06a17.12,17.12,0,0,1,10.4,4.48A18.06,18.06,0,0,1,69,59.25Z"/><circle class="cls-1" cx="52.65" cy="47.48" r="1.46"/><circle class="cls-1" cx="57.6" cy="47.48" r="1.46"/><circle class="cls-1" cx="62.55" cy="47.48" r="1.46"/><path class="cls-1" d="M27.06,40.3h0a2.09,2.09,0,0,1,2.09,2.09h0a2.08,2.08,0,0,1-2.09,2.09h0A2.09,2.09,0,0,1,25,42.39h0A2.1,2.1,0,0,1,27.06,40.3Z"/><path class="cls-1" d="M31.19,25.2a3.86,3.86,0,0,1-1.31,2.94l-3.7,3.55a2.37,2.37,0,0,0-.83,1.79v2.21A1.62,1.62,0,0,0,27,37.26h.46a1.63,1.63,0,0,0,1.66-1.57V34.46a.77.77,0,0,1,.22-.53l3-3a7.8,7.8,0,0,0-7-13.44,8.19,8.19,0,0,0-6.19,6.2,1.27,1.27,0,0,0,1.35,1.51h1.05a1.6,1.6,0,0,0,1.51-1.05,4.18,4.18,0,0,1,4.2-2.71,4.08,4.08,0,0,1,4,3.76Z"/></svg>
\ No newline at end of file
diff --git a/app_data/assets/images/icons/book_white.svg b/app_data/assets/images/icons/book_white.svg
new file mode 100644
index 0000000..0e0006d
--- /dev/null
+++ b/app_data/assets/images/icons/book_white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.73 23.73"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M22,2.8a46.37,46.37,0,0,0-7.2.2,5.59,5.59,0,0,0-2.93,2A5.59,5.59,0,0,0,8.94,3a45.29,45.29,0,0,0-7.21-.2,1.06,1.06,0,0,0-1,1.07V18.64a1.14,1.14,0,0,0,1.14,1.14H8.13s2.69-.19,3.18,1.52l.08.21a.5.5,0,0,0,.09.24h0a.5.5,0,0,0,.41.22.48.48,0,0,0,.48-.4h0l0-.28c.49-1.71,3.16-1.52,3.23-1.52H21.9A1.14,1.14,0,0,0,23,18.64V3.87A1.06,1.06,0,0,0,22,2.8ZM8.42,18.74H1.84a.11.11,0,0,1-.11-.11V3.87l0,0a45.53,45.53,0,0,1,7,.18,5,5,0,0,1,2.62,2v13.6A5,5,0,0,0,8.42,18.74ZM22,18.64a.11.11,0,0,1-.11.11H15.69a5.27,5.27,0,0,0-3.31.85V6A5,5,0,0,1,15,4a46.91,46.91,0,0,1,7-.18,0,0,0,0,1,0,0Z"/></svg>
\ No newline at end of file
diff --git a/app_data/assets/images/icons/house_white.svg b/app_data/assets/images/icons/house_white.svg
new file mode 100644
index 0000000..511d61a
--- /dev/null
+++ b/app_data/assets/images/icons/house_white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.73 23.73"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M16.7,4.4,12.16.86a.5.5,0,0,0-.31-.1.56.56,0,0,0-.28.1L.46,9.53a.49.49,0,0,0-.08.68.48.48,0,0,0,.68.08l.67-.52v12.7a.48.48,0,0,0,.48.48H8.89a.43.43,0,0,0,.16,0h5.63a.43.43,0,0,0,.16,0h6.68a.49.49,0,0,0,.49-.48V9.77l.67.52a.47.47,0,0,0,.67-.08.48.48,0,0,0-.08-.68h0L19.59,6.66m-7.72-4.8L21,9V22H15.25V13.57a.76.76,0,0,0-.76-.76H9.24a.76.76,0,0,0-.75.76V22H2.69V9Zm6.76,4.05-1-.76m-7.61,8.62h3.63a.6.6,0,0,1,.6.6V22H9.45V14.37A.6.6,0,0,1,10.05,13.77Z"/></svg>
\ No newline at end of file
diff --git a/app_data/assets/images/icons/star_white.svg b/app_data/assets/images/icons/star_white.svg
new file mode 100644
index 0000000..3684088
--- /dev/null
+++ b/app_data/assets/images/icons/star_white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.93 76.93"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M56.94,73.42a6.46,6.46,0,0,1-3.8-1.26L40.27,62.8a3.08,3.08,0,0,0-3.61,0L23.79,72.16a6.47,6.47,0,0,1-9.95-7.23l4.92-15.14a3.05,3.05,0,0,0-1.12-3.42L4.77,37a6.47,6.47,0,0,1,3.8-11.7H24.48A3.07,3.07,0,0,0,27.4,23.2L32.32,8.06a6.37,6.37,0,0,1,6.15-4.47h0a6.37,6.37,0,0,1,6.14,4.47L49.53,23.2a3.07,3.07,0,0,0,2.92,2.11H68.36A6.47,6.47,0,0,1,72.16,37L59.29,46.37a3.06,3.06,0,0,0-1.12,3.43l4.92,15.13a6.51,6.51,0,0,1-6.15,8.49ZM38.47,58.82a6.5,6.5,0,0,1,3.8,1.23l12.87,9.36A3.07,3.07,0,0,0,59.86,66L54.94,50.84a6.44,6.44,0,0,1,2.35-7.22l12.88-9.36a3.07,3.07,0,0,0-1.81-5.55H52.45a6.45,6.45,0,0,1-6.15-4.46L41.38,9.11A3,3,0,0,0,38.47,7h0a3,3,0,0,0-2.92,2.12L30.63,24.25a6.45,6.45,0,0,1-6.15,4.46H8.57a3.07,3.07,0,0,0-1.8,5.55l12.87,9.36A6.44,6.44,0,0,1,22,50.84L17.07,66a3.07,3.07,0,0,0,4.72,3.43l12.87-9.36A6.5,6.5,0,0,1,38.47,58.82Z"/></svg>
\ No newline at end of file
diff --git a/app_data/assets/images/icons/tick.svg b/app_data/assets/images/icons/tick.svg
new file mode 100644
index 0000000..750cce1
--- /dev/null
+++ b/app_data/assets/images/icons/tick.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.97 68.97"><defs><style>.cls-1{fill:#0d4060;}</style></defs><path class="cls-1" d="M31.08,67.58a10.54,10.54,0,0,1-7.43-3l-.23-.23L3.51,42.7a6.3,6.3,0,1,1,9.27-8.54L31.07,54,76.4,3.8a6.31,6.31,0,1,1,9.36,8.45L38.7,64.36a10.6,10.6,0,0,1-7.49,3.22Z"/></svg>
\ No newline at end of file
diff --git a/app_data/sheets/contents.json b/app_data/sheets/contents.json
index 070c3b1..ffc51ed 100644
--- a/app_data/sheets/contents.json
+++ b/app_data/sheets/contents.json
@@ -199,6 +199,12 @@
       "flow_name": "example_templating_list",
       "_xlsxPath": "example_sheets/example_advanced_templating.xlsx"
     },
+    "example_tg_stepper_data": {
+      "flow_type": "data_list",
+      "flow_name": "example_tg_stepper_data",
+      "flow_subtype": "debug",
+      "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
+    },
     "feature_items_data": {
       "flow_type": "data_list",
       "flow_name": "feature_items_data",
@@ -211,6 +217,12 @@
       "data_list_name": "debug_answer_list_partial",
       "_xlsxPath": "debug_sheets/debug_answer_list_partial.xlsx"
     },
+    "debug_data_items_rendering_data": {
+      "flow_type": "data_list",
+      "flow_name": "debug_data_items_rendering_data",
+      "data_list_name": "debug_data_items_rendering",
+      "_xlsxPath": "debug_sheets/debug_data_items_nested_template.xlsx"
+    },
     "debug_launch_actions": {
       "flow_type": "data_list",
       "flow_subtype": "debug_lifecycle_actions",
@@ -2162,12 +2174,6 @@
       "flow_name": "example_startup_trigger",
       "_xlsxPath": "example_sheets/to_be_sorted/example_startup.xlsx"
     },
-    "example_task_group_content": {
-      "flow_type": "template",
-      "flow_name": "example_task_group_content",
-      "flow_subtype": "debug",
-      "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
-    },
     "example_task_group_stepper": {
       "flow_type": "template",
       "flow_name": "example_task_group_stepper",
@@ -2468,6 +2474,12 @@
       "flow_subtype": "debug",
       "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
     },
+    "tg_1_subtask_3": {
+      "flow_type": "template",
+      "flow_name": "tg_1_subtask_3",
+      "flow_subtype": "debug",
+      "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
+    },
     "w_example_ending": {
       "flow_type": "template",
       "flow_subtype": "debug",
@@ -2552,6 +2564,16 @@
         "debug_circ_override_1": true
       }
     },
+    "debug_data_items_r_template": {
+      "flow_type": "template",
+      "flow_name": "debug_data_items_r_template",
+      "_xlsxPath": "debug_sheets/debug_data_items_nested_template.xlsx"
+    },
+    "debug_data_items_rendering": {
+      "flow_type": "template",
+      "flow_name": "debug_data_items_rendering",
+      "_xlsxPath": "debug_sheets/debug_data_items_nested_template.xlsx"
+    },
     "debug_error_logging": {
       "flow_type": "template",
       "flow_name": "debug_error_logging",
@@ -2646,6 +2668,11 @@
       "flow_subtype": "example_sheet_defaults",
       "_xlsxPath": "example_sheets/to_be_sorted/example_sheet_defaults.xlsx"
     },
+    "feat_footer": {
+      "flow_type": "template",
+      "flow_name": "feat_footer",
+      "_xlsxPath": "feature_sheets/to_be_sorted/feature_footer.xlsx"
+    },
     "feat_task_group_subtask_toggle": {
       "flow_type": "template",
       "flow_name": "feat_task_group_subtask_toggle",
@@ -2703,6 +2730,11 @@
       "flow_type": "template",
       "flow_name": "nav_buttons",
       "_xlsxPath": "navigation.xlsx"
+    },
+    "temp_data_items": {
+      "flow_type": "template",
+      "flow_name": "temp_data_items",
+      "_xlsxPath": "component_sheets/component_data_items.xlsx"
     }
   },
   "tour": {
diff --git a/app_data/sheets/data_list/component_demo/comp_data_items_list.json b/app_data/sheets/data_list/component_demo/comp_data_items_list.json
index 23d35bd..85ef4bd 100644
--- a/app_data/sheets/data_list/component_demo/comp_data_items_list.json
+++ b/app_data/sheets/data_list/component_demo/comp_data_items_list.json
@@ -13,6 +13,11 @@
       "id": "id_2",
       "label": "Task 2",
       "completed": true
+    },
+    {
+      "id": "id_3",
+      "label": "Task 3",
+      "completed": true
     }
   ],
   "_xlsxPath": "component_sheets/component_data_items.xlsx"
diff --git a/app_data/sheets/data_list/debug/example_tg_stepper_data.json b/app_data/sheets/data_list/debug/example_tg_stepper_data.json
new file mode 100644
index 0000000..b5430bf
--- /dev/null
+++ b/app_data/sheets/data_list/debug/example_tg_stepper_data.json
@@ -0,0 +1,21 @@
+{
+  "flow_type": "data_list",
+  "flow_name": "example_tg_stepper_data",
+  "status": "released",
+  "flow_subtype": "debug",
+  "rows": [
+    {
+      "id": "subtask_1",
+      "active": true
+    },
+    {
+      "id": "subtask_2",
+      "active": false
+    },
+    {
+      "id": "subtask_3",
+      "active": false
+    }
+  ],
+  "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
+}
\ No newline at end of file
diff --git a/app_data/sheets/data_list/debug_data_items_rendering_data.json b/app_data/sheets/data_list/debug_data_items_rendering_data.json
new file mode 100644
index 0000000..7624638
--- /dev/null
+++ b/app_data/sheets/data_list/debug_data_items_rendering_data.json
@@ -0,0 +1,13 @@
+{
+  "flow_type": "data_list",
+  "flow_name": "debug_data_items_rendering_data",
+  "status": "released",
+  "data_list_name": "debug_data_items_rendering",
+  "rows": [
+    {
+      "id": "row_1",
+      "name": "Row 1"
+    }
+  ],
+  "_xlsxPath": "debug_sheets/debug_data_items_nested_template.xlsx"
+}
\ No newline at end of file
diff --git a/app_data/sheets/data_list/feat_task_group_1_data.json b/app_data/sheets/data_list/feat_task_group_1_data.json
index bc800f9..287c587 100644
--- a/app_data/sheets/data_list/feat_task_group_1_data.json
+++ b/app_data/sheets/data_list/feat_task_group_1_data.json
@@ -8,13 +8,17 @@
       "id": "subtask_1",
       "completed_field": "task_group_1_subtask_1_completed",
       "title": "Subtask 1 Title",
-      "description": "Subtask 1 in Task Group 1"
+      "description": "Subtask 1 in Task Group 1",
+      "completed": false,
+      "active": true
     },
     {
       "id": "subtask_2",
       "completed_field": "task_group_1_subtask_2_completed",
       "title": "Subtask 2 Title",
-      "description": "Subtask 2 in Task Group 1"
+      "description": "Subtask 2 in Task Group 1",
+      "completed": false,
+      "active": false
     }
   ],
   "_xlsxPath": "feature_sheets/to_be_sorted/feature_task_group.xlsx"
diff --git a/app_data/sheets/template/component_demo/comp_data_items.json b/app_data/sheets/template/component_demo/comp_data_items.json
index 8c22b20..c608325 100644
--- a/app_data/sheets/template/component_demo/comp_data_items.json
+++ b/app_data/sheets/template/component_demo/comp_data_items.json
@@ -660,6 +660,545 @@
           "value"
         ]
       }
+    },
+    {
+      "type": "title",
+      "name": "example_4",
+      "value": "Example 4: Set item at index/id",
+      "_translations": {
+        "value": {}
+      },
+      "_nested_name": "example_4"
+    },
+    {
+      "type": "data_items",
+      "value": "@data.comp_data_items_list",
+      "rows": [
+        {
+          "type": "text",
+          "name": "id_@item.id",
+          "value": "@item.id",
+          "_translations": {
+            "value": {}
+          },
+          "_nested_name": "data_items.id_@item.id",
+          "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "id_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
+            "value": [
+              {
+                "fullExpression": "@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.id_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ]
+          },
+          "_dynamicDependencies": {
+            "@item.id": [
+              "name",
+              "value",
+              "_nested_name"
+            ]
+          }
+        },
+        {
+          "type": "text",
+          "name": "index_@item._index",
+          "value": "index: @item._index",
+          "_translations": {
+            "value": {}
+          },
+          "_nested_name": "data_items.index_@item._index",
+          "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "index_@item._index",
+                "matchedExpression": "@item._index",
+                "type": "item",
+                "fieldName": "_index"
+              }
+            ],
+            "value": [
+              {
+                "fullExpression": "index: @item._index",
+                "matchedExpression": "@item._index",
+                "type": "item",
+                "fieldName": "_index"
+              }
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.index_@item._index",
+                "matchedExpression": "@item._index",
+                "type": "item",
+                "fieldName": "_index"
+              }
+            ]
+          },
+          "_dynamicDependencies": {
+            "@item._index": [
+              "name",
+              "value",
+              "_nested_name"
+            ]
+          }
+        },
+        {
+          "type": "text",
+          "name": "text_completed_@item.id",
+          "value": "Completed: @item.completed",
+          "_translations": {
+            "value": {}
+          },
+          "_nested_name": "data_items.text_completed_@item.id",
+          "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "text_completed_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
+            "value": [
+              {
+                "fullExpression": "Completed: @item.completed",
+                "matchedExpression": "@item.completed",
+                "type": "item",
+                "fieldName": "completed"
+              }
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.text_completed_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ]
+          },
+          "_dynamicDependencies": {
+            "@item.id": [
+              "name",
+              "_nested_name"
+            ],
+            "@item.completed": [
+              "value"
+            ]
+          }
+        },
+        {
+          "type": "button",
+          "name": "index_1_button_@item.id",
+          "value": "Set item at index 1 to completed: true",
+          "_translations": {
+            "value": {}
+          },
+          "action_list": [
+            {
+              "trigger": "click",
+              "action_id": "set_item",
+              "args": [],
+              "_raw": "click | set_item | _index: 1, completed:true",
+              "_cleaned": "click | set_item | _index: 1, completed:true",
+              "params": {
+                "_index": "1",
+                "completed": true
+              }
+            }
+          ],
+          "_nested_name": "data_items.index_1_button_@item.id",
+          "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "index_1_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.index_1_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ]
+          },
+          "_dynamicDependencies": {
+            "@item.id": [
+              "name",
+              "_nested_name"
+            ]
+          }
+        },
+        {
+          "type": "button",
+          "name": "index_plus_1_button_@item.id",
+          "value": "Set item at index (this + 1) to completed: false",
+          "_translations": {
+            "value": {}
+          },
+          "action_list": [
+            {
+              "trigger": "click",
+              "action_id": "set_item",
+              "args": [],
+              "_raw": "click | set_item | _index: @item._index + 1, completed:false",
+              "_cleaned": "click | set_item | _index: @item._index + 1, completed:false",
+              "params": {
+                "_index": "@item._index + 1",
+                "completed": false
+              }
+            }
+          ],
+          "_nested_name": "data_items.index_plus_1_button_@item.id",
+          "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "index_plus_1_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
+            "action_list": {
+              "0": {
+                "_raw": [
+                  {
+                    "fullExpression": "click | set_item | _index: @item._index + 1, completed:false",
+                    "matchedExpression": "@item._index",
+                    "type": "item",
+                    "fieldName": "_index"
+                  }
+                ],
+                "_cleaned": [
+                  {
+                    "fullExpression": "click | set_item | _index: @item._index + 1, completed:false",
+                    "matchedExpression": "@item._index",
+                    "type": "item",
+                    "fieldName": "_index"
+                  }
+                ],
+                "params": {
+                  "_index": [
+                    {
+                      "fullExpression": "@item._index + 1",
+                      "matchedExpression": "@item._index",
+                      "type": "item",
+                      "fieldName": "_index"
+                    }
+                  ]
+                }
+              }
+            },
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.index_plus_1_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ]
+          },
+          "_dynamicDependencies": {
+            "@item.id": [
+              "name",
+              "_nested_name"
+            ],
+            "@item._index": [
+              "action_list.0._raw",
+              "action_list.0._cleaned",
+              "action_list.0.params._index"
+            ]
+          }
+        },
+        {
+          "type": "button",
+          "name": "id_button_@item.id",
+          "value": "Set item with id \"id_1\" to completed: true",
+          "_translations": {
+            "value": {}
+          },
+          "action_list": [
+            {
+              "trigger": "click",
+              "action_id": "set_item",
+              "args": [],
+              "_raw": "click | set_item | _id: id_1, completed:true",
+              "_cleaned": "click | set_item | _id: id_1, completed:true",
+              "params": {
+                "_id": "id_1",
+                "completed": true
+              }
+            }
+          ],
+          "_nested_name": "data_items.id_button_@item.id",
+          "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "id_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.id_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ]
+          },
+          "_dynamicDependencies": {
+            "@item.id": [
+              "name",
+              "_nested_name"
+            ]
+          }
+        },
+        {
+          "type": "button",
+          "name": "id_button_@item.id",
+          "value": "Set item with id \"id_1\" to completed: false",
+          "_translations": {
+            "value": {}
+          },
+          "action_list": [
+            {
+              "trigger": "click",
+              "action_id": "set_item",
+              "args": [],
+              "_raw": "click | set_item | _id: id_1, completed:false",
+              "_cleaned": "click | set_item | _id: id_1, completed:false",
+              "params": {
+                "_id": "id_1",
+                "completed": false
+              }
+            }
+          ],
+          "_nested_name": "data_items.id_button_@item.id",
+          "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "id_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.id_button_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ]
+          },
+          "_dynamicDependencies": {
+            "@item.id": [
+              "name",
+              "_nested_name"
+            ]
+          }
+        }
+      ],
+      "name": "data_items",
+      "_nested_name": "data_items",
+      "_dynamicFields": {
+        "value": [
+          {
+            "fullExpression": "@data.comp_data_items_list",
+            "matchedExpression": "@data.comp_data_items_list",
+            "type": "data",
+            "fieldName": "comp_data_items_list"
+          }
+        ]
+      },
+      "_dynamicDependencies": {
+        "@data.comp_data_items_list": [
+          "value"
+        ]
+      }
+    },
+    {
+      "type": "title",
+      "name": "example_5",
+      "value": "Example 5: Item readonly data",
+      "_translations": {
+        "value": {}
+      },
+      "_nested_name": "example_5"
+    },
+    {
+      "type": "data_items",
+      "value": "@data.comp_data_items_list",
+      "parameter_list": {
+        "filter": "@item.completed"
+      },
+      "rows": [
+        {
+          "type": "display_group",
+          "rows": [
+            {
+              "type": "text",
+              "value": "_index: @item._index",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_index: @item._index",
+                    "matchedExpression": "@item._index",
+                    "type": "item",
+                    "fieldName": "_index"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._index": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_id: @item._id",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_id: @item._id",
+                    "matchedExpression": "@item._id",
+                    "type": "item",
+                    "fieldName": "_id"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._id": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_first: @item._first",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_first: @item._first",
+                    "matchedExpression": "@item._first",
+                    "type": "item",
+                    "fieldName": "_first"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._first": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_last: @item._last",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_last: @item._last",
+                    "matchedExpression": "@item._last",
+                    "type": "item",
+                    "fieldName": "_last"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._last": [
+                  "value"
+                ]
+              }
+            }
+          ],
+          "name": "display_group",
+          "_nested_name": "data_items.display_group"
+        },
+        {
+          "type": "text",
+          "value": "Static row",
+          "_translations": {
+            "value": {}
+          },
+          "name": "text",
+          "_nested_name": "data_items.text"
+        }
+      ],
+      "name": "data_items",
+      "_nested_name": "data_items",
+      "_dynamicFields": {
+        "value": [
+          {
+            "fullExpression": "@data.comp_data_items_list",
+            "matchedExpression": "@data.comp_data_items_list",
+            "type": "data",
+            "fieldName": "comp_data_items_list"
+          }
+        ],
+        "parameter_list": {
+          "filter": [
+            {
+              "fullExpression": "@item.completed",
+              "matchedExpression": "@item.completed",
+              "type": "item",
+              "fieldName": "completed"
+            }
+          ]
+        }
+      },
+      "_dynamicDependencies": {
+        "@data.comp_data_items_list": [
+          "value"
+        ],
+        "@item.completed": [
+          "parameter_list.filter"
+        ]
+      }
     }
   ],
   "_xlsxPath": "component_sheets/component_data_items.xlsx"
diff --git a/app_data/sheets/template/component_demo/comp_drawer.json b/app_data/sheets/template/component_demo/comp_drawer.json
index aae2c5f..bb2863c 100644
--- a/app_data/sheets/template/component_demo/comp_drawer.json
+++ b/app_data/sheets/template/component_demo/comp_drawer.json
@@ -4,6 +4,87 @@
   "status": "released",
   "flow_subtype": "component_demo",
   "rows": [
+    {
+      "type": "title",
+      "value": "Drawer component",
+      "_translations": {
+        "value": {}
+      },
+      "name": "title",
+      "_nested_name": "title"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
+    {
+      "type": "text",
+      "value": "This template includes additional rows so that the content is scrollable, in order to test the drawer's functionality",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    },
     {
       "type": "drawer",
       "value": "Things to do",
diff --git a/app_data/sheets/template/component_demo/comp_html.json b/app_data/sheets/template/component_demo/comp_html.json
index 62f19bf..eb07cc0 100644
--- a/app_data/sheets/template/component_demo/comp_html.json
+++ b/app_data/sheets/template/component_demo/comp_html.json
@@ -12,6 +12,39 @@
         "value": {}
       },
       "_nested_name": "html_card"
+    },
+    {
+      "name": "red",
+      "value": "Red text",
+      "_translations": {
+        "value": {}
+      },
+      "type": "set_variable",
+      "_nested_name": "red"
+    },
+    {
+      "type": "html",
+      "name": "html_text",
+      "value": "<p style=\"color: red;\"> @local.red </p>",
+      "_translations": {
+        "value": {}
+      },
+      "_nested_name": "html_text",
+      "_dynamicFields": {
+        "value": [
+          {
+            "fullExpression": "<p style=\"color: red;\"> @local.red </p>",
+            "matchedExpression": "@local.red",
+            "type": "local",
+            "fieldName": "red"
+          }
+        ]
+      },
+      "_dynamicDependencies": {
+        "@local.red": [
+          "value"
+        ]
+      }
     }
   ],
   "_xlsxPath": "component_sheets/component_html.xlsx"
diff --git a/app_data/sheets/template/component_demo/comp_radio_group.json b/app_data/sheets/template/component_demo/comp_radio_group.json
index c4a8f3d..cc2fb2b 100644
--- a/app_data/sheets/template/component_demo/comp_radio_group.json
+++ b/app_data/sheets/template/component_demo/comp_radio_group.json
@@ -81,11 +81,11 @@
     {
       "name": "answer_list_3",
       "value": [
-        "name:name_var_1 | text:First | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_2 | text:Second | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_3 | text: Third | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_4 | text:Fourth | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_5 | text:Fourth | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg"
+        "name:name_var_1 | text:First | image:/plh_images/icons/heart.svg | image_checked: images/icons/globe_blue.svg",
+        "name:name_var_2 | text:Second | image:/plh_images/icons/heart.svg | image_checked: images/icons/globe_blue.svg",
+        "name:name_var_3 | text: Third | image:/plh_images/icons/heart.svg | image_checked: images/icons/globe_blue.svg",
+        "name:name_var_4 | text:Fourth | image:/plh_images/icons/heart.svg | image_checked: images/icons/globe_blue.svg",
+        "name:name_var_5 | text:Fourth | image:/plh_images/icons/heart.svg | image_checked: images/icons/globe_blue.svg"
       ],
       "type": "set_variable",
       "_nested_name": "answer_list_3"
@@ -93,11 +93,11 @@
     {
       "name": "answer_list_4",
       "value": [
-        "name:name_var_1 | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_2 | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_3 | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_4 | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg",
-        "name:name_var_5 | image:/plh_images/icons/heart.svg | image_checked: /plh_images/icons/tick.svg"
+        "name:name_var_1 | image: images/icons/heart_blue.svg | image_checked: images/icons/tick.svg",
+        "name:name_var_2 | image: images/icons/heart_blue.svg | image_checked: images/icons/tick.svg",
+        "name:name_var_3 | image: images/icons/heart_blue.svg | image_checked: images/icons/tick.svg",
+        "name:name_var_4 | image: images/icons/heart_blue.svg | image_checked: images/icons/tick.svg",
+        "name:name_var_5 | image: images/icons/heart_blue.svg | image_checked: images/icons/tick.svg"
       ],
       "type": "set_variable",
       "_nested_name": "answer_list_4"
@@ -105,11 +105,11 @@
     {
       "name": "answer_list_5",
       "value": [
-        "name:name_var_1 | image:/plh_images/icons/heart.svg",
-        "name:name_var_2 | image:/plh_images/icons/heart.svg",
-        "name:name_var_3 | image:/plh_images/icons/heart.svg",
-        "name:name_var_4 | image:/plh_images/icons/heart.svg",
-        "name:name_var_5 | image:/plh_images/icons/heart.svg"
+        "name:name_var_1 | image: images/icons/heart_blue.svg",
+        "name:name_var_2 | image: images/icons/heart_blue.svg",
+        "name:name_var_3 | image: images/icons/heart_blue.svg",
+        "name:name_var_4 | image: images/icons/heart_blue.svg",
+        "name:name_var_5 | image: images/icons/heart_blue.svg"
       ],
       "type": "set_variable",
       "_nested_name": "answer_list_5"
diff --git a/app_data/sheets/template/component_demo/comp_text.json b/app_data/sheets/template/component_demo/comp_text.json
index 7997c94..ec6f0a9 100644
--- a/app_data/sheets/template/component_demo/comp_text.json
+++ b/app_data/sheets/template/component_demo/comp_text.json
@@ -208,7 +208,7 @@
     {
       "type": "text",
       "name": "text_position_3",
-      "value": "Right aligned text",
+      "value": "Right aligned text. Debug",
       "_translations": {
         "value": {}
       },
diff --git a/app_data/sheets/template/debug/example_task_group_content.json b/app_data/sheets/template/debug/example_task_group_content.json
deleted file mode 100644
index 76b330f..0000000
--- a/app_data/sheets/template/debug/example_task_group_content.json
+++ /dev/null
@@ -1,99 +0,0 @@
-{
-  "flow_type": "template",
-  "flow_name": "example_task_group_content",
-  "status": "released",
-  "flow_subtype": "debug",
-  "rows": [
-    {
-      "name": "task_row",
-      "value": "task_row",
-      "_translations": {
-        "value": {}
-      },
-      "type": "set_variable",
-      "_nested_name": "task_row"
-    },
-    {
-      "type": "title",
-      "value": "@local.task_row.title",
-      "_translations": {
-        "value": {}
-      },
-      "name": "title",
-      "_nested_name": "title",
-      "_dynamicFields": {
-        "value": [
-          {
-            "fullExpression": "@local.task_row.title",
-            "matchedExpression": "@local.task_row.title",
-            "type": "local",
-            "fieldName": "task_row"
-          }
-        ]
-      },
-      "_dynamicDependencies": {
-        "@local.task_row.title": [
-          "value"
-        ]
-      }
-    },
-    {
-      "type": "text",
-      "value": "@local.task_row.description",
-      "_translations": {
-        "value": {}
-      },
-      "name": "text",
-      "_nested_name": "text",
-      "_dynamicFields": {
-        "value": [
-          {
-            "fullExpression": "@local.task_row.description",
-            "matchedExpression": "@local.task_row.description",
-            "type": "local",
-            "fieldName": "task_row"
-          }
-        ]
-      },
-      "_dynamicDependencies": {
-        "@local.task_row.description": [
-          "value"
-        ]
-      }
-    },
-    {
-      "type": "text",
-      "value": "example text",
-      "_translations": {
-        "value": {}
-      },
-      "name": "text",
-      "_nested_name": "text"
-    },
-    {
-      "type": "text",
-      "value": "@local.task_row",
-      "_translations": {
-        "value": {}
-      },
-      "name": "text",
-      "_nested_name": "text",
-      "_dynamicFields": {
-        "value": [
-          {
-            "fullExpression": "@local.task_row",
-            "matchedExpression": "@local.task_row",
-            "type": "local",
-            "fieldName": "task_row"
-          }
-        ]
-      },
-      "_dynamicDependencies": {
-        "@local.task_row": [
-          "value"
-        ]
-      }
-    }
-  ],
-  "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
-}
\ No newline at end of file
diff --git a/app_data/sheets/template/debug/example_task_group_stepper.json b/app_data/sheets/template/debug/example_task_group_stepper.json
index 3aa2c6a..8ed7505 100644
--- a/app_data/sheets/template/debug/example_task_group_stepper.json
+++ b/app_data/sheets/template/debug/example_task_group_stepper.json
@@ -6,48 +6,13 @@
   "rows": [
     {
       "name": "task_group",
-      "value": "feat_task_group_1_data",
+      "value": "example_tg_stepper_data",
       "_translations": {
         "value": {}
       },
       "type": "set_variable",
       "_nested_name": "task_group"
     },
-    {
-      "name": "task_group_active_task_field",
-      "value": "feat_task_group_1_data_active_task",
-      "_translations": {
-        "value": {}
-      },
-      "type": "set_variable",
-      "_nested_name": "task_group_active_task_field"
-    },
-    {
-      "type": "task_progress_bar",
-      "parameter_list": {
-        "task_group_data": "@local.task_group",
-        "completed_field": "comp_task_progress_bar_completed"
-      },
-      "name": "task_progress_bar",
-      "_nested_name": "task_progress_bar",
-      "_dynamicFields": {
-        "parameter_list": {
-          "task_group_data": [
-            {
-              "fullExpression": "@local.task_group",
-              "matchedExpression": "@local.task_group",
-              "type": "local",
-              "fieldName": "task_group"
-            }
-          ]
-        }
-      },
-      "_dynamicDependencies": {
-        "@local.task_group": [
-          "parameter_list.task_group_data"
-        ]
-      }
-    },
     {
       "type": "data_items",
       "value": "@local.task_group",
@@ -78,12 +43,20 @@
         },
         {
           "type": "template",
+          "name": "@local.template_name",
           "value": "@local.template_name",
           "condition": "@item.active",
           "rows": [],
-          "name": "@local.template_name",
           "_nested_name": "data_items.@local.template_name",
           "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "@local.template_name",
+                "matchedExpression": "@local.template_name",
+                "type": "local",
+                "fieldName": "template_name"
+              }
+            ],
             "value": [
               {
                 "fullExpression": "@local.template_name",
@@ -100,14 +73,6 @@
                 "fieldName": "active"
               }
             ],
-            "name": [
-              {
-                "fullExpression": "@local.template_name",
-                "matchedExpression": "@local.template_name",
-                "type": "local",
-                "fieldName": "template_name"
-              }
-            ],
             "_nested_name": [
               {
                 "fullExpression": "data_items.@local.template_name",
@@ -119,8 +84,8 @@
           },
           "_dynamicDependencies": {
             "@local.template_name": [
-              "value",
               "name",
+              "value",
               "_nested_name"
             ],
             "@item.active": [
@@ -129,18 +94,13 @@
           }
         },
         {
-          "name": "nav_forwards",
+          "type": "button",
+          "name": "nav_forwards_@item.id",
+          "value": "Next",
+          "_translations": {
+            "value": {}
+          },
           "action_list": [
-            {
-              "trigger": "click",
-              "action_id": "set_item",
-              "args": [],
-              "_raw": "click | set_item | completed:true",
-              "_cleaned": "click | set_item | completed:true",
-              "params": {
-                "completed": true
-              }
-            },
             {
               "trigger": "click",
               "action_id": "set_item",
@@ -151,183 +111,209 @@
                 "active": false
               }
             },
-            {
-              "trigger": "click",
-              "action_id": "set_next_item",
-              "args": [],
-              "_raw": "click | set_next_item | active:true",
-              "_cleaned": "click | set_next_item | active:true",
-              "params": {
-                "active": true
-              }
-            }
-          ],
-          "type": "set_variable",
-          "_nested_name": "data_items.nav_forwards"
-        },
-        {
-          "name": "nav_forwards",
-          "action_list": [
             {
               "trigger": "click",
               "action_id": "set_item",
               "args": [],
-              "_raw": "click | set_item | completed:true",
-              "_cleaned": "click | set_item | completed:true",
-              "params": {
-                "completed": true
-              }
-            },
-            {
-              "trigger": "click",
-              "action_id": "set_active_item",
-              "args": [],
-              "_raw": "click | set_active_item | @item.index + 1",
-              "_cleaned": "click | set_active_item | @item.index + 1",
+              "_raw": "click | set_item | _index: @item._index + 1, active:true",
+              "_cleaned": "click | set_item | _index: @item._index + 1, active:true",
               "params": {
-                "@item": {}
+                "_index": "@item._index + 1",
+                "active": true
               }
             }
           ],
-          "type": "set_variable",
-          "_nested_name": "data_items.nav_forwards",
+          "condition": "@item.active && !@item._last",
+          "_nested_name": "data_items.nav_forwards_@item.id",
           "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "nav_forwards_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
             "action_list": {
               "1": {
                 "_raw": [
                   {
-                    "fullExpression": "click | set_active_item | @item.index + 1",
-                    "matchedExpression": "@item.index",
+                    "fullExpression": "click | set_item | _index: @item._index + 1, active:true",
+                    "matchedExpression": "@item._index",
                     "type": "item",
-                    "fieldName": "index"
+                    "fieldName": "_index"
                   }
                 ],
                 "_cleaned": [
                   {
-                    "fullExpression": "click | set_active_item | @item.index + 1",
-                    "matchedExpression": "@item.index",
+                    "fullExpression": "click | set_item | _index: @item._index + 1, active:true",
+                    "matchedExpression": "@item._index",
                     "type": "item",
-                    "fieldName": "index"
+                    "fieldName": "_index"
                   }
-                ]
+                ],
+                "params": {
+                  "_index": [
+                    {
+                      "fullExpression": "@item._index + 1",
+                      "matchedExpression": "@item._index",
+                      "type": "item",
+                      "fieldName": "_index"
+                    }
+                  ]
+                }
               }
-            }
+            },
+            "condition": [
+              {
+                "fullExpression": "@item.active && !@item._last",
+                "matchedExpression": "@item.active",
+                "type": "item",
+                "fieldName": "active"
+              },
+              {
+                "fullExpression": "@item.active && !@item._last",
+                "matchedExpression": "!@item._last",
+                "type": "item",
+                "fieldName": "_last"
+              }
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.nav_forwards_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ]
           },
           "_dynamicDependencies": {
-            "@item.index": [
+            "@item.id": [
+              "name",
+              "_nested_name"
+            ],
+            "@item._index": [
               "action_list.1._raw",
-              "action_list.1._cleaned"
+              "action_list.1._cleaned",
+              "action_list.1.params._index"
+            ],
+            "@item.active": [
+              "condition"
+            ],
+            "!@item._last": [
+              "condition"
             ]
           }
         },
         {
-          "name": "nav_forwards",
+          "type": "button",
+          "name": "nav_backwards_@item.id",
+          "value": "Back",
+          "_translations": {
+            "value": {}
+          },
           "action_list": [
             {
               "trigger": "click",
               "action_id": "set_item",
               "args": [],
-              "_raw": "click | set_item | completed:true",
-              "_cleaned": "click | set_item | completed:true",
+              "_raw": "click | set_item | active:false",
+              "_cleaned": "click | set_item | active:false",
               "params": {
-                "completed": true
+                "active": false
               }
             },
             {
               "trigger": "click",
-              "action_id": "set_item_radio",
+              "action_id": "set_item",
               "args": [],
-              "_raw": "click | set_item_radio | active: @item.index + 1",
-              "_cleaned": "click | set_item_radio | active: @item.index + 1",
+              "_raw": "click | set_item | _index: @item._index - 1, active:true",
+              "_cleaned": "click | set_item | _index: @item._index - 1, active:true",
               "params": {
-                "active": "@item.index + 1"
+                "_index": "@item._index - 1",
+                "active": true
               }
             }
           ],
-          "type": "set_variable",
-          "_nested_name": "data_items.nav_forwards",
+          "condition": "@item.active && !@item._first",
+          "_nested_name": "data_items.nav_backwards_@item.id",
           "_dynamicFields": {
+            "name": [
+              {
+                "fullExpression": "nav_backwards_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
+              }
+            ],
             "action_list": {
               "1": {
                 "_raw": [
                   {
-                    "fullExpression": "click | set_item_radio | active: @item.index + 1",
-                    "matchedExpression": "@item.index",
+                    "fullExpression": "click | set_item | _index: @item._index - 1, active:true",
+                    "matchedExpression": "@item._index",
                     "type": "item",
-                    "fieldName": "index"
+                    "fieldName": "_index"
                   }
                 ],
                 "_cleaned": [
                   {
-                    "fullExpression": "click | set_item_radio | active: @item.index + 1",
-                    "matchedExpression": "@item.index",
+                    "fullExpression": "click | set_item | _index: @item._index - 1, active:true",
+                    "matchedExpression": "@item._index",
                     "type": "item",
-                    "fieldName": "index"
+                    "fieldName": "_index"
                   }
                 ],
                 "params": {
-                  "active": [
+                  "_index": [
                     {
-                      "fullExpression": "@item.index + 1",
-                      "matchedExpression": "@item.index",
+                      "fullExpression": "@item._index - 1",
+                      "matchedExpression": "@item._index",
                       "type": "item",
-                      "fieldName": "index"
+                      "fieldName": "_index"
                     }
                   ]
                 }
               }
-            }
-          },
-          "_dynamicDependencies": {
-            "@item.index": [
-              "action_list.1._raw",
-              "action_list.1._cleaned",
-              "action_list.1.params.active"
-            ]
-          }
-        },
-        {
-          "name": "nav_backwards",
-          "action_list": [
-            {
-              "trigger": "click",
-              "action_id": "set_active_item",
-              "args": [],
-              "_raw": "click | set_active_item | @item.index - 1",
-              "_cleaned": "click | set_active_item | @item.index - 1",
-              "params": {
-                "@item": {}
+            },
+            "condition": [
+              {
+                "fullExpression": "@item.active && !@item._first",
+                "matchedExpression": "@item.active",
+                "type": "item",
+                "fieldName": "active"
+              },
+              {
+                "fullExpression": "@item.active && !@item._first",
+                "matchedExpression": "!@item._first",
+                "type": "item",
+                "fieldName": "_first"
               }
-            }
-          ],
-          "type": "set_variable",
-          "_nested_name": "data_items.nav_backwards",
-          "_dynamicFields": {
-            "action_list": {
-              "0": {
-                "_raw": [
-                  {
-                    "fullExpression": "click | set_active_item | @item.index - 1",
-                    "matchedExpression": "@item.index",
-                    "type": "item",
-                    "fieldName": "index"
-                  }
-                ],
-                "_cleaned": [
-                  {
-                    "fullExpression": "click | set_active_item | @item.index - 1",
-                    "matchedExpression": "@item.index",
-                    "type": "item",
-                    "fieldName": "index"
-                  }
-                ]
+            ],
+            "_nested_name": [
+              {
+                "fullExpression": "data_items.nav_backwards_@item.id",
+                "matchedExpression": "@item.id",
+                "type": "item",
+                "fieldName": "id"
               }
-            }
+            ]
           },
           "_dynamicDependencies": {
-            "@item.index": [
-              "action_list.0._raw",
-              "action_list.0._cleaned"
+            "@item.id": [
+              "name",
+              "_nested_name"
+            ],
+            "@item._index": [
+              "action_list.1._raw",
+              "action_list.1._cleaned",
+              "action_list.1.params._index"
+            ],
+            "@item.active": [
+              "condition"
+            ],
+            "!@item._first": [
+              "condition"
             ]
           }
         }
@@ -349,6 +335,280 @@
           "value"
         ]
       }
+    },
+    {
+      "name": "nav_forwards",
+      "action_list": [
+        {
+          "trigger": "click",
+          "action_id": "set_item",
+          "args": [],
+          "_raw": "click | set_item | completed:true",
+          "_cleaned": "click | set_item | completed:true",
+          "params": {
+            "completed": true
+          }
+        },
+        {
+          "trigger": "click",
+          "action_id": "set_active_item",
+          "args": [],
+          "_raw": "click | set_active_item | @item.index + 1",
+          "_cleaned": "click | set_active_item | @item.index + 1",
+          "params": {
+            "@item": {}
+          }
+        }
+      ],
+      "type": "set_variable",
+      "_nested_name": "nav_forwards",
+      "_dynamicFields": {
+        "action_list": {
+          "1": {
+            "_raw": [
+              {
+                "fullExpression": "click | set_active_item | @item.index + 1",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ],
+            "_cleaned": [
+              {
+                "fullExpression": "click | set_active_item | @item.index + 1",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ]
+          }
+        }
+      },
+      "_dynamicDependencies": {
+        "@item.index": [
+          "action_list.1._raw",
+          "action_list.1._cleaned"
+        ]
+      }
+    },
+    {
+      "name": "nav_backwards",
+      "action_list": [
+        {
+          "trigger": "click",
+          "action_id": "set_active_item",
+          "args": [],
+          "_raw": "click | set_active_item | @item.index - 1",
+          "_cleaned": "click | set_active_item | @item.index - 1",
+          "params": {
+            "@item": {}
+          }
+        }
+      ],
+      "type": "set_variable",
+      "_nested_name": "nav_backwards",
+      "_dynamicFields": {
+        "action_list": {
+          "0": {
+            "_raw": [
+              {
+                "fullExpression": "click | set_active_item | @item.index - 1",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ],
+            "_cleaned": [
+              {
+                "fullExpression": "click | set_active_item | @item.index - 1",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ]
+          }
+        }
+      },
+      "_dynamicDependencies": {
+        "@item.index": [
+          "action_list.0._raw",
+          "action_list.0._cleaned"
+        ]
+      }
+    },
+    {
+      "name": "nav_forwards",
+      "value": "Next",
+      "_translations": {
+        "value": {}
+      },
+      "action_list": [
+        {
+          "trigger": "click",
+          "action_id": "set_item",
+          "args": [],
+          "_raw": "click | set_item | completed:true",
+          "_cleaned": "click | set_item | completed:true",
+          "params": {
+            "completed": true
+          }
+        },
+        {
+          "trigger": "click",
+          "action_id": "set_item",
+          "args": [],
+          "_raw": "click | set_item | active:false",
+          "_cleaned": "click | set_item | active:false",
+          "params": {
+            "active": false
+          }
+        },
+        {
+          "trigger": "click",
+          "action_id": "set_item_at_index",
+          "args": [],
+          "_raw": "click | set_item_at_index | @item.index + 1 | active:true",
+          "_cleaned": "click | set_item_at_index | @item.index + 1 | active:true",
+          "params": {
+            "@item": {}
+          }
+        }
+      ],
+      "type": "set_variable",
+      "_nested_name": "nav_forwards",
+      "_dynamicFields": {
+        "action_list": {
+          "2": {
+            "_raw": [
+              {
+                "fullExpression": "click | set_item_at_index | @item.index + 1 | active:true",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ],
+            "_cleaned": [
+              {
+                "fullExpression": "click | set_item_at_index | @item.index + 1 | active:true",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ]
+          }
+        }
+      },
+      "_dynamicDependencies": {
+        "@item.index": [
+          "action_list.2._raw",
+          "action_list.2._cleaned"
+        ]
+      }
+    },
+    {
+      "name": "nav_forwards",
+      "value": "Next",
+      "_translations": {
+        "value": {}
+      },
+      "action_list": [
+        {
+          "trigger": "click",
+          "action_id": "set_item",
+          "args": [],
+          "_raw": "click | set_item | completed:true, active:false",
+          "_cleaned": "click | set_item | completed:true, active:false",
+          "params": {
+            "completed": true,
+            "active": false
+          }
+        },
+        {
+          "trigger": "click",
+          "action_id": "set_item_at_index",
+          "args": [],
+          "_raw": "click | set_item_at_index | @item.index + 1 | active:true",
+          "_cleaned": "click | set_item_at_index | @item.index + 1 | active:true",
+          "params": {
+            "@item": {}
+          }
+        }
+      ],
+      "type": "set_variable",
+      "_nested_name": "nav_forwards",
+      "_dynamicFields": {
+        "action_list": {
+          "1": {
+            "_raw": [
+              {
+                "fullExpression": "click | set_item_at_index | @item.index + 1 | active:true",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ],
+            "_cleaned": [
+              {
+                "fullExpression": "click | set_item_at_index | @item.index + 1 | active:true",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ]
+          }
+        }
+      },
+      "_dynamicDependencies": {
+        "@item.index": [
+          "action_list.1._raw",
+          "action_list.1._cleaned"
+        ]
+      }
+    },
+    {
+      "name": "nav_backwards",
+      "action_list": [
+        {
+          "trigger": "click",
+          "action_id": "set_active_item",
+          "args": [],
+          "_raw": "click | set_active_item | @item.index - 1",
+          "_cleaned": "click | set_active_item | @item.index - 1",
+          "params": {
+            "@item": {}
+          }
+        }
+      ],
+      "type": "set_variable",
+      "_nested_name": "nav_backwards",
+      "_dynamicFields": {
+        "action_list": {
+          "0": {
+            "_raw": [
+              {
+                "fullExpression": "click | set_active_item | @item.index - 1",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ],
+            "_cleaned": [
+              {
+                "fullExpression": "click | set_active_item | @item.index - 1",
+                "matchedExpression": "@item.index",
+                "type": "item",
+                "fieldName": "index"
+              }
+            ]
+          }
+        }
+      },
+      "_dynamicDependencies": {
+        "@item.index": [
+          "action_list.0._raw",
+          "action_list.0._cleaned"
+        ]
+      }
     }
   ],
   "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
diff --git a/app_data/sheets/template/debug/feature_display_group.json b/app_data/sheets/template/debug/feature_display_group.json
index b926efa..7fa8fb3 100644
--- a/app_data/sheets/template/debug/feature_display_group.json
+++ b/app_data/sheets/template/debug/feature_display_group.json
@@ -4,6 +4,69 @@
   "status": "released",
   "flow_subtype": "debug",
   "rows": [
+    {
+      "type": "display_group",
+      "name": "dg_variant_gray",
+      "exclude_from_translation": true,
+      "parameter_list": {
+        "variant": "box_gray"
+      },
+      "rows": [
+        {
+          "type": "title",
+          "value": "Variant: gray",
+          "_translations": {
+            "value": {}
+          },
+          "exclude_from_translation": true,
+          "name": "title",
+          "_nested_name": "dg_variant_gray.title"
+        }
+      ],
+      "_nested_name": "dg_variant_gray"
+    },
+    {
+      "type": "display_group",
+      "name": "dg_variant_primary",
+      "exclude_from_translation": true,
+      "parameter_list": {
+        "variant": "box_primary"
+      },
+      "rows": [
+        {
+          "type": "title",
+          "value": "Variant: primary",
+          "_translations": {
+            "value": {}
+          },
+          "exclude_from_translation": true,
+          "name": "title",
+          "_nested_name": "dg_variant_primary.title"
+        }
+      ],
+      "_nested_name": "dg_variant_primary"
+    },
+    {
+      "type": "display_group",
+      "name": "dg_variant_secondary",
+      "exclude_from_translation": true,
+      "parameter_list": {
+        "variant": "box_secondary"
+      },
+      "rows": [
+        {
+          "type": "title",
+          "value": "Variant: secondary",
+          "_translations": {
+            "value": {}
+          },
+          "exclude_from_translation": true,
+          "name": "title",
+          "_nested_name": "dg_variant_secondary.title"
+        }
+      ],
+      "_nested_name": "dg_variant_secondary"
+    },
     {
       "type": "display_group",
       "name": "example_dp_gr",
diff --git a/app_data/sheets/template/debug/tg_1_subtask_3.json b/app_data/sheets/template/debug/tg_1_subtask_3.json
new file mode 100644
index 0000000..00ce6d5
--- /dev/null
+++ b/app_data/sheets/template/debug/tg_1_subtask_3.json
@@ -0,0 +1,27 @@
+{
+  "flow_type": "template",
+  "flow_name": "tg_1_subtask_3",
+  "status": "released",
+  "flow_subtype": "debug",
+  "rows": [
+    {
+      "type": "title",
+      "value": "Task Group 1, Subtask 3",
+      "_translations": {
+        "value": {}
+      },
+      "name": "title",
+      "_nested_name": "title"
+    },
+    {
+      "type": "text",
+      "value": "Custom content for Task Group 1, Subtask 3",
+      "_translations": {
+        "value": {}
+      },
+      "name": "text",
+      "_nested_name": "text"
+    }
+  ],
+  "_xlsxPath": "example_sheets/example_task_group_stepper.xlsx"
+}
\ No newline at end of file
diff --git a/app_data/sheets/template/debug_data_items_r_template.json b/app_data/sheets/template/debug_data_items_r_template.json
new file mode 100644
index 0000000..ed7fe9a
--- /dev/null
+++ b/app_data/sheets/template/debug_data_items_r_template.json
@@ -0,0 +1,17 @@
+{
+  "flow_type": "template",
+  "flow_name": "debug_data_items_r_template",
+  "status": "released",
+  "rows": [
+    {
+      "type": "title",
+      "value": "Nested template",
+      "_translations": {
+        "value": {}
+      },
+      "name": "title",
+      "_nested_name": "title"
+    }
+  ],
+  "_xlsxPath": "debug_sheets/debug_data_items_nested_template.xlsx"
+}
\ No newline at end of file
diff --git a/app_data/sheets/template/debug_data_items_rendering.json b/app_data/sheets/template/debug_data_items_rendering.json
new file mode 100644
index 0000000..9b7abd4
--- /dev/null
+++ b/app_data/sheets/template/debug_data_items_rendering.json
@@ -0,0 +1,47 @@
+{
+  "flow_type": "template",
+  "flow_name": "debug_data_items_rendering",
+  "status": "released",
+  "rows": [
+    {
+      "name": "iterator",
+      "value": "debug_data_items_rendering_data",
+      "_translations": {
+        "value": {}
+      },
+      "type": "set_variable",
+      "_nested_name": "iterator"
+    },
+    {
+      "type": "data_items",
+      "value": "@local.iterator",
+      "rows": [
+        {
+          "type": "template",
+          "name": "debug_data_items_r_template",
+          "value": "debug_data_items_r_template",
+          "rows": [],
+          "_nested_name": "data_items.debug_data_items_r_template"
+        }
+      ],
+      "name": "data_items",
+      "_nested_name": "data_items",
+      "_dynamicFields": {
+        "value": [
+          {
+            "fullExpression": "@local.iterator",
+            "matchedExpression": "@local.iterator",
+            "type": "local",
+            "fieldName": "iterator"
+          }
+        ]
+      },
+      "_dynamicDependencies": {
+        "@local.iterator": [
+          "value"
+        ]
+      }
+    }
+  ],
+  "_xlsxPath": "debug_sheets/debug_data_items_nested_template.xlsx"
+}
\ No newline at end of file
diff --git a/app_data/sheets/template/feat_footer.json b/app_data/sheets/template/feat_footer.json
new file mode 100644
index 0000000..fa28fa8
--- /dev/null
+++ b/app_data/sheets/template/feat_footer.json
@@ -0,0 +1,43 @@
+{
+  "flow_type": "template",
+  "flow_name": "feat_footer",
+  "status": "released",
+  "rows": [
+    {
+      "name": "button_list",
+      "value": [
+        "image: images/icons/house_white.svg | target_template: home_screen",
+        "image: images/icons/star_white.svg | target_template: comp_button",
+        "image: images/icons/book_white.svg | target_template: comp_button"
+      ],
+      "type": "set_variable",
+      "_nested_name": "button_list"
+    },
+    {
+      "type": "navigation_bar",
+      "parameter_list": {
+        "button_list": "@local.button_list"
+      },
+      "name": "navigation_bar",
+      "_nested_name": "navigation_bar",
+      "_dynamicFields": {
+        "parameter_list": {
+          "button_list": [
+            {
+              "fullExpression": "@local.button_list",
+              "matchedExpression": "@local.button_list",
+              "type": "local",
+              "fieldName": "button_list"
+            }
+          ]
+        }
+      },
+      "_dynamicDependencies": {
+        "@local.button_list": [
+          "parameter_list.button_list"
+        ]
+      }
+    }
+  ],
+  "_xlsxPath": "feature_sheets/to_be_sorted/feature_footer.xlsx"
+}
\ No newline at end of file
diff --git a/app_data/sheets/template/temp_data_items.json b/app_data/sheets/template/temp_data_items.json
new file mode 100644
index 0000000..e04dad8
--- /dev/null
+++ b/app_data/sheets/template/temp_data_items.json
@@ -0,0 +1,487 @@
+{
+  "flow_type": "template",
+  "flow_name": "temp_data_items",
+  "status": "released",
+  "rows": [
+    {
+      "type": "title",
+      "name": "example_5",
+      "value": "Example 5: Item readonly data",
+      "_translations": {
+        "value": {}
+      },
+      "_nested_name": "example_5"
+    },
+    {
+      "type": "title",
+      "value": "Completed",
+      "_translations": {
+        "value": {}
+      },
+      "name": "title",
+      "_nested_name": "title"
+    },
+    {
+      "type": "data_items",
+      "value": "@data.comp_data_items_list",
+      "parameter_list": {
+        "filter": "@item.completed"
+      },
+      "rows": [
+        {
+          "type": "display_group",
+          "rows": [
+            {
+              "type": "text",
+              "value": "_index: @item._index",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_index: @item._index",
+                    "matchedExpression": "@item._index",
+                    "type": "item",
+                    "fieldName": "_index"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._index": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_id: @item._id",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_id: @item._id",
+                    "matchedExpression": "@item._id",
+                    "type": "item",
+                    "fieldName": "_id"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._id": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_first: @item._first",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_first: @item._first",
+                    "matchedExpression": "@item._first",
+                    "type": "item",
+                    "fieldName": "_first"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._first": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_last: @item._last",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_last: @item._last",
+                    "matchedExpression": "@item._last",
+                    "type": "item",
+                    "fieldName": "_last"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._last": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "completed: @item.completed",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "completed: @item.completed",
+                    "matchedExpression": "@item.completed",
+                    "type": "item",
+                    "fieldName": "completed"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item.completed": [
+                  "value"
+                ]
+              }
+            }
+          ],
+          "name": "display_group",
+          "_nested_name": "data_items.display_group"
+        },
+        {
+          "type": "button",
+          "value": "Toggle Item Completed",
+          "_translations": {
+            "value": {}
+          },
+          "action_list": [
+            {
+              "trigger": "click",
+              "action_id": "set_item",
+              "args": [],
+              "_raw": "click | set_item | completed: !@item.completed",
+              "_cleaned": "click | set_item | completed: !@item.completed",
+              "params": {
+                "completed": "!@item.completed"
+              }
+            }
+          ],
+          "name": "button",
+          "_nested_name": "data_items.button",
+          "_dynamicFields": {
+            "action_list": {
+              "0": {
+                "_raw": [
+                  {
+                    "fullExpression": "click | set_item | completed: !@item.completed",
+                    "matchedExpression": "!@item.completed",
+                    "type": "item",
+                    "fieldName": "completed"
+                  }
+                ],
+                "_cleaned": [
+                  {
+                    "fullExpression": "click | set_item | completed: !@item.completed",
+                    "matchedExpression": "!@item.completed",
+                    "type": "item",
+                    "fieldName": "completed"
+                  }
+                ],
+                "params": {
+                  "completed": [
+                    {
+                      "fullExpression": "!@item.completed",
+                      "matchedExpression": "!@item.completed",
+                      "type": "item",
+                      "fieldName": "completed"
+                    }
+                  ]
+                }
+              }
+            }
+          },
+          "_dynamicDependencies": {
+            "!@item.completed": [
+              "action_list.0._raw",
+              "action_list.0._cleaned",
+              "action_list.0.params.completed"
+            ]
+          }
+        }
+      ],
+      "name": "data_items",
+      "_nested_name": "data_items",
+      "_dynamicFields": {
+        "value": [
+          {
+            "fullExpression": "@data.comp_data_items_list",
+            "matchedExpression": "@data.comp_data_items_list",
+            "type": "data",
+            "fieldName": "comp_data_items_list"
+          }
+        ],
+        "parameter_list": {
+          "filter": [
+            {
+              "fullExpression": "@item.completed",
+              "matchedExpression": "@item.completed",
+              "type": "item",
+              "fieldName": "completed"
+            }
+          ]
+        }
+      },
+      "_dynamicDependencies": {
+        "@data.comp_data_items_list": [
+          "value"
+        ],
+        "@item.completed": [
+          "parameter_list.filter"
+        ]
+      }
+    },
+    {
+      "type": "title",
+      "value": "Not Completed",
+      "_translations": {
+        "value": {}
+      },
+      "name": "title",
+      "_nested_name": "title"
+    },
+    {
+      "type": "data_items",
+      "value": "@data.comp_data_items_list",
+      "parameter_list": {
+        "filter": "!@item.completed"
+      },
+      "rows": [
+        {
+          "type": "display_group",
+          "rows": [
+            {
+              "type": "text",
+              "value": "_index: @item._index",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_index: @item._index",
+                    "matchedExpression": "@item._index",
+                    "type": "item",
+                    "fieldName": "_index"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._index": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_id: @item._id",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_id: @item._id",
+                    "matchedExpression": "@item._id",
+                    "type": "item",
+                    "fieldName": "_id"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._id": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_first: @item._first",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_first: @item._first",
+                    "matchedExpression": "@item._first",
+                    "type": "item",
+                    "fieldName": "_first"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._first": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "_last: @item._last",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "_last: @item._last",
+                    "matchedExpression": "@item._last",
+                    "type": "item",
+                    "fieldName": "_last"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item._last": [
+                  "value"
+                ]
+              }
+            },
+            {
+              "type": "text",
+              "value": "completed: @item.completed",
+              "_translations": {
+                "value": {}
+              },
+              "name": "text",
+              "_nested_name": "data_items.display_group.text",
+              "_dynamicFields": {
+                "value": [
+                  {
+                    "fullExpression": "completed: @item.completed",
+                    "matchedExpression": "@item.completed",
+                    "type": "item",
+                    "fieldName": "completed"
+                  }
+                ]
+              },
+              "_dynamicDependencies": {
+                "@item.completed": [
+                  "value"
+                ]
+              }
+            }
+          ],
+          "name": "display_group",
+          "_nested_name": "data_items.display_group"
+        },
+        {
+          "type": "button",
+          "value": "Toggle Item Completed",
+          "_translations": {
+            "value": {}
+          },
+          "action_list": [
+            {
+              "trigger": "click",
+              "action_id": "set_item",
+              "args": [],
+              "_raw": "click | set_item | completed: !@item.completed",
+              "_cleaned": "click | set_item | completed: !@item.completed",
+              "params": {
+                "completed": "!@item.completed"
+              }
+            }
+          ],
+          "name": "button",
+          "_nested_name": "data_items.button",
+          "_dynamicFields": {
+            "action_list": {
+              "0": {
+                "_raw": [
+                  {
+                    "fullExpression": "click | set_item | completed: !@item.completed",
+                    "matchedExpression": "!@item.completed",
+                    "type": "item",
+                    "fieldName": "completed"
+                  }
+                ],
+                "_cleaned": [
+                  {
+                    "fullExpression": "click | set_item | completed: !@item.completed",
+                    "matchedExpression": "!@item.completed",
+                    "type": "item",
+                    "fieldName": "completed"
+                  }
+                ],
+                "params": {
+                  "completed": [
+                    {
+                      "fullExpression": "!@item.completed",
+                      "matchedExpression": "!@item.completed",
+                      "type": "item",
+                      "fieldName": "completed"
+                    }
+                  ]
+                }
+              }
+            }
+          },
+          "_dynamicDependencies": {
+            "!@item.completed": [
+              "action_list.0._raw",
+              "action_list.0._cleaned",
+              "action_list.0.params.completed"
+            ]
+          }
+        }
+      ],
+      "name": "data_items",
+      "_nested_name": "data_items",
+      "_dynamicFields": {
+        "value": [
+          {
+            "fullExpression": "@data.comp_data_items_list",
+            "matchedExpression": "@data.comp_data_items_list",
+            "type": "data",
+            "fieldName": "comp_data_items_list"
+          }
+        ],
+        "parameter_list": {
+          "filter": [
+            {
+              "fullExpression": "!@item.completed",
+              "matchedExpression": "!@item.completed",
+              "type": "item",
+              "fieldName": "completed"
+            }
+          ]
+        }
+      },
+      "_dynamicDependencies": {
+        "@data.comp_data_items_list": [
+          "value"
+        ],
+        "!@item.completed": [
+          "parameter_list.filter"
+        ]
+      }
+    }
+  ],
+  "_xlsxPath": "component_sheets/component_data_items.xlsx"
+}
\ No newline at end of file
diff --git a/config.ts b/config.ts
index 984face..967272d 100644
--- a/config.ts
+++ b/config.ts
@@ -15,7 +15,7 @@ config.web.favicon_asset = "images/icons/favicon.svg";
 
 config.git = {
   content_repo: "https://github.com/IDEMSInternational/app-debug-content.git",
-  content_tag_latest: "1.2.10",
+  content_tag_latest: "1.2.11",
 };
 
 config.app_data.output_path = "./app_data";
@@ -43,23 +43,26 @@ config.error_logging = {
 
 // Override any app constants here
 config.app_config.APP_HEADER_DEFAULTS.title = "Debug App";
+config.app_config.APP_HEADER_DEFAULTS.collapse = true;
+config.app_config.APP_HEADER_DEFAULTS.colour = "primary";
+config.app_config.APP_HEADER_DEFAULTS.variant = "default";
+
+config.app_config.APP_FOOTER_DEFAULTS.templateName = "feat_footer"
+
 config.app_config.APP_SIDEMENU_DEFAULTS.title = "Debug App";
+
 config.app_config.APP_SKINS.defaultSkinName = SKINS.defaultSkin.name
 config.app_config.APP_SKINS.available = [SKINS.defaultSkin, SKINS.debug]
+
 config.app_config.APP_THEMES.available = ["default", "professional"]
 config.app_config.APP_THEMES.defaultThemeName = "default"
 
-// TODO: replace with property assignment syntax after merge of #2176 on code repo
-config.app_config.TASKS = {
-  enabled: true,
-  taskGroupsListName: "feat_task_groups",
-  highlightedTaskField: "_task_highlighted_group_id"
-}
-// config.app_config.TASKS.enabled = true
-// config.app_config.TASKS.taskGroupsListName = "feat_task_groups"
+config.app_config.TASKS.enabled = true
+config.app_config.TASKS.taskGroupsListName = "feat_task_groups"
 
 config.app_config.APP_UPDATES.enabled = true
 config.app_config.APP_UPDATES.completeUpdateTemplate = "app_update_complete"
+
 config.app_config.APP_AUTHENTICATION_DEFAULTS.enforceLogin = false
 config.app_config.APP_AUTHENTICATION_DEFAULTS.signInTemplate = "example_google_auth"