diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 5d6e3a6bfc..53da1c3c4d 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -1,6 +1,12 @@
import { get, writable } from "svelte/store"
import { cloneDeep } from "lodash/fp"
-import { currentAsset, mainLayout, selectedComponent } from "builderStore"
+import {
+ currentAsset,
+ mainLayout,
+ selectedComponent,
+ selectedScreen,
+ store,
+} from "builderStore"
import {
datasources,
integrations,
@@ -280,6 +286,18 @@ export const getFrontendStore = () => {
promises.push(store.actions.screens.save(screen))
return await Promise.all(promises)
},
+ removeCustomLayout: async screen => {
+ // Pull relevant settings from old layout, if required
+ const layout = get(store).layouts.find(x => x._id === screen.layoutId)
+ screen.layoutId = null
+ if (screen.showNavigation == null) {
+ screen.showNavigation = layout?.props.navigation !== "None"
+ }
+ if (screen.width == null) {
+ screen.width = layout?.props.width || "Large"
+ }
+ await store.actions.screens.save(screen)
+ },
},
preview: {
saveSelected: async () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
index f18730307d..dbd23c462f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
@@ -1,10 +1,27 @@
+ {#if $selectedScreen.layoutId}
+
+ You can't preview your navigation settings using this screen as it uses
+ a custom layout, which is deprecated
+
+ {/if}
Your navigation is configured for all the screens within your app.
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
index b33f3609ba..71a1a1d0ac 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
@@ -148,19 +148,7 @@
]
const removeCustomLayout = async () => {
- let screen = get(selectedScreen)
-
- // Pull relevant settings from old layout, if required
- const layout = get(store).layouts.find(x => x._id === screen.layoutId)
- screen.layoutId = null
- if (screen.showNavigation == null) {
- screen.showNavigation = layout?.props.navigation !== "None"
- }
- if (screen.width == null) {
- screen.width = layout?.props.width || "Large"
- }
-
- await store.actions.screens.save(screen)
+ return store.actions.screens.removeCustomLayout(get(selectedScreen))
}
@@ -173,7 +161,7 @@
{#if $selectedScreen.layoutId}