Add single button action for changing form step

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -33,7 +33,7 @@
 
   $: selectedActionComponent =
     selectedAction &&
-    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
+    actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY])?.component
 
   // Select the first action if we delete an action
   $: {
@@ -116,7 +116,7 @@
     </ActionMenu>
   </Layout>
   <Layout noPadding>
-    {#if selectedAction}
+    {#if selectedActionComponent}
       <div class="selected-action-container">
         <svelte:component
           this={selectedActionComponent}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { Select, Label, Stepper } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { onMount } from "svelte"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ChangeFormStep"
+  )
+
+  const typeOptions = [
+    {
+      label: "Next step",
+      value: "next",
+    },
+    {
+      label: "Previous step",
+      value: "prev",
+    },
+    {
+      label: "First step",
+      value: "first",
+    },
+    {
+      label: "Specific step",
+      value: "specific",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "next"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    placeholder={null}
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+  <Label small>Step</Label>
+  <Select bind:value={parameters.type} options={typeOptions} />
+  {#if parameters.type === "specific"}
+    <Label small>Number</Label>
+    <Stepper bind:value={parameters.number} />
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte

@@ -29,7 +29,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte

@@ -11,7 +11,6 @@
 
 <style>
   .root {
-    max-width: 800px;
     margin: 0 auto;
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte

@@ -8,7 +8,6 @@
 
 <style>
   .root {
-    max-width: 800px;
     margin: 0 auto;
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte

@@ -25,7 +25,7 @@
     align-items: center;
     gap: var(--spacing-m);
     grid-template-columns: auto 1fr;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte

@@ -1,35 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
-
-  export let parameters
-
-  $: actionProviders = getActionProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId,
-    "NextFormStep"
-  )
-</script>
-
-<div class="root">
-  <Label small>Form</Label>
-  <Select
-    bind:value={parameters.componentId}
-    options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
-  />
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr;
-    align-items: center;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-</style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte

@@ -1,35 +0,0 @@
-<script>
-  import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
-
-  export let parameters
-
-  $: actionProviders = getActionProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId,
-    "PrevFormStep"
-  )
-</script>
-
-<div class="root">
-  <Label small>Form</Label>
-  <Select
-    bind:value={parameters.componentId}
-    options={actionProviders}
-    getOptionLabel={x => x._instanceName}
-    getOptionValue={x => x._id}
-  />
-</div>
-
-<style>
-  .root {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr;
-    align-items: center;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-</style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte

@@ -34,7 +34,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
-    max-width: 800px;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js

@@ -7,8 +7,7 @@ import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
 import ClearForm from "./ClearForm.svelte"
 import CloseScreenModal from "./CloseScreenModal.svelte"
-import NextFormStep from "./NextFormStep.svelte"
-import PrevFormStep from "./PrevFormStep.svelte"
+import ChangeFormStep from "./ChangeFormStep.svelte"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -55,11 +54,7 @@ export default [
     component: CloseScreenModal,
   },
   {
-    name: "Next Form Step",
-    component: NextFormStep,
-  },
-  {
-    name: "Previous Form Step",
-    component: PrevFormStep,
+    name: "Change Form Step",
+    component: ChangeFormStep,
   },
 ]

packages/client/src/constants.js

@@ -7,8 +7,7 @@ export const ActionTypes = {
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
   ClearForm: "ClearForm",
-  NextFormStep: "NextFormStep",
-  PrevFormStep: "PrevFormStep",
+  ChangeFormStep: "ChangeFormStep",
 }
 
 export const ApiVersion = "1"

packages/client/src/utils/buttonActions.js

@@ -105,19 +105,12 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
-const nextFormStepHandler = async (action, context) => {
+const changeFormStepHandler = async (action, context) => {
   return await executeActionHandler(
     context,
     action.parameters.componentId,
-    ActionTypes.NextFormStep
-  )
-}
-
-const prevFormStepHandler = async (action, context) => {
-  return await executeActionHandler(
-    context,
-    action.parameters.componentId,
-    ActionTypes.PrevFormStep
+    ActionTypes.ChangeFormStep,
+    action.parameters
   )
 }
 
@@ -138,8 +131,7 @@ const handlerMap = {
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
-  ["Next Form Step"]: nextFormStepHandler,
-  ["Previous Form Step"]: prevFormStepHandler,
+  ["Change Form Step"]: changeFormStepHandler,
 }
 
 const confirmTextMap = {

packages/standard-components/manifest.json

@@ -1706,8 +1706,7 @@
     "actions": [
       "ValidateForm",
       "ClearForm",
-      "NextFormStep",
-      "PrevFormStep"
+      "ChangeFormStep"
     ],
     "styles": ["size"],
     "settings": [
@@ -1768,9 +1767,6 @@
     "icon": "Form",
     "hasChildren": true,
     "illegalChildren": ["section"],
-    "actions": [
-      "ValidateFormStep"
-    ],
     "styles": ["size"],
     "settings": [
       {

packages/standard-components/src/forms/InnerForm.svelte

@@ -140,11 +140,16 @@
         get(field).fieldApi.clearValue()
       })
     },
-    nextStep: () => {
-      currentStep.update(step => step + 1)
-    },
-    prevStep: () => {
-      currentStep.update(step => Math.max(1, step - 1))
+    changeStep: ({ type, number }) => {
+      if (type === "next") {
+        currentStep.update(step => step + 1)
+      } else if (type === "prev") {
+        currentStep.update(step => Math.max(1, step - 1))
+      } else if (type === "first") {
+        currentStep.set(1)
+      } else if (type === "specific" && number && !isNaN(number)) {
+        currentStep.set(number)
+      }
     },
     setStep: step => {
       if (step) {
@@ -249,8 +254,7 @@
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
     { type: ActionTypes.ClearForm, callback: formApi.clear },
-    { type: ActionTypes.NextFormStep, callback: formApi.nextStep },
-    { type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
+    { type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
   ]
 </script>