Refactor form block layout and add functional update and view multi step forms

packages/bbui/src/DetailSummary/DetailSummary.svelte

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

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",
         settings: generalSettings,
-            },
+      })
-          ]
+    }
-        : []),
+    if (customSections.length) {
-      ...(customSections || []),
+      sections = sections.concat(customSections)
-    ]
+    }
 
     // Filter out settings which shouldn't be rendered
     sections.forEach(section => {

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

@@ -1,10 +1,13 @@
 <script>
   import BlockComponent from "components/BlockComponent.svelte"
-  import Block from "components/Block.svelte"
   import { getContext } from "svelte"
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
+  import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
 
+  export let actionType
+  export let rowId
+  export let noRowsMessage
   export let steps
   export let dataSource
   export let initialFormStep = 1
@@ -102,6 +105,8 @@
         _id: id,
         stepCount: safeSteps.length,
         currentStep: idx,
+        actionType,
+        dataSource,
       })
       return {
         fields: getDefaultFields(fields || [], schema),
@@ -113,20 +118,17 @@
   }
 </script>
 
-<Block>
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
   <BlockComponent
     type="form"
+    context="form"
     props={{
       dataSource,
       initialFormStep,
       step: currentStep,
+      actionType: actionType === "Create" ? "Create" : "Update",
+      readonly: actionType === "View",
     }}
-    context="form"
-  >
-    {#each enrichedSteps as step, idx}
-      <BlockComponent
-        type="formstep"
-        props={{ step: idx + 1, _instanceName: `Step ${idx + 1}` }}
     styles={{
       normal: {
         width: "600px",
@@ -134,6 +136,11 @@
         "margin-right": "auto",
       },
     }}
+  >
+    {#each enrichedSteps as step, idx}
+      <BlockComponent
+        type="formstep"
+        props={{ step: idx + 1, _instanceName: `Step ${idx + 1}` }}
       >
         <BlockComponent
           type="container"
@@ -176,4 +183,4 @@
       </BlockComponent>
     {/each}
   </BlockComponent>
-</Block>
+</FormBlockWrapper>

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,7 +88,6 @@
     title,
     description,
     schema,
-    repeaterId,
     notificationOverride,
     buttons:
       buttons ||
@@ -124,43 +109,6 @@
   }
 </script>
 
-<Block>
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
-  {#if actionType === "Create"}
-    <BlockComponent
-      type="container"
-      props={{
-        direction: "column",
-        hAlign: "left",
-        vAlign: "stretch",
-      }}
-    >
   <InnerFormBlock {...innerProps} />
-    </BlockComponent>
+</FormBlockWrapper>
-  {: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/frontend-core/src/utils/utils.js

@@ -242,15 +242,16 @@ export const buildFormBlockButtonConfig = props => {
 }
 
 export const buildMultiStepFormBlockDefaultProps = props => {
-  const { _id, stepCount, currentStep } = props || {}
+  const { _id, stepCount, currentStep, actionType, dataSource } = props || {}
 
   // Sanity check
   if (!_id || !stepCount) {
     return
   }
 
-  // Default the title to "Step X"
   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
@@ -266,7 +267,7 @@ export const buildMultiStepFormBlockDefaultProps = props => {
         {
           parameters: {
             type: "prev",
-            componentId: `${_id}-form`,
+            componentId: formId,
           },
           "##eventHandlerType": "Change Form Step",
         },
@@ -287,13 +288,13 @@ export const buildMultiStepFormBlockDefaultProps = props => {
         {
           "##eventHandlerType": "Validate Form",
           parameters: {
-            componentId: `${_id}-form`,
+            componentId: formId,
           },
         },
         {
           parameters: {
             type: "next",
-            componentId: `${_id}-form`,
+            componentId: formId,
           },
           "##eventHandlerType": "Change Form Step",
         },
@@ -302,7 +303,7 @@ export const buildMultiStepFormBlockDefaultProps = props => {
   }
 
   // Add save button if we are the last step
-  if (currentStep === stepCount - 1) {
+  if (actionType !== "View" && currentStep === stepCount - 1) {
     buttons.push({
       _id: Helpers.uuid(),
       _component: "@budibase/standard-components/button",
@@ -314,9 +315,27 @@ export const buildMultiStepFormBlockDefaultProps = props => {
         {
           "##eventHandlerType": "Validate Form",
           parameters: {
-            componentId: `${_id}-form`,
+            componentId: formId,
           },
         },
+        {
+          "##eventHandlerType": "Save Row",
+          parameters: {
+            tableId: resourceId,
+            providerId: formId,
+          },
+        },
+        // Clear a create form once submitted
+        ...(actionType !== "Create"
+          ? []
+          : [
+              {
+                "##eventHandlerType": "Clear Form",
+                parameters: {
+                  componentId: formId,
+                },
+              },
+            ]),
       ],
     })
   }