Merge pull request #12585 from Budibase/feature/multistep-form-block

Multi-step form block

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -130,5 +130,6 @@
     max-width: 150px;
     transform: translateX(-50%);
     text-align: center;
+    z-index: 1;
   }
 </style>

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -78,7 +78,7 @@
       var(--spacing-xl);
   }
   .property-panel.no-title {
-    padding: var(--spacing-xl);
+    padding-top: var(--spacing-xl);
   }
 
   .show {

packages/bbui/src/Form/Field.svelte

@@ -51,15 +51,13 @@
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .helpText :global(svg) {
-    width: 14px;
+    width: 13px;
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-600);
     margin-right: 6px;
   }
-
   .helpText span {
-    color: var(--grey-7);
+    color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
 </style>

packages/builder/src/builderStore/dataBinding.js

@@ -465,8 +465,8 @@ const filterCategoryByContext = (component, context) => {
   const { _component } = component
   if (_component.endsWith("formblock")) {
     if (
-      (component.actionType == "Create" && context.type === "schema") ||
+      (component.actionType === "Create" && context.type === "schema") ||
-      (component.actionType == "View" && context.type === "form")
+      (component.actionType === "View" && context.type === "form")
     ) {
       return false
     }
@@ -474,20 +474,21 @@ const filterCategoryByContext = (component, context) => {
   return true
 }
 
+// Enrich binding category information for certain components
 const getComponentBindingCategory = (component, context, def) => {
   let icon = def.icon
   let category = component._instanceName
 
   if (component._component.endsWith("formblock")) {
-    let contextCategorySuffix = {
+    if (context.type === "form") {
-      form: "Fields",
+      category = `${component._instanceName} - Fields`
-      schema: "Row",
+      icon = "Form"
+    } else if (context.type === "schema") {
+      category = `${component._instanceName} - Row`
+      icon = "Data"
     }
-    category = `${component._instanceName} - ${
-      contextCategorySuffix[context.type]
-    }`
-    icon = context.type === "form" ? "Form" : "Data"
   }
+
   return {
     icon,
     category,

packages/builder/src/builderStore/store/frontend.js

@@ -610,12 +610,12 @@ export const getFrontendStore = () => {
           // Use default config if the 'buttons' prop has never been initialised
           if (!("buttons" in enrichedComponent)) {
             enrichedComponent["buttons"] =
-              Utils.buildDynamicButtonConfig(enrichedComponent)
+              Utils.buildFormBlockButtonConfig(enrichedComponent)
             migrated = true
           } else if (enrichedComponent["buttons"] == null) {
             // Ignore legacy config if 'buttons' has been reset by 'resetOn'
             const { _id, actionType, dataSource } = enrichedComponent
-            enrichedComponent["buttons"] = Utils.buildDynamicButtonConfig({
+            enrichedComponent["buttons"] = Utils.buildFormBlockButtonConfig({
               _id,
               actionType,
               dataSource,
@@ -1289,15 +1289,14 @@ export const getFrontendStore = () => {
           const settings = getComponentSettings(component._component)
           const updatedSetting = settings.find(setting => setting.key === name)
 
-          // Can be a single string or array of strings
+          // Reset dependent fields
-          const resetFields = settings.filter(setting => {
+          settings.forEach(setting => {
-            return (
+            const needsReset =
               name === setting.resetOn ||
               (Array.isArray(setting.resetOn) && setting.resetOn.includes(name))
-            )
+            if (needsReset) {
-          })
+              component[setting.key] = setting.defaultValue || null
-          resetFields?.forEach(setting => {
+            }
-            component[setting.key] = null
           })
 
           if (

packages/builder/src/components/design/settings/componentSettings.js

@@ -25,6 +25,8 @@ import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
 import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte"
 import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"
+import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
+import FormStepControls from "components/design/settings/controls/FormStepControls.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -51,6 +53,8 @@ const componentMap = {
   url: URLSelect,
   fieldConfiguration: FieldConfiguration,
   buttonConfiguration: ButtonConfiguration,
+  stepConfiguration: FormStepConfiguration,
+  formStepControls: FormStepControls,
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
   "columns/grid": GridColumnEditor,

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte

@@ -34,6 +34,9 @@
   $: canAddButtons = max == null || buttonList.length < max
 
   const sanitizeValue = val => {
+    if (!Array.isArray(val)) {
+      return null
+    }
     return val?.map(button => {
       return button._component ? button : buildPseudoInstance(button)
     })

packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte

@@ -13,6 +13,8 @@
   export let draggable = true
   export let focus
 
+  let zoneType = generate()
+
   let store = writable({
     selected: null,
     actions: {
@@ -46,6 +48,7 @@
         return {
           id: listItemKey ? item[listItemKey] : generate(),
           item,
+          type: zoneType,
         }
       })
       .filter(item => item.id)
@@ -83,6 +86,8 @@
     items: draggableItems,
     dropTargetStyle: { outline: "none" },
     dragDisabled: !draggable || inactive,
+    type: zoneType,
+    dropFromOthersDisabled: true,
   }}
   on:finalize={handleFinalize}
   on:consider={updateRowOrder}

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -14,6 +14,7 @@
   import { convertOldFieldFormat, getComponentForField } from "./utils"
 
   export let componentInstance
+  export let bindings
   export let value
 
   const dispatch = createEventDispatcher()
@@ -28,7 +29,9 @@
 
   let selectAll = true
 
-  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
+  $: resolvedBindings =
+    bindings || getBindableProperties($selectedScreen, componentInstance._id)
+
   $: actionType = componentInstance.actionType
   let componentBindings = []
 
@@ -39,7 +42,10 @@
     )
   }
 
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource =
+    componentInstance.dataSource ||
+    getDatasourceForProvider($currentAsset, componentInstance)
+
   $: resourceId = datasource?.resourceId || datasource?.tableId
 
   $: if (!isEqual(value, cachedValue)) {
@@ -179,7 +185,7 @@
       listType={FieldSetting}
       listTypeProps={{
         componentBindings,
-        bindings,
+        bindings: resolvedBindings,
       }}
     />
   {/if}

packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte

@@ -0,0 +1,171 @@
+<script>
+  import { createEventDispatcher, setContext } from "svelte"
+  import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import { getDatasourceForProvider } from "builderStore/dataBinding"
+  import { currentAsset, store } from "builderStore"
+  import { Helpers } from "@budibase/bbui"
+  import { derived, writable } from "svelte/store"
+  import { Utils } from "@budibase/frontend-core"
+  import { cloneDeep } from "lodash"
+
+  export let componentInstance
+  export let componentBindings
+  export let value
+  export let bindings
+
+  const dispatch = createEventDispatcher()
+  const multiStepStore = writable({
+    stepCount: value?.length ?? 0,
+    currentStep: 0,
+  })
+  const currentStep = derived(multiStepStore, state => state.currentStep)
+  const componentType = "@budibase/standard-components/multistepformblockstep"
+
+  setContext("multi-step-form-block", multiStepStore)
+
+  $: stepCount = value?.length || 0
+  $: updateStore(stepCount)
+  $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: emitCurrentStep($currentStep)
+  $: stepLabel = getStepLabel($multiStepStore)
+  $: stepDef = getDefinition(stepLabel)
+  $: stepSettings = value?.[$currentStep] || {}
+  $: defaults = Utils.buildMultiStepFormBlockDefaultProps({
+    _id: componentInstance._id,
+    stepCount: $multiStepStore.stepCount,
+    currentStep: $multiStepStore.currentStep,
+    actionType: componentInstance.actionType,
+    dataSource: componentInstance.dataSource,
+  })
+  $: stepInstance = {
+    _id: Helpers.uuid(),
+    _component: componentType,
+    _instanceName: `Step ${currentStep + 1}`,
+    title: stepSettings.title ?? defaults.title,
+    buttons: stepSettings.buttons || defaults.buttons,
+    fields: stepSettings.fields,
+    desc: stepSettings.desc,
+
+    // Needed for field configuration
+    dataSource,
+  }
+
+  const getDefinition = stepLabel => {
+    let def = cloneDeep(store.actions.components.getDefinition(componentType))
+    def.settings.find(x => x.key === "steps").label = stepLabel
+    return def
+  }
+
+  const updateStore = stepCount => {
+    multiStepStore.update(state => {
+      state.stepCount = stepCount
+      if (state.currentStep >= stepCount) {
+        state.currentStep = 0
+      }
+      return { ...state }
+    })
+  }
+
+  const getStepLabel = ({ stepCount, currentStep }) => {
+    if (stepCount <= 1) {
+      return "Steps"
+    }
+    return `Steps (${currentStep + 1}/${stepCount})`
+  }
+
+  const emitCurrentStep = step => {
+    store.actions.preview.sendEvent("builder-meta", {
+      componentId: componentInstance._id,
+      step: step,
+    })
+  }
+
+  const addStep = () => {
+    value = value.toSpliced($currentStep + 1, 0, {})
+    dispatch("change", value)
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: $currentStep + 1,
+    }))
+  }
+
+  const removeStep = () => {
+    value = value.toSpliced($currentStep, 1)
+    dispatch("change", value)
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: Math.min($currentStep, stepCount - 2),
+    }))
+  }
+
+  const previousStep = () => {
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: Math.max($currentStep - 1, 0),
+    }))
+  }
+
+  const nextStep = () => {
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: Math.min($currentStep + 1, value.length - 1),
+    }))
+  }
+
+  const updateStep = (field, val) => {
+    const newStep = {
+      ...value[$currentStep],
+      [field.key]: val,
+    }
+    value = value.toSpliced($currentStep, 1, newStep)
+    dispatch("change", value)
+  }
+
+  const handleStepAction = action => {
+    switch (action) {
+      case "addStep":
+        addStep()
+        break
+      case "removeStep":
+        removeStep()
+        break
+      case "nextStep":
+        nextStep()
+        break
+      case "previousStep":
+        previousStep()
+    }
+  }
+
+  const processUpdate = (field, val) => {
+    if (field.key === "steps") {
+      handleStepAction(val.action)
+    } else {
+      updateStep(field, val)
+    }
+  }
+</script>
+
+<div class="nested-section">
+  <ComponentSettingsSection
+    includeHidden
+    componentInstance={stepInstance}
+    componentDefinition={stepDef}
+    onUpdateSetting={processUpdate}
+    showSectionTitle={false}
+    isScreen={false}
+    nested={true}
+    {bindings}
+    {componentBindings}
+  />
+</div>
+
+<style>
+  .nested-section {
+    margin: 0 calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl))
+      calc(-1 * var(--spacing-xl));
+  }
+  .nested-section :global(.property-panel) {
+    padding-top: 0;
+  }
+</style>

packages/builder/src/components/design/settings/controls/FormStepControls.svelte

@@ -0,0 +1,84 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte"
+  import { ActionButton } from "@budibase/bbui"
+
+  const multiStepStore = getContext("multi-step-form-block")
+  const dispatch = createEventDispatcher()
+
+  $: ({ stepCount, currentStep } = $multiStepStore)
+
+  const stepAction = action => {
+    dispatch("change", {
+      action,
+    })
+  }
+</script>
+
+{#if stepCount === 1}
+  <div class="stretch">
+    <ActionButton
+      icon="MultipleAdd"
+      secondary
+      on:click={() => {
+        stepAction("addStep")
+      }}
+    >
+      Add Step
+    </ActionButton>
+  </div>
+{:else}
+  <div class="step-actions">
+    <ActionButton
+      size="S"
+      secondary
+      icon="ChevronLeft"
+      disabled={currentStep === 0}
+      on:click={() => {
+        stepAction("previousStep")
+      }}
+      tooltip={"Previous step"}
+    />
+    <ActionButton
+      size="S"
+      secondary
+      disabled={currentStep === stepCount - 1}
+      icon="ChevronRight"
+      on:click={() => {
+        stepAction("nextStep")
+      }}
+      tooltip={"Next step"}
+    />
+    <ActionButton
+      size="S"
+      secondary
+      icon="Close"
+      disabled={stepCount === 1}
+      on:click={() => {
+        stepAction("removeStep")
+      }}
+      tooltip={"Remove step"}
+    />
+    <ActionButton
+      size="S"
+      secondary
+      icon="MultipleAdd"
+      on:click={() => {
+        stepAction("addStep")
+      }}
+      tooltip={"Add step"}
+    />
+  </div>
+{/if}
+
+<style>
+  .stretch :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+  .step-actions {
+    display: flex;
+    gap: var(--spacing-s);
+  }
+  .step-actions :global(.spectrum-ActionButton) {
+    height: 32px;
+  }
+</style>

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -24,6 +24,7 @@
   export let propertyFocus = false
   export let info = null
   export let disableBindings = false
+  export let wide
 
   $: nullishValue = value == null || value === ""
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
@@ -78,7 +79,7 @@
 
 <div
   class="property-control"
-  class:wide={!label || labelHidden}
+  class:wide={!label || labelHidden || wide === true}
   class:highlighted={highlighted && nullishValue}
   class:property-focus={propertyFocus}
 >
@@ -104,6 +105,7 @@
       {...props}
       on:drawerHide
       on:drawerShow
+      on:meta
     />
   </div>
   {#if info}
@@ -146,15 +148,28 @@
   .control {
     position: relative;
   }
-  .property-control.wide .control {
-    grid-column: 1 / -1;
-  }
   .text {
     font-size: var(--spectrum-global-dimension-font-size-75);
     color: var(--grey-6);
     grid-column: 2 / 2;
   }
+
+  .property-control.wide .control {
+    flex: 1;
+  }
+  .property-control.wide {
+    grid-template-columns: unset;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  .property-control.wide > * {
+    width: 100%;
+  }
   .property-control.wide .text {
     grid-column: 1 / -1;
   }
+  .property-control.wide .label {
+    margin-bottom: -8px;
+  }
 </style>

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -12,7 +12,10 @@
   } from "@budibase/bbui"
   import { currentAsset, selectedComponent } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/componentUtils"
-  import { getSchemaForDatasource } from "builderStore/dataBinding"
+  import {
+    getSchemaForDatasource,
+    getDatasourceForProvider,
+  } from "builderStore/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { generate } from "shortid"
 
@@ -124,6 +127,12 @@
     ],
   }
 
+  const resolveDatasource = (currentAsset, componentInstance, parent) => {
+    return (
+      getDatasourceForProvider(currentAsset, parent || componentInstance) || {}
+    )
+  }
+
   $: dataSourceSchema = getDataSourceSchema($currentAsset, $selectedComponent)
   $: field = fieldName || $selectedComponent?.field
   $: schemaRules = parseRulesFromSchema(field, dataSourceSchema || {})
@@ -146,8 +155,8 @@
         component._component.endsWith("/formblock") ||
         component._component.endsWith("/tableblock")
     )
-
+    const dataSource = resolveDatasource(asset, component, formParent)
-    return getSchemaForDatasource(asset, formParent?.dataSource)
+    return getSchemaForDatasource(asset, dataSource)
   }
 
   const parseRulesFromSchema = (field, dataSourceSchema) => {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -32,21 +32,19 @@
     const generalSettings = settings.filter(
       setting => !setting.section && setting.tag === tag
     )
-
     const customSections = settings.filter(
       setting => setting.section && setting.tag === tag
     )
-    let sections = [
+    let sections = []
-      ...(generalSettings?.length
+    if (generalSettings.length) {
-        ? [
+      sections.push({
-            {
+        name: "General",
-              name: "General",
+        settings: generalSettings,
-              settings: generalSettings,
+      })
-            },
+    }
-          ]
+    if (customSections.length) {
-        : []),
+      sections = sections.concat(customSections)
-      ...(customSections || []),
+    }
-    ]
 
     // Filter out settings which shouldn't be rendered
     sections.forEach(section => {
@@ -153,6 +151,7 @@
     <DetailSummary
       name={showSectionTitle ? section.name : ""}
       initiallyShow={section.collapsed !== true}
+      collapsible={section.name !== "General"}
     >
       {#if section.info}
         <div class="section-info">
@@ -172,6 +171,7 @@
               control={getComponentForSetting(setting)}
               label={setting.label}
               labelHidden={setting.labelHidden}
+              wide={setting.wide}
               key={setting.key}
               value={componentInstance[setting.key]}
               defaultValue={setting.defaultValue}
@@ -208,7 +208,7 @@
     </DetailSummary>
   {/if}
 {/each}
-{#if componentDefinition?.block && !tag}
+{#if componentDefinition?.block && !tag && componentDefinition.ejectable !== false}
   <DetailSummary name="Eject" collapsible={false}>
     <EjectBlockButton />
   </DetailSummary>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -8,6 +8,7 @@
       "cardsblock",
       "repeaterblock",
       "formblock",
+      "multistepformblock",
       "chartblock",
       "rowexplorer"
     ]

packages/client/manifest.json

@@ -4879,7 +4879,7 @@
   },
   "chartblock": {
     "block": true,
-    "name": "Chart block",
+    "name": "Chart Block",
     "icon": "GraphPie",
     "hasChildren": false,
     "settings": [
@@ -5369,7 +5369,7 @@
   },
   "tableblock": {
     "block": true,
-    "name": "Table block",
+    "name": "Table Block",
     "icon": "Table",
     "styles": ["size"],
     "size": {
@@ -5615,7 +5615,7 @@
   },
   "cardsblock": {
     "block": true,
-    "name": "Cards block",
+    "name": "Cards Block",
     "icon": "PersonalizationField",
     "styles": ["size"],
     "size": {
@@ -5795,7 +5795,7 @@
   },
   "repeaterblock": {
     "block": true,
-    "name": "Repeater block",
+    "name": "Repeater Block",
     "icon": "ViewList",
     "illegalChildren": ["section"],
     "hasChildren": true,
@@ -6035,6 +6035,164 @@
       }
     ]
   },
+  "multistepformblock": {
+    "name": "Multi-step Form Block",
+    "icon": "AssetsAdded",
+    "block": true,
+    "hasChildren": false,
+    "ejectable": false,
+    "size": {
+      "width": 400,
+      "height": 400
+    },
+    "styles": ["size"],
+    "settings": [
+      {
+        "type": "table",
+        "label": "Data",
+        "key": "dataSource"
+      },
+      {
+        "type": "radio",
+        "label": "Type",
+        "key": "actionType",
+        "options": ["Create", "Update", "View"],
+        "defaultValue": "Create"
+      },
+      {
+        "section": true,
+        "dependsOn": {
+          "setting": "actionType",
+          "value": "Create",
+          "invert": true
+        },
+        "name": "Row ID",
+        "info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
+        "settings": [
+          {
+            "type": "text",
+            "label": "Row ID",
+            "key": "rowId",
+            "nested": true
+          },
+          {
+            "type": "text",
+            "label": "No rows found",
+            "key": "noRowsMessage",
+            "defaultValue": "We couldn't find a row to display",
+            "nested": true
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Details",
+        "settings": [
+          {
+            "type": "stepConfiguration",
+            "key": "steps",
+            "nested": true,
+            "labelHidden": true,
+            "resetOn": [
+              "dataSource",
+              "actionType"
+            ],
+            "defaultValue": [
+              {}
+            ]
+          }
+        ]
+      }
+    ],
+    "actions": [
+      {
+        "type": "ValidateForm",
+        "suffix": "form"
+      },
+      {
+        "type": "ClearForm",
+        "suffix": "form"
+      },
+      {
+        "type": "UpdateFieldValue",
+        "suffix": "form"
+      },
+      {
+        "type": "ScrollTo",
+        "suffix": "form"
+      },
+      {
+        "type": "ChangeFormStep",
+        "suffix": "form"
+      }
+    ],
+    "context": [
+      {
+        "type": "form",
+        "suffix": "form"
+      },
+      {
+        "type": "static",
+        "suffix": "form",
+        "values": [
+          {
+            "label": "Value",
+            "key": "__value",
+            "type": "object"
+          },
+          {
+            "label": "Valid",
+            "key": "__valid",
+            "type": "boolean"
+          },
+          {
+            "label": "Current Step",
+            "key": "__currentStep",
+            "type": "number"
+          },
+          {
+            "label": "Current Step Valid",
+            "key": "__currentStepValid",
+            "type": "boolean"
+          }
+        ]
+      }
+    ]
+  },
+  "multistepformblockstep": {
+    "name": "Multi-step Form Block Step",
+    "settings": [
+      {
+        "type": "formStepControls",
+        "label": "Steps",
+        "key": "steps"
+      },
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title",
+        "nested": true
+      },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "desc",
+        "nested": true
+      },
+      {
+        "type": "fieldConfiguration",
+        "key": "fields",
+        "nested": true
+      },
+      {
+        "type": "buttonConfiguration",
+        "label": "Buttons",
+        "key": "buttons",
+        "wide": true,
+        "nested": true
+      }
+    ]
+  },
   "formblock": {
     "name": "Form Block",
     "icon": "Form",
@@ -6290,7 +6448,7 @@
     }
   },
   "gridblock": {
-    "name": "Grid block",
+    "name": "Grid Block",
     "icon": "Table",
     "styles": ["size"],
     "size": {

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

@@ -0,0 +1,187 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import { getContext, setContext } from "svelte"
+  import { builderStore } from "stores"
+  import { Utils } from "@budibase/frontend-core"
+  import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
+  import { writable } from "svelte/store"
+
+  export let actionType
+  export let rowId
+  export let noRowsMessage
+  export let steps
+  export let dataSource
+
+  const { fetchDatasourceSchema } = getContext("sdk")
+  const component = getContext("component")
+
+  // Set current step context to force child form to use it
+  const currentStep = writable(1)
+  setContext("current-step", currentStep)
+
+  const FieldTypeToComponentMap = {
+    string: "stringfield",
+    number: "numberfield",
+    bigint: "bigintfield",
+    options: "optionsfield",
+    array: "multifieldselect",
+    boolean: "booleanfield",
+    longform: "longformfield",
+    datetime: "datetimefield",
+    attachment: "attachmentfield",
+    link: "relationshipfield",
+    json: "jsonfield",
+    barcodeqr: "codescanner",
+    bb_reference: "bbreferencefield",
+  }
+
+  let schema
+
+  $: fetchSchema(dataSource)
+  $: enrichedSteps = enrichSteps(steps, schema, $component.id)
+  $: updateCurrentStep(enrichedSteps, $builderStore, $component)
+
+  const updateCurrentStep = (steps, builderStore, component) => {
+    const { componentId, step } = builderStore.metadata || {}
+
+    // If we aren't in the builder or aren't selected then don't update the step
+    // context at all, allowing the normal form to take control.
+    if (
+      !component.selected ||
+      !builderStore.inBuilder ||
+      componentId !== component.id
+    ) {
+      return
+    }
+
+    // Ensure we have a valid step selected
+    let newStep = Math.min(step || 0, steps.length - 1)
+
+    // Sanity check
+    newStep = Math.max(newStep, 0)
+
+    // Add 1 because the form component expects 1 indexed rather than 0 indexed
+    currentStep.set(newStep + 1)
+  }
+
+  const getPropsForField = field => {
+    if (field._component) {
+      return field
+    }
+    return {
+      field: field.name,
+      label: field.name,
+      placeholder: field.name,
+      _instanceName: field.name,
+    }
+  }
+
+  const getComponentForField = field => {
+    const fieldSchemaName = field.field || field.name
+    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
+      return null
+    }
+    const type = schema[fieldSchemaName].type
+    return FieldTypeToComponentMap[type]
+  }
+
+  const fetchSchema = async () => {
+    schema = (await fetchDatasourceSchema(dataSource)) || {}
+  }
+
+  const getDefaultFields = (fields, schema) => {
+    if (fields?.length) {
+      return fields.filter(field => field.active)
+    }
+    return Object.values(schema || {})
+      .filter(field => !field.autocolumn)
+      .map(field => ({
+        name: field.name,
+      }))
+  }
+
+  const enrichSteps = (steps, schema, id) => {
+    const safeSteps = steps?.length ? steps : [{}]
+    return safeSteps.map((step, idx) => {
+      const { title, desc, fields, buttons } = step
+      const defaultProps = Utils.buildMultiStepFormBlockDefaultProps({
+        _id: id,
+        stepCount: safeSteps.length,
+        currentStep: idx,
+        actionType,
+        dataSource,
+      })
+      return {
+        fields: getDefaultFields(fields || [], schema),
+        title: title ?? defaultProps.title,
+        desc,
+        buttons: buttons || defaultProps.buttons,
+      }
+    })
+  }
+</script>
+
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
+  <BlockComponent
+    type="form"
+    context="form"
+    props={{
+      dataSource,
+      actionType: actionType === "Create" ? "Create" : "Update",
+      readonly: actionType === "View",
+    }}
+    styles={{
+      normal: {
+        width: "600px",
+        "margin-left": "auto",
+        "margin-right": "auto",
+      },
+    }}
+  >
+    {#each enrichedSteps as step, stepIdx}
+      <BlockComponent
+        type="formstep"
+        props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
+      >
+        <BlockComponent
+          type="container"
+          props={{
+            gap: "M",
+            direction: "column",
+            hAlign: "stretch",
+            vAlign: "top",
+            size: "shrink",
+          }}
+        >
+          <BlockComponent type="container" order={0}>
+            <BlockComponent type="heading" props={{ text: step.title }} />
+          </BlockComponent>
+          <BlockComponent type="text" props={{ text: step.desc }} order={1} />
+          <BlockComponent type="fieldgroup" order={2}>
+            {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
+              {#if getComponentForField(field)}
+                <BlockComponent
+                  type={getComponentForField(field)}
+                  props={getPropsForField(field)}
+                  order={fieldIdx}
+                  interactive
+                  name={field.field}
+                />
+              {/if}
+            {/each}
+          </BlockComponent>
+          <BlockComponent
+            type="buttongroup"
+            props={{ buttons: step.buttons }}
+            styles={{
+              normal: {
+                "margin-top": "16px",
+              },
+            }}
+            order={3}
+          />
+        </BlockComponent>
+      </BlockComponent>
+    {/each}
+  </BlockComponent>
+</FormBlockWrapper>

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

@@ -265,7 +265,7 @@
             props={{
               dataSource,
               buttonPosition: "top",
-              buttons: Utils.buildDynamicButtonConfig({
+              buttons: Utils.buildFormBlockButtonConfig({
                 _id: $component.id + "-form-edit",
                 showDeleteButton: deleteLabel !== "",
                 showSaveButton: true,
@@ -299,7 +299,7 @@
             props={{
               dataSource,
               buttonPosition: "top",
-              buttons: Utils.buildDynamicButtonConfig({
+              buttons: Utils.buildFormBlockButtonConfig({
                 _id: $component.id + "-form-new",
                 showDeleteButton: false,
                 showSaveButton: true,

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

@@ -1,10 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import BlockComponent from "components/BlockComponent.svelte"
-  import Block from "components/Block.svelte"
-  import { makePropSafe as safe } from "@budibase/string-templates"
   import InnerFormBlock from "./InnerFormBlock.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import FormBlockWrapper from "./FormBlockWrapper.svelte"
 
   export let actionType
   export let dataSource
@@ -71,22 +69,10 @@
   }
 
   let schema
-  let providerId
-  let repeaterId
 
   $: formattedFields = convertOldFieldFormat(fields)
   $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
   $: fetchSchema(dataSource)
-  $: dataProvider = `{{ literal ${safe(providerId)} }}`
-  $: filter = [
-    {
-      field: "_id",
-      operator: "equal",
-      type: "string",
-      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
-      valueType: "Binding",
-    },
-  ]
   // 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
@@ -102,11 +88,10 @@
     title,
     description,
     schema,
-    repeaterId,
     notificationOverride,
     buttons:
       buttons ||
-      Utils.buildDynamicButtonConfig({
+      Utils.buildFormBlockButtonConfig({
         _id: $component.id,
         showDeleteButton,
         showSaveButton,
@@ -124,43 +109,6 @@
   }
 </script>
 
-<Block>
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
-  {#if actionType === "Create"}
+  <InnerFormBlock {...innerProps} />
-    <BlockComponent
+</FormBlockWrapper>
-      type="container"
-      props={{
-        direction: "column",
-        hAlign: "left",
-        vAlign: "stretch",
-      }}
-    >
-      <InnerFormBlock {...innerProps} />
-    </BlockComponent>
-  {:else}
-    <BlockComponent
-      type="dataprovider"
-      context="provider"
-      bind:id={providerId}
-      props={{
-        dataSource,
-        filter,
-        limit: 1,
-        paginate: false,
-      }}
-    >
-      <BlockComponent
-        type="repeater"
-        context="repeater"
-        bind:id={repeaterId}
-        props={{
-          dataProvider,
-          noRowsMessage: noRowsMessage || "We couldn't find a row to display",
-          direction: "column",
-          hAlign: "center",
-        }}
-      >
-        <InnerFormBlock {...innerProps} />
-      </BlockComponent>
-    </BlockComponent>
-  {/if}
-</Block>

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

@@ -0,0 +1,64 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "components/Block.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
+  import { getContext } from "svelte"
+
+  export let actionType
+  export let dataSource
+  export let rowId
+  export let noRowsMessage
+
+  const component = getContext("component")
+
+  $: providerId = `${$component.id}-provider`
+  $: dataProvider = `{{ literal ${safe(providerId)} }}`
+  $: filter = [
+    {
+      field: "_id",
+      operator: "equal",
+      type: "string",
+      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
+      valueType: "Binding",
+    },
+  ]
+</script>
+
+<Block>
+  {#if actionType === "Create"}
+    <BlockComponent
+      type="container"
+      props={{
+        direction: "column",
+        hAlign: "left",
+        vAlign: "stretch",
+      }}
+    >
+      <slot />
+    </BlockComponent>
+  {:else}
+    <BlockComponent
+      type="dataprovider"
+      context="provider"
+      props={{
+        dataSource,
+        filter,
+        limit: 1,
+        paginate: false,
+      }}
+    >
+      <BlockComponent
+        type="repeater"
+        context="repeater"
+        props={{
+          dataProvider,
+          noRowsMessage: noRowsMessage || "We couldn't find a row to display",
+          direction: "column",
+          hAlign: "center",
+        }}
+      >
+        <slot />
+      </BlockComponent>
+    </BlockComponent>
+  {/if}
+</Block>

packages/client/src/components/app/blocks/index.js

@@ -4,3 +4,4 @@ export { default as repeaterblock } from "./RepeaterBlock.svelte"
 export { default as formblock } from "./form/FormBlock.svelte"
 export { default as chartblock } from "./ChartBlock.svelte"
 export { default as rowexplorer } from "./RowExplorer.svelte"
+export { default as multistepformblock } from "./MultiStepFormblock.svelte"

packages/client/src/components/app/forms/Field.svelte

@@ -137,21 +137,23 @@
     width: 100%;
   }
 
+  .error :global(svg),
+  .helpText :global(svg) {
+    width: 13px;
+    margin-right: 6px;
+  }
+
   .error {
     display: flex;
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .error :global(svg) {
-    width: 14px;
     color: var(
       --spectrum-semantic-negative-color-default,
       var(--spectrum-global-color-red-500)
     );
-    margin-right: 4px;
   }
-
   .error span {
     color: var(
       --spectrum-semantic-negative-color-default,
@@ -165,17 +167,14 @@
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .helpText :global(svg) {
-    width: 14px;
+    color: var(--spectrum-global-color-gray-600);
-    color: var(--grey-7);
-    margin-right: 6px;
   }
-
   .helpText span {
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
+
   .spectrum-FieldLabel--right,
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);

packages/client/src/components/app/forms/Form.svelte

@@ -34,7 +34,7 @@
   let loaded = false
   let schema
   let table
-  let currentStep = writable(getInitialFormStep())
+  let currentStep = getContext("current-step") || writable(getInitialFormStep())
 
   $: fetchSchema(dataSource)
   $: schemaKey = generateSchemaKey(schema)

packages/client/src/components/app/forms/InnerForm.svelte

@@ -423,10 +423,14 @@
     }
     const fieldId = field.fieldState.fieldId
     const fieldElement = document.getElementById(fieldId)
-    fieldElement.focus({ preventScroll: true })
+    if (fieldElement) {
+      fieldElement.focus({ preventScroll: true })
+    }
     const label = document.querySelector(`label[for="${fieldId}"]`)
-    label.style.scrollMargin = "100px"
+    if (label) {
-    label.scrollIntoView({ behavior: "smooth", block: "nearest" })
+      label.style.scrollMargin = "100px"
+      label.scrollIntoView({ behavior: "smooth", block: "nearest" })
+    }
   }
 
   // Action context to pass to children

packages/client/src/index.js

@@ -76,6 +76,8 @@ const loadBudibase = async () => {
       } else {
         dndStore.actions.reset()
       }
+    } else if (type === "builder-meta") {
+      builderStore.actions.setMetadata(data)
     }
   }
 

packages/client/src/stores/builder.js

@@ -18,6 +18,7 @@ const createBuilderStore = () => {
     hiddenComponentIds: [],
     usedPlugins: null,
     eventResolvers: {},
+    metadata: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
@@ -123,6 +124,12 @@ const createBuilderStore = () => {
         parentType,
       })
     },
+    setMetadata: metadata => {
+      store.update(state => ({
+        ...state,
+        metadata,
+      }))
+    },
   }
   return {
     ...store,

packages/frontend-core/src/utils/utils.js

@@ -116,7 +116,7 @@ export const domDebounce = callback => {
  *
  * @param {any} props
  * */
-export const buildDynamicButtonConfig = props => {
+export const buildFormBlockButtonConfig = props => {
   const {
     _id,
     actionType,
@@ -130,7 +130,6 @@ export const buildDynamicButtonConfig = props => {
   } = props || {}
 
   if (!_id) {
-    console.log("MISSING ID")
     return
   }
   const formId = `${_id}-form`
@@ -228,7 +227,7 @@ export const buildDynamicButtonConfig = props => {
     })
   }
 
-  if (actionType == "Update" && showDeleteButton !== false) {
+  if (actionType === "Update" && showDeleteButton !== false) {
     defaultButtons.push({
       text: deleteText || "Delete",
       _id: Helpers.uuid(),
@@ -241,3 +240,108 @@ export const buildDynamicButtonConfig = props => {
 
   return defaultButtons
 }
+
+export const buildMultiStepFormBlockDefaultProps = props => {
+  const { _id, stepCount, currentStep, actionType, dataSource } = props || {}
+
+  // Sanity check
+  if (!_id || !stepCount) {
+    return
+  }
+
+  const title = `Step {{ [${_id}-form].[__currentStep] }}`
+  const resourceId = dataSource?.resourceId
+  const formId = `${_id}-form`
+  let buttons = []
+
+  // Add previous step button if we aren't the first step
+  if (currentStep !== 0) {
+    buttons.push({
+      _id: Helpers.uuid(),
+      _component: "@budibase/standard-components/button",
+      _instanceName: Helpers.uuid(),
+      text: "Back",
+      type: "secondary",
+      size: "M",
+      onClick: [
+        {
+          parameters: {
+            type: "prev",
+            componentId: formId,
+          },
+          "##eventHandlerType": "Change Form Step",
+        },
+      ],
+    })
+  }
+
+  // Add a next button if we aren't the last step
+  if (currentStep !== stepCount - 1) {
+    buttons.push({
+      _id: Helpers.uuid(),
+      _component: "@budibase/standard-components/button",
+      _instanceName: Helpers.uuid(),
+      text: "Next",
+      type: "cta",
+      size: "M",
+      onClick: [
+        {
+          "##eventHandlerType": "Validate Form",
+          parameters: {
+            componentId: formId,
+          },
+        },
+        {
+          parameters: {
+            type: "next",
+            componentId: formId,
+          },
+          "##eventHandlerType": "Change Form Step",
+        },
+      ],
+    })
+  }
+
+  // Add save button if we are the last step
+  if (actionType !== "View" && currentStep === stepCount - 1) {
+    buttons.push({
+      _id: Helpers.uuid(),
+      _component: "@budibase/standard-components/button",
+      _instanceName: Helpers.uuid(),
+      text: "Save",
+      type: "cta",
+      size: "M",
+      onClick: [
+        {
+          "##eventHandlerType": "Validate Form",
+          parameters: {
+            componentId: formId,
+          },
+        },
+        {
+          "##eventHandlerType": "Save Row",
+          parameters: {
+            tableId: resourceId,
+            providerId: formId,
+          },
+        },
+        // Clear a create form once submitted
+        ...(actionType !== "Create"
+          ? []
+          : [
+              {
+                "##eventHandlerType": "Clear Form",
+                parameters: {
+                  componentId: formId,
+                },
+              },
+            ]),
+      ],
+    })
+  }
+
+  return {
+    buttons,
+    title,
+  }
+}