Add 'on load' actions for screens

packages/builder/src/builderStore/dataBinding.js

@@ -694,6 +694,13 @@ export const getAllStateVariables = () => {
     })
   })
 
+  // Add on load settings from screens
+  get(store).screens.forEach(screen => {
+    if (screen.onLoad) {
+      eventSettings.push(screen.onLoad)
+    }
+  })
+
   // Extract all state keys from any "update state" actions in each setting
   let bindingSet = new Set()
   eventSettings.forEach(setting => {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte

@@ -17,6 +17,10 @@
   import { selectedScreen, store } from "builderStore"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { goto } from "@roxi/routify"
+  import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
+  import { getBindableProperties } from "builderStore/dataBinding"
+
+  $: bindings = getBindableProperties($selectedScreen, null)
 
   let errors = {}
 
@@ -147,6 +151,11 @@
         disabled: !!$selectedScreen.layoutId,
       },
     },
+    {
+      key: "onLoad",
+      label: "On screen load",
+      control: ButtonActionEditor,
+    },
   ]
 
   const removeCustomLayout = async () => {
@@ -178,6 +187,7 @@
         value={deepGet($selectedScreen, setting.key)}
         onChange={val => setScreenSetting(setting, val)}
         props={{ ...setting.props, error: errors[setting.key] }}
+        {bindings}
       />
     {/each}
     <Button cta on:click={() => $goto("../components")}>View components</Button>

packages/client/src/components/Screen.svelte

@@ -2,20 +2,35 @@
   import { screenStore, routeStore } from "stores"
   import Component from "./Component.svelte"
   import Provider from "./context/Provider.svelte"
-  import { onMount } from "svelte"
+  import { onMount, getContext } from "svelte"
+  import { enrichButtonActions } from "utils/buttonActions.js"
 
-  // Keep route params up to date
   export let params = {}
+
+  const context = getContext("context")
+
+  // Keep route params up to date
   $: routeStore.actions.setRouteParams(params || {})
 
   // Get the screen definition for the current route
   $: screenDefinition = $screenStore.activeScreen?.props
 
-  // Mark the router as loaded whenever the screen mounts
   onMount(() => {
+    // Mark the router as loaded whenever the screen mounts
     if (!$routeStore.routerLoaded) {
       routeStore.actions.setRouterLoaded()
     }
+
+    // Enrich and execute and on load actions.
+    // We manually construct the full context here as this component is the
+    // one that provides the url context, so it is not available in $context yet
+    if ($screenStore.activeScreen?.onLoad) {
+      const actions = enrichButtonActions($screenStore.activeScreen.onLoad, {
+        ...$context,
+        url: params,
+      })
+      actions()
+    }
   })
 </script>