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,7 +123,9 @@
   }
 
   const createFormScreen = async type => {
-    const screenTemplates = selectedTablesAndViews.flatMap(tableOrView =>
+    const screenTemplates = (
+      await Promise.all(
+        selectedTablesAndViews.map(tableOrView =>
           screenTemplating.form({
             screens,
             tableOrView,
@@ -131,7 +133,8 @@
             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,7 +4,13 @@ import { rowActions, selectedScreen, componentStore } from "stores/builder"
 import { Helpers } from "@budibase/bbui"
 import { findComponent } from "helpers/components"
 
-export const getRowActionButtonTemplates = async ({ screen, component }) => {
+export const getRowActionButtonTemplates = async ({
+  screen,
+  component,
+  instance,
+}) => {
+  // Find root component instance if not specified
+  if (!instance) {
     if (!component) {
       return []
     }
@@ -12,7 +18,8 @@ export const getRowActionButtonTemplates = async ({ screen, component }) => {
       screen = get(selectedScreen)
     }
     const id = component._rootId
-  const instance = findComponent(screen?.props, id)
+    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 [