diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
index 272f627163..c2072f3ced 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
@@ -5,7 +5,7 @@ export class Screen extends BaseStructure {
constructor() {
super(true)
this._json = {
- layoutId: "layout_private_master",
+ showNavigation: true,
props: {
_id: Helpers.uuid(),
_component: "@budibase/standard-components/container",
diff --git a/packages/client/src/components/devtools/DevToolsStatsTab.svelte b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
index ab029db815..b20b9fafa0 100644
--- a/packages/client/src/components/devtools/DevToolsStatsTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
@@ -14,8 +14,6 @@
value={`${$appStore.clientLoadTime} ms`}
/>
{/if}
-
-
{
const createBuilderStore = () => {
const initialState = {
inBuilder: false,
- layout: null,
screen: null,
selectedComponentId: null,
editMode: false,
@@ -20,6 +19,9 @@ const createBuilderStore = () => {
customTheme: null,
previewDevice: "desktop",
isDragging: false,
+
+ // Legacy - allow the builder to specify a layout
+ layout: null,
}
const store = writable(initialState)
const actions = {
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 9635f2b5a0..2b19ac9aa9 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -13,31 +13,69 @@ const createScreenStore = () => {
[appStore, routeStore, builderStore],
([$appStore, $routeStore, $builderStore]) => {
let activeLayout, activeScreen
- let layouts, screens
+ let screens
+
if ($builderStore.inBuilder) {
// Use builder defined definitions if inside the builder preview
- activeLayout = $builderStore.layout
activeScreen = $builderStore.screen
- layouts = [activeLayout]
screens = [activeScreen]
- } else {
- activeLayout = { props: { _component: "screenslot" } }
+ // Legacy - allow the builder to specify a layout
+ if ($builderStore.layout) {
+ activeLayout = $builderStore.layout
+ }
+ } else {
// Find the correct screen by matching the current route
screens = $appStore.screens
- layouts = $appStore.layouts
if ($routeStore.activeRoute) {
activeScreen = screens.find(
screen => screen._id === $routeStore.activeRoute.screenId
)
}
+
+ // Legacy - find the custom layout for the selected screen
if (activeScreen) {
- activeLayout = layouts.find(
+ const screenLayout = $appStore.layouts?.find(
layout => layout._id === activeScreen.layoutId
)
+ if (screenLayout) {
+ activeLayout = screenLayout
+ }
}
}
- return { layouts, screens, activeLayout, activeScreen }
+
+ // If we don't have a legacy custom layout, build a layout structure
+ // from the screen navigation settings
+ if (!activeLayout) {
+ activeLayout = {
+ _id: "layout",
+ props: {
+ _component: "@budibase/standard-components/layout",
+ _children: [
+ {
+ _component: "screenslot",
+ _id: "screenslot",
+ _styles: {
+ normal: {
+ flex: "1 1 auto",
+ display: "flex",
+ "flex-direction": "column",
+ "justify-content": "flex-start",
+ "align-items": "stretch",
+ },
+ },
+ },
+ ],
+ // If this is a legacy screen without any navigation settings,
+ // fall back to just showing the app title
+ ...(activeScreen.navigation || {
+ title: $appStore.application?.name,
+ }),
+ },
+ }
+ }
+
+ return { screens, activeLayout, activeScreen }
}
)