@sap-ux/preview-middleware 1.1.3 → 1.2.1

package/dist/base/flp.js

@@ -13,7 +13,7 @@ import { isAppStudio, exposePort } from '@sap-ux/btp-utils';
 import { FeatureToggleAccess } from '@sap-ux/feature-toggle';
 import { deleteChange, readChanges, readLocalModulePaths, stripLocalModulesFromLrepResponse, writeChange } from './flex.js';
 import { generateImportList, mergeTestConfigDefaults } from './test.js';
-import { getFlpConfigWithDefaults, createFlpTemplateConfig, PREVIEW_URL, isFlexConnector, createTestTemplateConfig, addApp, getAppName, sanitizeRtaConfig, CARD_GENERATOR_DEFAULT, remapResourcesForPath } from './config.js';
+import { getFlpConfigWithDefaults, createFlpTemplateConfig, PREVIEW_URL, isFlexConnector, createTestTemplateConfig, addApp, getAppName, sanitizeRtaConfig, CARD_GENERATOR_DEFAULT, remapResourcesForPath, generateSandboxAppConfig, qualifiesForNewSandbox } from './config.js';
 import { generateCdm } from './cdm.js';
 import { readFileSync } from 'node:fs';
 import { getIntegrationCard } from './utils/cards.js';
@@ -89,7 +89,7 @@ export class FlpSandbox {
         this.createFlexHandler();
         this.flpConfig.libs ??= await this.hasLocateReuseLibsScript();
         const id = manifest['sap.app']?.id ?? '';
-        this.templateConfig = createFlpTemplateConfig(this.flpConfig, manifest, resources, adp !== undefined);
+        this.templateConfig = createFlpTemplateConfig(this.flpConfig, manifest, resources, adp !== undefined, this.projectType !== 'EDMXBackend', this.logger);
         this.adp = adp;
         this.manifest = manifest;
         await addApp(this.templateConfig, manifest, {
@@ -161,14 +161,15 @@ export class FlpSandbox {
      * Also deletes the ABAP connector in case of a CAP project.
      * Deletes all connectors if UI5 version is < 1.84 and served from npmjs.
      *
+     * @param config - the template config to mutate (must be a per-request clone, not the shared this.templateConfig)
      * @param ui5VersionMajor - the major version of UI5
      * @param ui5VersionMinor - the minor version of UI5
      * @param isCDN - whether the UI5 sources are served from CDN
      * @private
      */
-    checkDeleteConnectors(ui5VersionMajor, ui5VersionMinor, isCDN) {
+    checkDeleteConnectors(config, ui5VersionMajor, ui5VersionMinor, isCDN) {
         if (ui5VersionMajor === 1 && ui5VersionMinor < 84) {
-            this.templateConfig.ui5.flex = this.templateConfig.ui5?.flex?.filter((connector) => isFlexConnector(connector));
+            config.ui5.flex = config.ui5?.flex?.filter((connector) => isFlexConnector(connector));
             this.logger.debug(`The Fiori Tools local connector (WorkspaceConnector) is not being used because the current UI5 version does not support it.${isCDN ? 'The Fiori Tools fake connector (FakeLrepConnector) will be used instead.' : ''} `);
             if (!isCDN) {
                 this.logger.warn(`The preview with virtual endpoints does not support flex changes for the current UI5 version ${ui5VersionMajor}.${ui5VersionMinor} from npmjs. Consider using a proxy to load UI5 resources from the CDN (e.g., https://ui5.sap.com), or upgrade the UI5 version in the yaml configuration to at least 1.84.`);
@@ -177,14 +178,6 @@ export class FlpSandbox {
         else {
             this.logger.debug(`The Fiori Tools local connector (WorkspaceConnector) is being used.`);
         }
-        if (this.projectType === 'CAPJava' || this.projectType === 'CAPNodejs') {
-            this.templateConfig.ui5.flex = this.templateConfig.ui5?.flex?.filter((connector) => !isFlexConnector(connector) ||
-                (isFlexConnector(connector) && !connector.url?.startsWith('/sap/bc/lrep')));
-            this.logger.debug(`The ABAP connector is not being used because the current project type is '${this.projectType}'.`);
-        }
-        else {
-            this.logger.debug(`The ABAP connector is being used.`);
-        }
     }
     /**
      * Generates the FLP sandbox for an editor.
@@ -201,7 +194,6 @@ export class FlpSandbox {
         await this.setApplicationDependencies();
         this.templateConfig.baseUrl = req['ui5-patched-router']?.baseUrl ?? '';
         const ui5Version = await this.getUi5Version(req.protocol, req.headers.host, this.templateConfig.baseUrl);
-        this.checkDeleteConnectors(ui5Version.major, ui5Version.minor, ui5Version.isCdn);
         if (ui5Version.major === 1 && ui5Version.minor <= 71) {
             this.removeAsyncHintsRequests();
         }
@@ -209,6 +201,8 @@ export class FlpSandbox {
             this.removeFlexExtensionPointEnabled();
         }
         const config = structuredClone(this.templateConfig);
+        config.ui5.versionMajor = ui5Version.major;
+        this.checkDeleteConnectors(config, ui5Version.major, ui5Version.minor, ui5Version.isCdn);
         if (!config.ui5.libs.includes('sap.ui.rta')) {
             // sap.ui.rta needs to be added to the list of preload libs for variants management and adaptation projects
             config.ui5.libs += ',sap.ui.rta';
@@ -226,7 +220,7 @@ export class FlpSandbox {
         config.features = FeatureToggleAccess.getAllFeatureToggles();
         const appId = this.manifest['sap.app']?.id ?? '';
         remapResourcesForPath(config, editor.path, appId);
-        return render(this.getSandboxTemplate(ui5Version), config);
+        return render(await this.getSandboxTemplate(ui5Version), config);
     }
     /**
      * Sets application dependencies in the template configuration.
@@ -359,15 +353,56 @@ export class FlpSandbox {
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
             this.templateConfig.baseUrl = ('ui5-patched-router' in req && req['ui5-patched-router']?.baseUrl) || '';
             const ui5Version = await this.getUi5VersionFromRequest(req, this.templateConfig.baseUrl);
-            this.checkDeleteConnectors(ui5Version.major, ui5Version.minor, ui5Version.isCdn);
+            this.templateConfig.ui5.versionMajor = ui5Version.major;
+            this.checkDeleteConnectors(this.templateConfig, ui5Version.major, ui5Version.minor, ui5Version.isCdn);
             if (ui5Version.major === 1 && ui5Version.minor < 120) {
                 this.removeFlexExtensionPointEnabled();
             }
             //for consistency reasons, we also add the baseUrl to the HTML here, although it is only used in editor mode
-            const html = render(this.getSandboxTemplate(ui5Version), this.templateConfig);
+            const html = render(await this.getSandboxTemplate(ui5Version), this.templateConfig);
             this.sendResponse(res, 'text/html', 200, html);
         }
     }
+    /**
+     * Handler for GET requests to fioriSandboxAppConfig.json (Sandbox 2.0).
+     * Serves a virtual config, optionally merged with a user-provided file.
+     * If a real HTML file exists at the FLP path, no virtual config is served.
+     *
+     * @param req incoming request
+     * @param res server response
+     * @param next next middleware function
+     * @param configJsonPath project-relative path to fioriSandboxAppConfig.json
+     */
+    async sandboxAppConfigGetHandler(req, res, next, configJsonPath) {
+        const baseUrl = (this.templateConfig.baseUrl =
+            ('ui5-patched-router' in req && req['ui5-patched-router']?.baseUrl) || '');
+        const file = await this.project.byPath(`${baseUrl}${this.flpConfig.path}`);
+        if (file) {
+            this.logger.info(`HTML file returned at '${this.flpConfig.path}'. No virtual 'fioriSandboxAppConfig.json' will be served.`);
+            next();
+            return;
+        }
+        // If the legacy fioriSandboxConfig.json exists, sandbox 2 is disabled — no config to serve.
+        const legacyFile = await this.project.byPath(`${baseUrl}/appconfig/fioriSandboxConfig.json`);
+        if (legacyFile) {
+            next();
+            return;
+        }
+        // check for user-provided fioriSandboxAppConfig.json and merge if present
+        const userConfigFile = await this.project.byPath(`${baseUrl}${configJsonPath}`);
+        let config = generateSandboxAppConfig(this.templateConfig, this.flpConfig, this.adp !== undefined, this.projectType !== 'EDMXBackend', this.logger);
+        if (userConfigFile) {
+            const userConfig = JSON.parse(await userConfigFile.getString());
+            config = {
+                ...config,
+                ...userConfig,
+                // beforeFlpStart and afterFlpStart must always point to our hooks
+                beforeFlpStart: config.beforeFlpStart,
+                afterFlpStart: config.afterFlpStart
+            };
+        }
+        this.sendResponse(res, 'application/json', 200, JSON.stringify(config));
+    }
     /**
      * Add routes for html and scripts required for a local FLP.
      */
@@ -378,6 +413,35 @@ export class FlpSandbox {
         this.router.get(this.flpConfig.path, async (req, res, next) => {
             await this.flpGetHandler(req, res, next);
         });
+        // add routes for fioriSandboxAppConfig.json (Sandbox 2.0) — only when sandbox 2 is not explicitly disabled.
+        // The config must be served at the directory of every sandbox HTML endpoint,
+        // since each endpoint fetches fioriSandboxAppConfig.json relative to its own location.
+        if (this.flpConfig.useNewSandbox === true) {
+            const sandboxDirs = new Set();
+            sandboxDirs.add(dirname(this.flpConfig.path));
+            if (this.cardGenerator?.path) {
+                const cardGeneratorPath = this.cardGenerator.path.startsWith('/')
+                    ? this.cardGenerator.path
+                    : `/${this.cardGenerator.path}`;
+                sandboxDirs.add(dirname(cardGeneratorPath));
+            }
+            if (this.rta) {
+                for (const editor of this.rta.endpoints) {
+                    sandboxDirs.add(dirname(editor.path));
+                }
+            }
+            // Register one route per directory rather than passing an array to router.get()
+            // sandboxAppConfigGetHandler needs the concrete configJsonPath to look up the user-provided
+            // file via project.byPath(), and connect.IncomingMessage does not expose req.path,
+            // so we cannot derive the path from the request inside the handler.
+            for (const dir of sandboxDirs) {
+                const configJsonPath = `${dir}/fioriSandboxAppConfig.json`;
+                this.logger.debug(`Add route for ${configJsonPath}`);
+                this.router.get(configJsonPath, async (req, res, next) => {
+                    await this.sandboxAppConfigGetHandler(req, res, next, configJsonPath);
+                });
+            }
+        }
     }
     /**
      * Adds a middleware route for the Card Generator in the FLP sandbox.
@@ -463,6 +527,11 @@ export class FlpSandbox {
             this.flpConfig.enhancedHomePage = this.templateConfig.enhancedHomePage = false;
             this.logger.warn(`Feature enhancedHomePage disabled: UI5 version: ${version} not supported.`);
         }
+        // enhancedHomePage (CDM) is not supported with Sandbox 2 — fall back to sandbox 1
+        if (this.flpConfig.enhancedHomePage && qualifiesForNewSandbox({ major, minor, patch, label, isCdn })) {
+            this.flpConfig.useNewSandbox = false;
+            this.logger.warn(`New FLP Sandbox disabled: enhancedHomePage is not supported with Sandbox 2.`);
+        }
         return {
             major,
             minor,
@@ -473,13 +542,22 @@ export class FlpSandbox {
     }
     /**
      * Read the sandbox template file based on the given UI5 version.
+     * Also checks for a legacy 'appconfig/fioriSandboxConfig.json' and falls back to Sandbox 1 if found.
      *
      * @param ui5Version - the UI5 version
      * @returns the template for the sandbox HTML file
      */
-    getSandboxTemplate(ui5Version) {
+    async getSandboxTemplate(ui5Version) {
         this.logger.info(`Using sandbox template for UI5 version: ${ui5Version.major}.${ui5Version.minor}.${ui5Version.patch}${ui5Version.label ? `-${ui5Version.label}` : ''}.`);
-        const filePrefix = ui5Version.major > 1 || ui5Version.label?.includes('legacy-free') ? '2' : '';
+        const qualifies = qualifiesForNewSandbox(ui5Version);
+        const legacyConfigPresent = qualifies
+            ? await this.hasLegacySandboxConfig(ui5Version, this.templateConfig.baseUrl)
+            : false;
+        const useNewSandbox = qualifies && this.flpConfig.useNewSandbox === true && !legacyConfigPresent;
+        if (qualifies && !useNewSandbox && !this.flpConfig.enhancedHomePage) {
+            this.logger.info('New FLP Sandbox disabled in configuration.');
+        }
+        const filePrefix = useNewSandbox ? '2' : '';
         const template = this.flpConfig.enhancedHomePage ? 'cdm' : 'sandbox';
         return readFileSync(join(__dirname, `../../templates/flp/${template}${filePrefix}.ejs`), 'utf-8');
     }
@@ -495,6 +573,26 @@ export class FlpSandbox {
             }
         }
     }
+    /**
+     * Checks if a legacy 'appconfig/fioriSandboxConfig.json' file is present when using the new FLP Sandbox.
+     * If found, warns the user to migrate and returns true so the caller can fall back to the classic Sandbox
+     * for this request.
+     *
+     * @param ui5Version - the resolved UI5 version
+     * @param baseUrl - the base URL of the current request
+     * @returns true if the legacy file is present and sandbox 2 should be suppressed
+     * @private
+     */
+    async hasLegacySandboxConfig(ui5Version, baseUrl) {
+        if (qualifiesForNewSandbox(ui5Version) && this.flpConfig.useNewSandbox === true) {
+            const legacyFile = await this.project.byPath(`${baseUrl}/appconfig/fioriSandboxConfig.json`);
+            if (legacyFile) {
+                this.logger.warn(`Found legacy file at 'appconfig/fioriSandboxConfig.json'. Falling back to the classic Sandbox. Please migrate your application configuration first.`);
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * For UI5 versions below 1.120, flexExtensionPointEnabled must be removed from the application
      * dependencies manifest. Older UI5 versions cannot handle this property at bootstrap time.

package/dist/client/adp/api-handler.js

@@ -125,12 +125,16 @@ sap.ui.define(["../utils/error"], function (___utils_errorjs) {
    * Checks for existing controller in the project's workspace
    *
    * @param controllerName Name of the controller
+   * @param viewId ID of the current view, used to detect an existing instance-specific extension
    * @returns {CodeExtResponse} Returns path to existing controller if found
    */
-  async function getExistingController(controllerName) {
+  async function getExistingController(controllerName, viewId) {
     const params = new URLSearchParams({
       name: controllerName
     });
+    if (viewId) {
+      params.append('viewId', viewId);
+    }
     const url = `${ApiEndpoints.CODE_EXT}?${params.toString()}`;
     return request(url, RequestMethod.GET);
   }

package/dist/client/adp/api-handler.ts

@@ -31,9 +31,12 @@ export interface FragmentsResponse {
 }
 
 export interface CodeExtResponse {
-    controllerExists: boolean;
-    controllerPath: string;
-    controllerPathFromRoot: string;
+    baseControllerExists: boolean;
+    baseControllerPath: string;
+    baseControllerPathFromRoot: string;
+    instanceControllerExists: boolean;
+    instanceControllerPath: string;
+    instanceControllerPathFromRoot: string;
     isRunningInBAS: boolean;
     isTsSupported: boolean;
 }
@@ -172,10 +175,14 @@ export async function getDataSourceAnnotationFileMap(): Promise<AnnotationDataSo
  * Checks for existing controller in the project's workspace
  *
  * @param controllerName Name of the controller
+ * @param viewId ID of the current view, used to detect an existing instance-specific extension
  * @returns {CodeExtResponse} Returns path to existing controller if found
  */
-export async function getExistingController(controllerName: string): Promise<CodeExtResponse> {
+export async function getExistingController(controllerName: string, viewId?: string): Promise<CodeExtResponse> {
     const params = new URLSearchParams({ name: controllerName });
+    if (viewId) {
+        params.append('viewId', viewId);
+    }
     const url = `${ApiEndpoints.CODE_EXT}?${params.toString()}` as ApiEndpoints;
     return request<CodeExtResponse>(url, RequestMethod.GET);
 }

package/dist/client/adp/controllers/ControllerExtension.controller.js

@@ -25,6 +25,7 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
   const CommandExecutor = _interopRequireDefault(__CommandExecutor);
   const checkForExistingChange = ___utilsjs["checkForExistingChange"];
   const getControllerInfo = ___utilsjs["getControllerInfo"];
+  const getPendingCodeExtViewIds = ___utilsjs["getPendingCodeExtViewIds"];
   const BaseDialog = _interopRequireDefault(__BaseDialog);
   /**
    * @namespace open.ux.preview.client.adp.controllers
@@ -47,6 +48,7 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
       this.setEscapeHandler();
       const resourceModel = await getResourceModel('open.ux.preview.client');
       this.bundle = await getTextBundle();
+      this.ui5Version = await getUi5Version();
       await this.buildDialogData();
       this.dialog.setModel(resourceModel, 'i18n');
       this.dialog.setModel(this.model);
@@ -106,16 +108,18 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
         source.setEnabled(false);
         const controllerName = this.model.getProperty('/newControllerName');
         const viewId = this.model.getProperty('/viewId');
+        const isInstanceSpecific = this.model.getProperty('/isInstanceSpecific');
         const controllerRef = {
           codeRef: `coding/${controllerName}.js`,
-          viewId
+          viewId,
+          instanceSpecific: isInstanceSpecific
         };
         if (this.data) {
           this.data.deferred.resolve(controllerRef);
         } else {
           await this.createNewController(controllerName, controllerRef);
         }
-        if (this.data && (await this.isControllerExtensionSupported())) {
+        if (this.data && this.isControllerExtensionSupported()) {
           await sendInfoCenterMessage({
             title: {
               key: 'ADP_CREATE_CONTROLLER_EXTENSION_TITLE'
@@ -127,9 +131,6 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
             type: MessageBarType.info
           });
         }
-      } else {
-        const controllerPath = this.model.getProperty('/controllerPath');
-        window.open(`vscode://file${controllerPath}`);
       }
       this.handleDialogClose();
     },
@@ -143,41 +144,62 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
         controllerName,
         viewId
       } = getControllerInfo(overlayControl);
-      const data = await this.getExistingController(controllerName);
-      const hasPendingChangeForView = checkForExistingChange(this.rta, 'codeExt', 'selector.controllerName', controllerName);
-      if (data) {
-        if (hasPendingChangeForView) {
+      const data = await this.getExistingController(controllerName, viewId);
+      if (!data) {
+        return;
+      }
+
+      // Combine persisted (server) and pending (command stack) changes to determine whether a base
+      // page controller and/or an instance-specific controller for this view already exist.
+      const pendingViewIds = getPendingCodeExtViewIds(this.rta, controllerName);
+      const baseExists = data.baseControllerExists || pendingViewIds.some(id => !id);
+      const instanceExists = data.instanceControllerExists || pendingViewIds.includes(viewId);
+      const showInstanceSpecificOption = this.isInstanceSpecificSupported();
+      if (!showInstanceSpecificOption) {
+        if (pendingViewIds.length > 0) {
           this.updateModelForExistingPendingChange();
-        } else if (data?.controllerExists) {
-          this.updateModelForExistingController(data);
+        } else if (data.baseControllerExists) {
+          this.updateModelForExistingController(data, true);
         } else {
-          this.updateModelForNewController(viewId, data.isTsSupported);
+          this.updateModelForNewController(viewId, data.isTsSupported, false, false, false);
           await this.getControllers();
         }
+        return;
+      }
+      if (baseExists && instanceExists) {
+        if (data.baseControllerExists || data.instanceControllerExists) {
+          this.updateModelForExistingController(data);
+        } else {
+          this.updateModelForExistingPendingChange();
+        }
+        return;
       }
+      this.updateModelForNewController(viewId, data.isTsSupported, true, baseExists, instanceExists);
+      await this.getControllers();
     },
     /**
-     * Updates the model properties for an existing controller.
+     * Updates the model properties for existing controller(s).
+     * Shows all persisted controllers (base and/or instance) in the existing-controller form, each with its own link to open in VS Code.
      *
-     * @param {CodeExtResponse} data - Existing controller data from the server.
+     * @param data - Server response containing existence flags and file paths.
+     * @param showVsCodeButton - When true (pre-1.143 single-controller path), shows an "Open in VS Code" begin-button instead of relying on the inline fragment links.
      */
-    updateModelForExistingController: function _updateModelForExistingController(data) {
-      const {
-        controllerExists,
-        controllerPath,
-        controllerPathFromRoot,
-        isRunningInBAS
-      } = data;
-      this.model.setProperty('/controllerExists', controllerExists);
-      this.model.setProperty('/controllerPath', controllerPath);
-      this.model.setProperty('/controllerPathFromRoot', controllerPathFromRoot);
+    updateModelForExistingController: function _updateModelForExistingController(data, showVsCodeButton = false) {
+      this.model.setProperty('/controllerExists', true);
+      this.model.setProperty('/baseControllerExists', data.baseControllerExists);
+      this.model.setProperty('/baseControllerPath', data.baseControllerPath);
+      this.model.setProperty('/baseControllerPathFromRoot', data.baseControllerPathFromRoot);
+      this.model.setProperty('/instanceControllerExists', data.instanceControllerExists);
+      this.model.setProperty('/instanceControllerPath', data.instanceControllerPath);
+      this.model.setProperty('/instanceControllerPathFromRoot', data.instanceControllerPathFromRoot);
+      this.model.setProperty('/isRunningInBAS', data.isRunningInBAS);
       this.model.setProperty('/inputFormVisibility', false);
       this.model.setProperty('/pendingChangeFormVisibility', false);
       this.model.setProperty('/existingControllerFormVisibility', true);
-      if (isRunningInBAS) {
-        this.dialog.getBeginButton().setVisible(false);
-      } else {
+      if (showVsCodeButton && !data.isRunningInBAS) {
         this.dialog.getBeginButton().setText('Open in VS Code').setEnabled(true);
+      } else {
+        this.dialog.getBeginButton().setVisible(false);
       }
       this.dialog.getEndButton().setText('Close');
     },
@@ -196,24 +218,34 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
      *
      * @param {string} viewId - The view ID.
      * @param {boolean} isTsSupported - Whether TypeScript supported for the current project.
+     * @param {boolean} showInstanceSpecificOption - Whether to show the instance-specific radio button option.
+     * @param {boolean} baseExists - Whether a base page controller extension already exists.
+     * @param {boolean} instanceExists - Whether an instance-specific extension already exists for this view.
      */
-    updateModelForNewController: function _updateModelForNewController(viewId, isTsSupported) {
+    updateModelForNewController: function _updateModelForNewController(viewId, isTsSupported, showInstanceSpecificOption, baseExists, instanceExists) {
       this.model.setProperty('/viewId', viewId);
       this.model.setProperty('/controllerExtension', isTsSupported ? '.ts' : '.js');
       this.model.setProperty('/existingControllerFormVisibility', false);
       this.model.setProperty('/pendingChangeFormVisibility', false);
       this.model.setProperty('/inputFormVisibility', true);
+      this.model.setProperty('/instanceSpecificVisibility', showInstanceSpecificOption);
+      this.model.setProperty('/baseControllerEnabled', !baseExists);
+      this.model.setProperty('/instanceControllerEnabled', !instanceExists);
+      const selectedIndex = baseExists ? 1 : 0;
+      this.model.setProperty('/controllerTypeSelectedIndex', selectedIndex);
+      this.model.setProperty('/isInstanceSpecific', selectedIndex === 1);
     },
     /**
      * Retrieves existing controller data if found in the project's workspace.
      *
      * @param controllerName Controller name that exists in the view.
+     * @param viewId ID of the current view, used to detect an existing instance-specific extension.
      * @returns Returns existing controller data.
      */
-    getExistingController: async function _getExistingController(controllerName) {
+    getExistingController: async function _getExistingController(controllerName, viewId) {
       let data;
       try {
-        data = await getExistingController(controllerName);
+        data = await getExistingController(controllerName, viewId);
       } catch (e) {
         const error = getError(e);
         await sendInfoCenterMessage({
@@ -255,7 +287,7 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
      * @param controllerRef Controller reference
      */
     createNewController: async function _createNewController(controllerName, controllerRef) {
-      if (await this.isControllerExtensionSupported()) {
+      if (this.isControllerExtensionSupported()) {
         await this.createControllerCommand(controllerName, controllerRef);
         return;
       }
@@ -264,7 +296,7 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
           controllerName
         });
         const service = await this.rta.getService('controllerExtension');
-        const change = await service.add(controllerRef.codeRef, controllerRef.viewId);
+        const change = await service.add(controllerRef.codeRef, controllerRef.viewId, controllerRef.instanceSpecific);
         change.creation = new Date().toISOString();
         await writeChange(change);
         await sendInfoCenterMessage({
@@ -315,9 +347,32 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
         type: MessageBarType.info
       });
     },
-    isControllerExtensionSupported: async function _isControllerExtensionSupported() {
-      const ui5Version = await getUi5Version();
-      return !isLowerThanMinimalUi5Version(ui5Version, ControllerExtension.CONTROLLER_EXT_MIN_UI5_VERSION);
+    isControllerExtensionSupported: function _isControllerExtensionSupported() {
+      return !isLowerThanMinimalUi5Version(this.ui5Version, ControllerExtension.CONTROLLER_EXT_MIN_UI5_VERSION);
+    },
+    /**
+     * Handles the selection change on the controller type for the radio button group.
+     *
+     * @param event Event
+     */
+    onControllerTypeSelectionChange: function _onControllerTypeSelectionChange(event) {
+      const group = event.getSource();
+      this.model.setProperty('/isInstanceSpecific', group.getSelectedIndex() === 1);
+    },
+    /**
+     * Opens the base page controller extension file in VS Code.
+     */
+    onOpenBaseController: function _onOpenBaseController() {
+      window.open(`vscode://file${this.model.getProperty('/baseControllerPath')}`);
+    },
+    /**
+     * Opens the instance-specific controller extension file in VS Code.
+     */
+    onOpenInstanceController: function _onOpenInstanceController() {
+      window.open(`vscode://file${this.model.getProperty('/instanceControllerPath')}`);
+    },
+    isInstanceSpecificSupported: function _isInstanceSpecificSupported() {
+      return !isLowerThanMinimalUi5Version(this.ui5Version, ControllerExtension.INSTANCE_SPECIFIC_MIN_UI5_VERSION);
     }
   });
   /* The minimum version of UI5 framework which supports controller extensions. */
@@ -325,6 +380,11 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/model/json/JSONModel", "open/ux/pr
     major: 1,
     minor: 135
   };
+  /* The minimum version of UI5 framework which supports instance-specific controller extensions. */
+  ControllerExtension.INSTANCE_SPECIFIC_MIN_UI5_VERSION = {
+    major: 1,
+    minor: 143
+  };
   return ControllerExtension;
 });
 //# sourceMappingURL=ControllerExtension.controller.js.map