@sap-ux/preview-middleware 1.1.2 → 1.2.0

package/dist/client/flp/sandbox1Init.ts

@@ -0,0 +1,174 @@
+import Log from 'sap/base/Log';
+import type AppLifeCycle from 'sap/ushell/services/AppLifeCycle';
+import type { FlexSettings } from 'sap/ui/rta/RuntimeAuthoring';
+import { SCENARIO, type Scenario } from '@sap-ux-private/control-property-editor-common';
+import type Component from 'sap/ui/core/Component';
+import IconPool from 'sap/ui/core/IconPool';
+import ResourceBundle from 'sap/base/i18n/ResourceBundle';
+import { getError } from '../utils/error.js';
+import initConnectors from './initConnectors.js';
+import { getUi5Version } from '../utils/version.js';
+import { getManifestAppdescr } from '../adp/api-handler.js';
+import {
+    addCardGenerationUserAction,
+    registerComponentDependencyPaths,
+    registerForControllerExtensionErrors,
+    resetAppState,
+    startRtaForAppInstance
+} from './common.js';
+
+/**
+ * Register SAP fonts that are also registered in a productive Fiori launchpad.
+ */
+export function registerSAPFonts() {
+    const fioriTheme = {
+        fontFamily: 'SAP-icons-TNT',
+        fontURI: sap.ui.require.toUrl('sap/tnt/themes/base/fonts/')
+    };
+    IconPool.registerFont(fioriTheme);
+    const suiteTheme = {
+        fontFamily: 'BusinessSuiteInAppSymbols',
+        fontURI: sap.ui.require.toUrl('sap/ushell/themes/base/fonts/')
+    };
+    IconPool.registerFont(suiteTheme);
+}
+
+/**
+ * Create Resource Bundle based on the scenario.
+ *
+ * @param scenario to be used for the resource bundle.
+ */
+export async function loadI18nResourceBundle(scenario: Scenario): Promise<ResourceBundle> {
+    if (scenario === SCENARIO.AdaptationProject) {
+        const manifest = await getManifestAppdescr();
+        const enhanceWith = (manifest.content as { texts: { i18n: string } }[])
+            .filter((content) => content.texts?.i18n)
+            .map((content) => ({ bundleUrl: `../${content.texts.i18n}` }));
+        return ResourceBundle.create({
+            url: '../i18n/i18n.properties',
+            enhanceWith
+        });
+    }
+    return ResourceBundle.create({
+        url: 'i18n/i18n.properties'
+    });
+}
+
+/**
+ * Read the application title from the resource bundle and set it as document title.
+ *
+ * @param resourceBundle resource bundle to read the title from.
+ * @param i18nKey optional parameter to define the i18n key to be used for the title.
+ */
+export function setI18nTitle(resourceBundle: ResourceBundle, i18nKey = 'appTitle') {
+    if (resourceBundle.hasText(i18nKey)) {
+        document.title = resourceBundle.getText(i18nKey) ?? document.title;
+    }
+}
+
+/**
+ * Apply additional configuration and initialize sandbox.
+ *
+ * @param params init parameters read from the script tag
+ * @param params.appUrls JSON containing a string array of application urls
+ * @param params.flex JSON containing the flex configuration
+ * @param params.customInit path to the custom init module to be called
+ * @param params.enhancedHomePage boolean indicating if enhanced homepage is enabled
+ * @returns promise
+ */
+export async function init({
+    appUrls,
+    flex,
+    customInit,
+    enhancedHomePage,
+    enableCardGenerator
+}: {
+    appUrls?: string | null;
+    flex?: string | null;
+    customInit?: string | null;
+    enhancedHomePage?: boolean | null;
+    enableCardGenerator?: boolean;
+}): Promise<void> {
+    const urlParams = new URLSearchParams(globalThis.location.search);
+    const container =
+        sap?.ushell?.Container ??
+        ((await import('sap/ushell/Container')).default);
+    let scenario: string = '';
+    const ui5VersionInfo = await getUi5Version();
+    // Register RTA if configured
+    if (flex) {
+        registerForControllerExtensionErrors();
+        const flexSettings = JSON.parse(flex) as FlexSettings;
+        scenario = flexSettings.scenario;
+        container.attachRendererCreatedEvent(async function () {
+            const lifecycleService = await container.getServiceAsync<AppLifeCycle>('AppLifeCycle');
+            lifecycleService.attachAppLoaded((event) => {
+                // Prevent starting RTA when the FLP home component (#Shell-home) fires attachAppLoaded before the user navigates to the actual app.
+                if (!globalThis.location.hash || globalThis.location.hash.startsWith('#Shell-home')) {
+                    return;
+                }
+                startRtaForAppInstance(event.getParameter('componentInstance'), flexSettings, ui5VersionInfo);
+            });
+        });
+    }
+    if (enableCardGenerator) {
+        container.attachRendererCreatedEvent(async function () {
+            const lifecycleService = await container.getServiceAsync<AppLifeCycle>('AppLifeCycle');
+            lifecycleService.attachAppLoaded((event) => {
+                const componentInstance = event.getParameter('componentInstance');
+                addCardGenerationUserAction(componentInstance as unknown as Component, container);
+            });
+        });
+    }
+
+    // reset app state if requested
+    if (urlParams.get('fiori-tools-iapp-state')?.toLocaleLowerCase() !== 'true') {
+        await resetAppState(container);
+    }
+
+    // Load custom library paths if configured
+    if (appUrls) {
+        await registerComponentDependencyPaths((JSON.parse(appUrls) as string[]) ?? [], urlParams);
+    }
+
+    // Load rta connector
+    await initConnectors();
+
+    // Load custom initialization module
+    if (customInit) {
+        sap.ui.require([customInit]);
+    }
+
+    // init
+    const resourceBundle = await loadI18nResourceBundle(scenario as Scenario);
+    setI18nTitle(resourceBundle);
+    registerSAPFonts();
+
+    if (enhancedHomePage) {
+        await container.init('cdm');
+    }
+
+    const renderer =
+        ui5VersionInfo.major < 2 && !ui5VersionInfo.label?.includes('legacy-free')
+            ? await container.createRenderer(undefined, true)
+            : await container.createRendererInternal(undefined, true);
+    renderer.placeAt('content');
+}
+
+// eslint-disable-next-line @sap-ux/fiori-tools/sap-no-dom-access,@sap-ux/fiori-tools/sap-browser-api-warning, @sap-ux/fiori-tools/sap-no-global-variable
+const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+if (bootstrapConfig) {
+    // DO NOT refactor to top-level await. This module is loaded via sap.ui.define (AMD),
+    // and using `await` at the top level of an AMD module callback prevents sap.ui.define
+    // from completing module registration.
+    init({
+        appUrls: bootstrapConfig.dataset.openUxPreviewLibsManifests,
+        flex: bootstrapConfig.dataset.openUxPreviewFlexSettings,
+        customInit: bootstrapConfig.dataset.openUxPreviewCustomInit,
+        enhancedHomePage: !!bootstrapConfig.dataset.openUxPreviewEnhancedHomepage,
+        enableCardGenerator: !!bootstrapConfig.dataset.openUxPreviewEnableCardGenerator
+    }).catch((e) => {
+        const error = getError(e);
+        Log.error('Sandbox initialization failed: ' + error.message);
+    });
+}

package/dist/client/flp/sandbox2AfterInit.js

@@ -0,0 +1,66 @@
+"use strict";
+
+sap.ui.define(["./common", "./initConnectors", "../utils/version"], function (___commonjs, __initConnectors, ___utils_versionjs) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  const addCardGenerationUserAction = ___commonjs["addCardGenerationUserAction"];
+  const registerForControllerExtensionErrors = ___commonjs["registerForControllerExtensionErrors"];
+  const resetAppState = ___commonjs["resetAppState"];
+  const startRtaForAppInstance = ___commonjs["startRtaForAppInstance"];
+  const initConnectors = _interopRequireDefault(__initConnectors);
+  const getUi5Version = ___utils_versionjs["getUi5Version"];
+  /**
+   * AfterFlpStart hook for FLP Sandbox 2.0.
+   * Called by the sandbox after the FLP renderer is fully up (Container initialized,
+   * renderer created and placed). Safe to use sap/ushell/Container at this point.
+   */
+  async function execute() {
+    // eslint-disable-next-line @sap-ux/fiori-tools/sap-no-dom-access,@sap-ux/fiori-tools/sap-browser-api-warning
+    const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+    const flex = bootstrapConfig?.dataset.openUxPreviewFlexSettings;
+    const enableCardGenerator = !!bootstrapConfig?.dataset.openUxPreviewEnableCardGenerator;
+    const enhancedHomePage = !!bootstrapConfig?.dataset.openUxPreviewEnhancedHomepage;
+    const urlParams = new URLSearchParams(globalThis.location.search);
+    const container = sap.ushell.Container;
+    const ui5VersionInfo = await getUi5Version();
+
+    // Reset app state unless explicitly suppressed
+    if (urlParams.get('fiori-tools-iapp-state')?.toLocaleLowerCase() !== 'true') {
+      await resetAppState(container);
+    }
+    if (flex || enableCardGenerator) {
+      const lifecycleService = await container.getServiceAsync('AppLifeCycle');
+      if (flex) {
+        registerForControllerExtensionErrors();
+        const flexSettings = JSON.parse(flex);
+        lifecycleService.attachAppLoaded(event => {
+          // Prevent starting RTA when the FLP home component fires attachAppLoaded before the user navigates to the actual app
+          if (!globalThis.location.hash || globalThis.location.hash.startsWith('#Shell-home')) {
+            return;
+          }
+          startRtaForAppInstance(event.getParameter('componentInstance'), flexSettings, ui5VersionInfo);
+        });
+      }
+      if (enableCardGenerator) {
+        lifecycleService.attachAppLoaded(event => {
+          addCardGenerationUserAction(event.getParameter('componentInstance'), container);
+        });
+      }
+    }
+
+    // Initialize RTA connectors
+    await initConnectors();
+    if (enhancedHomePage) {
+      await container.init('cdm');
+    }
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.execute = execute;
+  return __exports;
+});
+//# sourceMappingURL=sandbox2AfterInit.js.map

package/dist/client/flp/sandbox2AfterInit.ts

@@ -0,0 +1,63 @@
+import type AppLifeCycle from 'sap/ushell/services/AppLifeCycle';
+import type Component from 'sap/ui/core/Component';
+import type { FlexSettings } from 'sap/ui/rta/RuntimeAuthoring';
+import {
+    addCardGenerationUserAction,
+    registerForControllerExtensionErrors,
+    resetAppState,
+    startRtaForAppInstance
+} from './common.js';
+import initConnectors from './initConnectors.js';
+import { getUi5Version } from '../utils/version.js';
+
+/**
+ * AfterFlpStart hook for FLP Sandbox 2.0.
+ * Called by the sandbox after the FLP renderer is fully up (Container initialized,
+ * renderer created and placed). Safe to use sap/ushell/Container at this point.
+ */
+export async function execute(): Promise<void> {
+    // eslint-disable-next-line @sap-ux/fiori-tools/sap-no-dom-access,@sap-ux/fiori-tools/sap-browser-api-warning
+    const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+    const flex = bootstrapConfig?.dataset.openUxPreviewFlexSettings;
+    const enableCardGenerator = !!bootstrapConfig?.dataset.openUxPreviewEnableCardGenerator;
+    const enhancedHomePage = !!bootstrapConfig?.dataset.openUxPreviewEnhancedHomepage;
+
+    const urlParams = new URLSearchParams(globalThis.location.search);
+    const container = sap.ushell.Container;
+    const ui5VersionInfo = await getUi5Version();
+
+    // Reset app state unless explicitly suppressed
+    if (urlParams.get('fiori-tools-iapp-state')?.toLocaleLowerCase() !== 'true') {
+        await resetAppState(container);
+    }
+
+    if (flex || enableCardGenerator) {
+        const lifecycleService = await container.getServiceAsync<AppLifeCycle>('AppLifeCycle');
+        if (flex) {
+            registerForControllerExtensionErrors();
+            const flexSettings = JSON.parse(flex) as FlexSettings;
+            lifecycleService.attachAppLoaded((event) => {
+                // Prevent starting RTA when the FLP home component fires attachAppLoaded before the user navigates to the actual app
+                if (!globalThis.location.hash || globalThis.location.hash.startsWith('#Shell-home')) {
+                    return;
+                }
+                startRtaForAppInstance(event.getParameter('componentInstance'), flexSettings, ui5VersionInfo);
+            });
+        }
+        if (enableCardGenerator) {
+            lifecycleService.attachAppLoaded((event) => {
+                addCardGenerationUserAction(
+                    event.getParameter('componentInstance') as unknown as Component,
+                    container
+                );
+            });
+        }
+    }
+
+    // Initialize RTA connectors
+    await initConnectors();
+
+    if (enhancedHomePage) {
+        await container.init('cdm');
+    }
+}

package/dist/client/flp/sandbox2BeforeInit.js

@@ -0,0 +1,67 @@
+"use strict";
+
+sap.ui.define(["./common"], function (___commonjs) {
+  "use strict";
+
+  const registerComponentDependencyPaths = ___commonjs["registerComponentDependencyPaths"];
+  /**
+   * Registers the ADP variant's `changes` namespace to resolve against the local dev server.
+   *
+   * In FLP Sandbox 2.0 the CDM registers the ADP variant component namespace (e.g. `adp/v2app`)
+   * against the backend URL so the base app Component/manifest load from the backend. That would
+   * also route flex-change resources (fragments, code extensions under `<namespace>/changes/...`)
+   * to the backend. This registers the more-specific `<namespace>/changes` sub-path to the local
+   * dev-server root so UI5's longest-prefix loader resolution serves those local files, matching
+   * Sandbox 1 behaviour. The base component namespace registration is left untouched.
+   *
+   * @param projectId the ADP variant id (e.g. `adp.v2app`), as provided in flexSettings
+   * @param baseUrl the local base URL prefix for the dev server (maybe empty)
+   */
+  function registerAdpChangesResourceRoot(projectId, baseUrl = '') {
+    if (!projectId) {
+      return;
+    }
+    const namespace = `${projectId.replaceAll('.', '/')}/changes`;
+    const config = {
+      paths: {}
+    };
+    config.paths[namespace] = `${baseUrl}/changes`;
+    sap.ui.loader.config(config);
+  }
+
+  /**
+   * BeforeFlpStart hook for FLP Sandbox 2.0.
+   * Called by the sandbox before the FLP starts. Must NOT require sap/ushell modules —
+   * Container is not yet initialized at this point (StartSandbox.js loads it after this hook).
+   */
+  async function execute() {
+    // eslint-disable-next-line @sap-ux/fiori-tools/sap-no-dom-access,@sap-ux/fiori-tools/sap-browser-api-warning
+    const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+    const appUrls = bootstrapConfig?.dataset.openUxPreviewLibsManifests;
+    const customInit = bootstrapConfig?.dataset.openUxPreviewCustomInit;
+    const flex = bootstrapConfig?.dataset.openUxPreviewFlexSettings;
+    const baseUrl = bootstrapConfig?.dataset.openUxPreviewBaseUrl ?? '';
+    const urlParams = new URLSearchParams(globalThis.location.search);
+
+    // For ADP, register the variant's changes namespace locally so flex-change resources
+    // (fragments, code extensions) resolve against the dev server instead of the backend.
+    if (flex) {
+      const flexSettings = JSON.parse(flex);
+      if (flexSettings.projectId) {
+        registerAdpChangesResourceRoot(flexSettings.projectId, baseUrl);
+      }
+    }
+    if (appUrls) {
+      await registerComponentDependencyPaths(JSON.parse(appUrls) ?? [], urlParams);
+    }
+    if (customInit) {
+      sap.ui.require([customInit]);
+    }
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.execute = execute;
+  return __exports;
+});
+//# sourceMappingURL=sandbox2BeforeInit.js.map

package/dist/client/flp/sandbox2BeforeInit.ts

@@ -0,0 +1,60 @@
+import type { FlexSettings } from 'sap/ui/rta/RuntimeAuthoring';
+import { registerComponentDependencyPaths } from './common.js';
+
+/**
+ * Registers the ADP variant's `changes` namespace to resolve against the local dev server.
+ *
+ * In FLP Sandbox 2.0 the CDM registers the ADP variant component namespace (e.g. `adp/v2app`)
+ * against the backend URL so the base app Component/manifest load from the backend. That would
+ * also route flex-change resources (fragments, code extensions under `<namespace>/changes/...`)
+ * to the backend. This registers the more-specific `<namespace>/changes` sub-path to the local
+ * dev-server root so UI5's longest-prefix loader resolution serves those local files, matching
+ * Sandbox 1 behaviour. The base component namespace registration is left untouched.
+ *
+ * @param projectId the ADP variant id (e.g. `adp.v2app`), as provided in flexSettings
+ * @param baseUrl the local base URL prefix for the dev server (maybe empty)
+ */
+function registerAdpChangesResourceRoot(projectId: string, baseUrl = ''): void {
+    if (!projectId) {
+        return;
+    }
+    const namespace = `${projectId.replaceAll('.', '/')}/changes`;
+    const config = {
+        paths: {} as Record<string, string>
+    };
+    config.paths[namespace] = `${baseUrl}/changes`;
+    sap.ui.loader.config(config);
+}
+
+/**
+ * BeforeFlpStart hook for FLP Sandbox 2.0.
+ * Called by the sandbox before the FLP starts. Must NOT require sap/ushell modules —
+ * Container is not yet initialized at this point (StartSandbox.js loads it after this hook).
+ */
+export async function execute(): Promise<void> {
+    // eslint-disable-next-line @sap-ux/fiori-tools/sap-no-dom-access,@sap-ux/fiori-tools/sap-browser-api-warning
+    const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+    const appUrls = bootstrapConfig?.dataset.openUxPreviewLibsManifests;
+    const customInit = bootstrapConfig?.dataset.openUxPreviewCustomInit;
+    const flex = bootstrapConfig?.dataset.openUxPreviewFlexSettings;
+    const baseUrl = bootstrapConfig?.dataset.openUxPreviewBaseUrl ?? '';
+
+    const urlParams = new URLSearchParams(globalThis.location.search);
+
+    // For ADP, register the variant's changes namespace locally so flex-change resources
+    // (fragments, code extensions) resolve against the dev server instead of the backend.
+    if (flex) {
+        const flexSettings = JSON.parse(flex) as FlexSettings & { projectId?: string };
+        if (flexSettings.projectId) {
+            registerAdpChangesResourceRoot(flexSettings.projectId, baseUrl);
+        }
+    }
+
+    if (appUrls) {
+        await registerComponentDependencyPaths((JSON.parse(appUrls) as string[]) ?? [], urlParams);
+    }
+
+    if (customInit) {
+        sap.ui.require([customInit]);
+    }
+}

package/dist/types/index.d.ts

@@ -62,6 +62,17 @@ export interface FlpConfig {
      * Optional: if set to true then the new FLP homepage will be enabled
      */
     enhancedHomePage?: boolean;
+    /**
+     * Optional: if set to true, opts in to the new FLP Sandbox when the UI5 version qualifies (>= 1.150).
+     * Defaults to false.
+     */
+    useNewSandbox?: boolean;
+    /**
+     * Optional: if set to true, the new FLP Sandbox will navigate directly to the app on startup
+     * instead of showing the FLP home screen first. Only applies when the new Sandbox is active.
+     * Defaults to false.
+     */
+    navigateToApp?: boolean;
 }
 /**
  * Configration for the virtual test pages endpoints.
@@ -244,6 +255,16 @@ export declare const FLPHomePageDefaults: {
     catalogId: string;
     sectionId: string;
 };
+export type Ui5Version = {
+    major: number;
+    minor: number;
+    patch: number;
+    label?: string;
+    /**
+     * Indicates if the UI5 version is served from CDN.
+     */
+    isCdn: boolean;
+};
 export interface MultiCardsPayload {
     type: string;
     manifest: CardManifest;

package/package.json

@@ -10,7 +10,7 @@
   "bugs": {
     "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
   },
-  "version": "1.1.2",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -28,12 +28,12 @@
     "mem-fs-editor": "9.4.0",
     "qrcode": "1.5.4",
     "@sap/bas-sdk": "3.13.10",
-    "@sap-ux/adp-tooling": "1.0.41",
+    "@sap-ux/adp-tooling": "1.0.43",
     "@sap-ux/btp-utils": "2.0.6",
     "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@1.0.10",
     "@sap-ux/feature-toggle": "1.0.5",
-    "@sap-ux/project-access": "2.1.10",
     "@sap-ux/logger": "1.0.3",
+    "@sap-ux/project-access": "2.1.10",
     "@sap-ux/system-access": "1.0.10",
     "@sap-ux/i18n": "1.0.2"
   },
@@ -54,11 +54,11 @@
     "nock": "14.0.16",
     "npm-run-all2": "9.0.2",
     "supertest": "7.2.2",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@1.1.2",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@1.2.0",
+    "@sap-ux-private/playwright": "1.0.6",
     "@sap-ux/axios-extension": "2.0.8",
     "@sap-ux/store": "2.0.6",
-    "@sap-ux/ui5-info": "1.0.6",
-    "@sap-ux-private/playwright": "1.0.6"
+    "@sap-ux/ui5-info": "1.0.6"
   },
   "peerDependencies": {
     "express": "4"

package/templates/flp/cdm.ejs

@@ -43,7 +43,7 @@
         data-sap-ui-xx-componentPreload="off"<%- ui5.bootstrapOptions %><% if (enableCardGenerator) { %>
         data-open-ux-preview-enable-card-generator="<%- enableCardGenerator %>"
         <% } %>
-        data-sap-ui-oninit="module:open/ux/preview/client/flp/init"<% if (locals.init) { %>
+        data-sap-ui-oninit="module:open/ux/preview/client/flp/sandbox1Init"<% if (locals.init) { %>
         data-open-ux-preview-custom-init='<%- init %>'<% } if (locals.flexSettings) { %>
         data-open-ux-preview-features='<%- JSON.stringify(features) %>'
         data-open-ux-preview-flex-settings='<%- JSON.stringify(flexSettings) %>'<% } if (locals.locateReuseLibsScript) { %>

package/templates/flp/sandbox.ejs

@@ -57,7 +57,7 @@
         data-sap-ui-xx-componentPreload="off"<%- ui5.bootstrapOptions %><% if (enableCardGenerator) { %>
         data-open-ux-preview-enable-card-generator="<%- enableCardGenerator %>"
         <% } %>
-        data-sap-ui-oninit="module:open/ux/preview/client/flp/init"<% if (locals.init) { %>
+        data-sap-ui-oninit="module:open/ux/preview/client/flp/sandbox1Init"<% if (locals.init) { %>
         data-open-ux-preview-custom-init='<%- init %>'<% } if (locals.flexSettings) { %>
         data-open-ux-preview-features='<%- JSON.stringify(features) %>'
         data-open-ux-preview-flex-settings='<%- JSON.stringify(flexSettings) %>'<% } if (locals.locateReuseLibsScript) { %>

package/templates/flp/sandbox2.ejs

@@ -8,63 +8,30 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Local FLP Sandbox</title>
 
-    <!-- Bootstrap the unified shell in sandbox mode for standalone usage.
+<% if (ui5.versionMajor === 1) { -%>
+    <!-- FLP Sandbox Boot task - registers ConfigurationProvider via xx-bootTask mechanism -->
+    <script src="<%- basePath %>/resources/sap/ushell/sandbox/SandboxBootTask.js"></script>
 
-         The renderer is specified in the global Unified Shell configuration object "sap-ushell-config".
-
-         The fiori2 renderer will render the shell header allowing, for instance,
-         testing of additional application setting buttons.
-
-         The navigation target resolution service is configured in a way that the empty URL hash is
-         resolved to our own application.
-
-         This example uses relative path references for the SAPUI5 resources and test-resources;
-         it might be necessary to adapt them depending on the target runtime platform.
-         The sandbox platform is restricted to development or demo use cases and must NOT be used
-         for productive scenarios.
-    -->
-    <script type="text/javascript">
-        window["sap-ushell-config"] = {
-            defaultRenderer: "fiori2",
-            renderers: {
-                fiori2: {
-                    componentData: {
-                        config: {
-                            search: "hidden",
-                            enableSearch: false
-                        }
-                    }
-                }
-            },
-            applications:  <%- JSON.stringify(apps) %>
-        };
-    </script>
-
-    <script src="<%- basePath %>/resources/sap/ushell/bootstrap/sandbox2.js" id="sap-ushell-bootstrap"></script>
-    <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions="allow"' is a NON-SECURE setting for test environments -->
+<% } -%>
+    <!-- Bootstrap the UI5 core library. 'data-sap-ui-frame-options="allow"' is a NON-SECURE setting for test environments -->
     <script id="sap-ui-bootstrap"
         src="<%- basePath %>/resources/sap-ui-core.js"
-        data-sap-ui-libs="<%- ui5.libs %>"
         data-sap-ui-async="true"
         data-sap-ui-theme="<%- ui5.theme %>"
         data-sap-ui-compat-version="edge"
-        data-sap-ui-language="en"
-        data-sap-ui-flexibility-services='<%- JSON.stringify(ui5.flex) %>'
         data-sap-ui-resource-roots='<%- JSON.stringify(ui5.resources) %>'
-        data-sap-ui-frame-options="allow"
-        data-sap-ui-xx-component-preload="off"<%- ui5.bootstrapOptions %><% if (enableCardGenerator) { %>
+        data-sap-ui-frame-options="allow"<% if (ui5.versionMajor !== 1) { %>
+        data-sap-ui-boot-manifest="sap/ushell/sandbox/sandboxManifest.json"<% } %><%- ui5.bootstrapOptions %><% if (enableCardGenerator) { %>
         data-open-ux-preview-enable-card-generator="<%- enableCardGenerator %>"
-        <% } %>
-        data-sap-ui-on-init="module:open/ux/preview/client/flp/init"<% if (locals.init) { %>
+        <% } %><% if (locals.init) { %>
         data-open-ux-preview-custom-init='<%- init %>'<% } if (locals.flexSettings) { %>
         data-open-ux-preview-features='<%- JSON.stringify(features) %>'
         data-open-ux-preview-flex-settings='<%- JSON.stringify(flexSettings) %>'<% } if (locals.locateReuseLibsScript) { %>
         data-open-ux-preview-libs-manifests='<%- JSON.stringify(Object.values(apps).map(app => app.url)) %>'<% } %>
         data-open-ux-preview-base-url='<%- baseUrl %>'>
     </script>
-
 <% if (locals.flexSettings && flexSettings?.developerMode) { %>
-        <!-- Hides Rta native toolbar  -->
+    <!-- Hides Rta native toolbar  -->
     <style>
         #shell-header, .sapUiRtaToolbar {
             visibility: hidden;
@@ -80,7 +47,8 @@
 </head>
 
 <!-- UI Content -->
-<body class="sapUiBody" id="content">
+<body class="sapUiBody">
+    <div id="canvas"></div>
 </body>
 
-</html>
+</html>