Add button actions for navigating form steps

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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,35 @@
+<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/index.js

@@ -7,6 +7,8 @@ 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"
 
 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@@ -52,4 +54,12 @@ export default [
     name: "Close Screen Modal",
     component: CloseScreenModal,
   },
+  {
+    name: "Next Form Step",
+    component: NextFormStep,
+  },
+  {
+    name: "Previous Form Step",
+    component: PrevFormStep,
+  },
 ]

packages/client/src/utils/buttonActions.js

@@ -99,6 +99,22 @@ const clearFormHandler = async (action, context) => {
   )
 }
 
+const nextFormStepHandler = 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
+  )
+}
+
 const closeScreenModalHandler = () => {
   // Emit this as a window event, so parent screens which are iframing us in
   // can close the modal
@@ -116,6 +132,8 @@ const handlerMap = {
   ["Log Out"]: logoutHandler,
   ["Clear Form"]: clearFormHandler,
   ["Close Screen Modal"]: closeScreenModalHandler,
+  ["Next Form Step"]: nextFormStepHandler,
+  ["Previous Form Step"]: prevFormStepHandler,
 }
 
 const confirmTextMap = {

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

@@ -7,12 +7,19 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
   const formContext = getContext("form")
+
+  $: formState = formContext?.formState
 </script>
 
 {#if !formContext}
   <Placeholder text="Form steps need to be wrapped in a form" />
-{:else}
+{:else if step === $formState.step}
   <div use:styleable={$component.styles}>
+    <div>
+      Step {step} is visible!
+    </div>
     <slot />
   </div>
+{:else}
+  <div>hiding step {step}!</div>
 {/if}