diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index e659edf2a1..7cc936550f 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -16,7 +16,7 @@
.json()
// Extract data to pass to the iframe
- $: layout = currentAsset
+ $: layout = $currentAsset
$: screen =
$store.currentFrontEndType === "layout"
? screenPlaceholder
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 64dad8adce..36e56bac3f 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -33,8 +33,7 @@ export default `
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true;
- // TODO: need to update this
- window["##BUDIBASE_PREVIEW_PAGE##"] = layout;
+ window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout;
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen;
// Initialise app
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 462ace2a68..38d094baa8 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -15,7 +15,7 @@
let anchor
$: noChildrenAllowed =
- !component || !getComponentDefinition($store, component._component).children
+ !component || !getComponentDefinition($store, component._component)?.children
$: noPaste = !$store.componentToPaste
const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index d9b5f79538..6b2698a128 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -21,5 +21,6 @@
{#if loaded}
-
+ // TODO: need to get the active screen as well
+
{/if}
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index b79becc9cf..55252347d3 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -10,7 +10,7 @@
// Get the screen definition for the current route
$: screenDefinition = $screenStore.activeScreen?.props
- // Redirect to home page if no matching route
+ // Redirect to home layout if no matching route
$: screenDefinition == null && routeStore.actions.navigate("/")
// Make a screen array so we can use keying to properly re-render each screen
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 2925e950f6..afb27b05c9 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -7,7 +7,7 @@ const loadBudibase = () => {
// Update builder store with any builder flags
builderStore.set({
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
- page: window["##BUDIBASE_PREVIEW_PAGE##"],
+ layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
})
diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 4b197596be..f0ec2276b8 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -3,7 +3,7 @@ import { writable } from "svelte/store"
const createBuilderStore = () => {
const initialState = {
inBuilder: false,
- page: null,
+ layout: null,
screen: null,
}
return writable(initialState)
diff --git a/packages/client/src/store/screens.js b/packages/client/src/store/screens.js
index 2d977ec025..637e4aaf74 100644
--- a/packages/client/src/store/screens.js
+++ b/packages/client/src/store/screens.js
@@ -7,20 +7,20 @@ import { getAppId } from "../utils/getAppId"
const createScreenStore = () => {
const config = writable({
screens: [],
- page: {},
+ layouts: {},
})
const store = derived(
[config, routeStore, builderStore],
([$config, $routeStore, $builderStore]) => {
- let page
+ let activeLayout
let activeScreen
if ($builderStore.inBuilder) {
// Use builder defined definitions if inside the builder preview
- page = $builderStore.page
+ activeLayout = $builderStore.layout
activeScreen = $builderStore.screen
} else {
// Otherwise find the correct screen by matching the current route
- page = $config.page
+ activeLayout = $config.layouts
const { screens } = $config
if (screens.length === 1) {
activeScreen = screens[0]
@@ -29,8 +29,11 @@ const createScreenStore = () => {
screen => screen.routing.route === $routeStore.activeRoute
)
}
+ // TODO: need to pick the right layout based on link in screen
+ activeLayout = activeLayout[0]
}
- return { page, activeScreen }
+ // TODO: need to handle the active screen properly
+ return { activeLayout, activeScreen }
}
)
@@ -38,7 +41,7 @@ const createScreenStore = () => {
const appDefinition = await API.fetchAppDefinition(getAppId())
config.set({
screens: appDefinition.screens,
- page: appDefinition.page,
+ layouts: appDefinition.layouts,
})
}