Provide additional data context from form blocks

packages/client/src/components/app/blocks/MultiStepFormblock.svelte

@@ -5,7 +5,7 @@
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
-  import { writable } from "svelte/store"
+  import { get, writable } from "svelte/store"
 
   export let actionType
   export let rowId
@@ -15,7 +15,7 @@
   export let buttonPosition = "bottom"
   export let size
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
   const component = getContext("component")
   const context = getContext("context")
 
@@ -45,6 +45,16 @@
   $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
   $: updateCurrentStep(enrichedSteps, $builderStore, $component)
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const id = get(component).id
+    const rows = get(context)[`${id}-provider`]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
+
   const updateCurrentStep = (steps, builderStore, component) => {
     const { componentId, step } = builderStore.metadata || {}
 

packages/client/src/components/app/blocks/form/FormBlock.svelte

@@ -3,6 +3,7 @@
   import InnerFormBlock from "./InnerFormBlock.svelte"
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./FormBlockWrapper.svelte"
+  import { get } from "svelte/store"
 
   export let actionType
   export let dataSource
@@ -11,7 +12,6 @@
   export let fields
   export let buttons
   export let buttonPosition
-
   export let title
   export let description
   export let rowId
@@ -25,8 +25,56 @@
   export let saveButtonLabel
   export let deleteButtonLabel
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
   const component = getContext("component")
+  const context = getContext("context")
+
+  let schema
+
+  $: formattedFields = convertOldFieldFormat(fields)
+  $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
+  $: fetchSchema(dataSource)
+  // We could simply spread $$props into the inner form and append our
+  // additions, but that would create svelte warnings about unused props and
+  // make maintenance in future more confusing as we typically always have a
+  // proper mapping of schema settings to component exports, without having to
+  // search multiple files
+  $: innerProps = {
+    dataSource,
+    actionUrl,
+    actionType,
+    size,
+    disabled,
+    fields: fieldsOrDefault,
+    title,
+    description,
+    schema,
+    notificationOverride,
+    buttons:
+      buttons ||
+      Utils.buildFormBlockButtonConfig({
+        _id: $component.id,
+        showDeleteButton,
+        showSaveButton,
+        saveButtonLabel,
+        deleteButtonLabel,
+        notificationOverride,
+        actionType,
+        actionUrl,
+        dataSource,
+      }),
+    buttonPosition: buttons ? buttonPosition : "top",
+  }
+
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const id = get(component).id
+    const rows = get(context)[`${id}-provider`]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
 
   const convertOldFieldFormat = fields => {
     if (!fields) {
@@ -68,42 +116,6 @@
     return [...fields, ...defaultFields].filter(field => field.active)
   }
 
-  let schema
-
-  $: formattedFields = convertOldFieldFormat(fields)
-  $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
-  $: fetchSchema(dataSource)
-  // We could simply spread $$props into the inner form and append our
-  // additions, but that would create svelte warnings about unused props and
-  // make maintenance in future more confusing as we typically always have a
-  // proper mapping of schema settings to component exports, without having to
-  // search multiple files
-  $: innerProps = {
-    dataSource,
-    actionUrl,
-    actionType,
-    size,
-    disabled,
-    fields: fieldsOrDefault,
-    title,
-    description,
-    schema,
-    notificationOverride,
-    buttons:
-      buttons ||
-      Utils.buildFormBlockButtonConfig({
-        _id: $component.id,
-        showDeleteButton,
-        showSaveButton,
-        saveButtonLabel,
-        deleteButtonLabel,
-        notificationOverride,
-        actionType,
-        actionUrl,
-        dataSource,
-      }),
-    buttonPosition: buttons ? buttonPosition : "top",
-  }
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }