Update form screen templates to include row actions and use a form block instead of multi step form block

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte

@@ -123,15 +123,18 @@
   }
 
   const createFormScreen = async type => {
-    const screenTemplates = selectedTablesAndViews.flatMap(tableOrView =>
-      screenTemplating.form({
-        screens,
-        tableOrView,
-        type,
-        permissions: permissions[tableOrView.id],
-      })
-    )
-
+    const screenTemplates = (
+      await Promise.all(
+        selectedTablesAndViews.map(tableOrView =>
+          screenTemplating.form({
+            screens,
+            tableOrView,
+            type,
+            permissions: permissions[tableOrView.id],
+          })
+        )
+      )
+    ).flat()
     const newScreens = await createScreens(screenTemplates)
 
     if (type === "update" || type === "create") {

packages/builder/src/templates/BaseStructure.js

@@ -24,9 +24,9 @@ export class BaseStructure {
     if (this._children.length !== 0) {
       for (let child of this._children) {
         if (this._isScreen) {
-          structure.props._children.push(child.json())
+          structure.props._children.push(child.json?.() || child)
         } else {
-          structure._children.push(child.json())
+          structure._children.push(child.json?.() || child)
         }
       }
     }

packages/builder/src/templates/Component.js

@@ -1,5 +1,6 @@
 import { Helpers } from "@budibase/bbui"
 import { BaseStructure } from "./BaseStructure"
+import { componentStore } from "stores/builder"
 
 export class Component extends BaseStructure {
   constructor(name, _id = Helpers.uuid()) {

packages/builder/src/templates/rowActions.js

@@ -4,15 +4,22 @@ import { rowActions, selectedScreen, componentStore } from "stores/builder"
 import { Helpers } from "@budibase/bbui"
 import { findComponent } from "helpers/components"
 
-export const getRowActionButtonTemplates = async ({ screen, component }) => {
-  if (!component) {
-    return []
+export const getRowActionButtonTemplates = async ({
+  screen,
+  component,
+  instance,
+}) => {
+  // Find root component instance if not specified
+  if (!instance) {
+    if (!component) {
+      return []
+    }
+    if (!screen) {
+      screen = get(selectedScreen)
+    }
+    const id = component._rootId
+    instance = findComponent(screen?.props, id)
   }
-  if (!screen) {
-    screen = get(selectedScreen)
-  }
-  const id = component._rootId
-  const instance = findComponent(screen?.props, id)
   if (!instance) {
     return []
   }

packages/builder/src/templates/screenTemplating/form.js

@@ -1,6 +1,9 @@
 import { Screen } from "./Screen"
 import { Component } from "../Component"
 import getValidRoute from "./getValidRoute"
+import { componentStore } from "stores/builder"
+import { Helpers } from "@budibase/bbui"
+import { getRowActionButtonTemplates } from "templates/rowActions"
 
 export const getTypeSpecificRoute = (tableOrView, type) => {
   if (type === "create") {
@@ -32,27 +35,49 @@ const getActionType = type => {
   }
 }
 
-const form = ({ tableOrView, type, permissions, screens }) => {
+const getTitle = type => {
+  if (type === "create") {
+    return "Create row"
+  } else if (type === "update") {
+    return "Update row"
+  }
+  return "Row details"
+}
+
+const form = async ({ tableOrView, type, permissions, screens }) => {
+  const id = Helpers.uuid()
   const typeSpecificRoute = getTypeSpecificRoute(tableOrView, type)
   const role = getRole(permissions, type)
 
-  const multistepFormBlock = new Component(
-    "@budibase/standard-components/multistepformblock"
-  )
+  let formBlock = new Component("@budibase/standard-components/formblock", id)
     .customProps({
-      actionType: getActionType(type),
       dataSource: tableOrView.tableSelectFormat,
-      steps: [{}],
+      actionType: getActionType(type),
+      title: getTitle(type),
       rowId: type === "new" ? undefined : `{{ url.id }}`,
     })
-    .instanceName(`${tableOrView.name} - Multistep Form block`)
+    .instanceName(`${tableOrView.name} - Form block`)
+    .json()
+
+  // Add default button config
+  componentStore.migrateSettings(formBlock)
+
+  // Add row action buttons if required
+  if (type !== "create") {
+    const rowActionButtons = await getRowActionButtonTemplates({
+      instance: formBlock,
+    })
+    if (rowActionButtons.length) {
+      formBlock.buttons = [...(formBlock.buttons || []), ...rowActionButtons]
+    }
+  }
 
   const template = new Screen()
     .route(getValidRoute(screens, typeSpecificRoute, role))
     .instanceName(`${tableOrView.name} - Form`)
     .role(role)
     .autoTableId(tableOrView.id)
-    .addChild(multistepFormBlock)
+    .addChild(formBlock)
     .json()
 
   return [