Merge pull request #6409 from Budibase/useful-features

"On screen load" actions & query params binding

packages/builder/src/builderStore/dataBinding.js

@@ -390,11 +390,17 @@ const getUrlBindings = asset => {
     }
   })
   const safeURL = makePropSafe("url")
-  return params.map(param => ({
+  const urlParamBindings = params.map(param => ({
     type: "context",
     runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
     readableBinding: `URL.${param}`,
   }))
+  const queryParamsBinding = {
+    type: "context",
+    runtimeBinding: makePropSafe("query"),
+    readableBinding: "Query params",
+  }
+  return urlParamBindings.concat([queryParamsBinding])
 }
 
 const getRoleBindings = () => {
@@ -694,6 +700,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/ClientApp.svelte

@@ -24,6 +24,7 @@
   import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
   import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
   import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
+  import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
   import SettingsBar from "components/preview/SettingsBar.svelte"
   import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
   import HoverIndicator from "components/preview/HoverIndicator.svelte"
@@ -94,6 +95,7 @@
       <UserBindingsProvider>
         <StateBindingsProvider>
           <RowSelectionProvider>
+            <QueryParamsProvider>
               <!-- Settings bar can be rendered outside of device preview -->
               <!-- Key block needs to be outside the if statement or it breaks -->
               {#key $builderStore.selectedComponentId}
@@ -183,6 +185,7 @@
                   <DNDHandler />
                 {/if}
               </div>
+            </QueryParamsProvider>
           </RowSelectionProvider>
         </StateBindingsProvider>
       </UserBindingsProvider>

packages/client/src/components/Screen.svelte

@@ -1,21 +1,36 @@
 <script>
-  import { screenStore, routeStore } from "stores"
+  import { screenStore, routeStore, builderStore } 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"
+
+  export let params = {}
+
+  const context = getContext("context")
 
   // Keep route params up to date
-  export let params = {}
   $: 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 && !$builderStore.inBuilder) {
+      const actions = enrichButtonActions($screenStore.activeScreen.onLoad, {
+        ...$context,
+        url: params,
+      })
+      actions()
+    }
   })
 </script>
 

packages/client/src/components/context/QueryParamsProvider.svelte

@@ -0,0 +1,8 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { routeStore } from "stores"
+</script>
+
+<Provider key="query" data={$routeStore.queryParams}>
+  <slot />
+</Provider>