@sap-ux/preview-middleware 0.7.3 → 0.7.5

package/dist/base/flp.js

@@ -117,7 +117,6 @@ class FlpSandbox {
             if (this.rta) {
                 (_k = (_l = this.rta).options) !== null && _k !== void 0 ? _k : (_l.options = {});
                 this.rta.options.baseId = componentId !== null && componentId !== void 0 ? componentId : manifest['sap.app'].id;
-                this.rta.options.generator = 'changeUtils: SAPFioriTools-propertyEditor';
                 this.addEditorRoutes(this.rta);
             }
             this.addRoutesForAdditionalApps();
@@ -153,9 +152,13 @@ class FlpSandbox {
                 }
                 this.router.use(`${path}editor`, (0, express_1.static)(cpe));
             }
+            const defaultGenerator = editor.developerMode
+                ? '@sap-ux/control-property-editor'
+                : '@sap-ux/preview-middleware';
             this.router.get(previewUrl, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
+                var _d;
                 const config = Object.assign({}, this.templateConfig);
-                config.flex = Object.assign(Object.assign({ layer: rta.layer }, rta.options), { developerMode: editor.developerMode === true, pluginScript: editor.pluginScript });
+                config.flex = Object.assign(Object.assign({ layer: rta.layer }, rta.options), { generator: (_d = editor.generator) !== null && _d !== void 0 ? _d : defaultGenerator, developerMode: editor.developerMode === true, pluginScript: editor.pluginScript });
                 if (editor.developerMode === true) {
                     config.ui5.bootstrapOptions = serializeUi5Configuration(DEVELOPER_MODE_CONFIG);
                 }

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

@@ -4,6 +4,7 @@ sap.ui.define([], function () {
   "use strict";
 
   var ApiEndpoints = /*#__PURE__*/function (ApiEndpoints) {
+    ApiEndpoints["CHANGES"] = "/preview/api/changes";
     ApiEndpoints["FRAGMENT"] = "/adp/api/fragment";
     ApiEndpoints["CONTROLLER"] = "/adp/api/controller";
     ApiEndpoints["MANIFEST_APP_DESCRIPTOR"] = "/manifest.appdescr_variant";
@@ -82,6 +83,35 @@ sap.ui.define([], function () {
   async function getManifestAppdescr() {
     return request(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
   }
+
+  /**
+   * Retrieves all controller extensions from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function readControllers() {
+    return request(ApiEndpoints.CONTROLLER, RequestMethod.GET);
+  }
+
+  /**
+   * Writes a Controller to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeController(data) {
+    return request(ApiEndpoints.CONTROLLER, RequestMethod.POST, data);
+  }
+
+  /**
+   * Writes a change object to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeChange(data) {
+    return request(ApiEndpoints.CHANGES, RequestMethod.POST, data);
+  }
   var __exports = {
     __esModule: true
   };
@@ -91,6 +121,9 @@ sap.ui.define([], function () {
   __exports.getFragments = getFragments;
   __exports.writeFragment = writeFragment;
   __exports.getManifestAppdescr = getManifestAppdescr;
+  __exports.readControllers = readControllers;
+  __exports.writeController = writeController;
+  __exports.writeChange = writeChange;
   return __exports;
 });
 //# sourceMappingURL=api-handler.js.map

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

@@ -1,6 +1,7 @@
 import type { Layer } from 'sap/ui/fl';
 
 export const enum ApiEndpoints {
+    CHANGES = '/preview/api/changes',
     FRAGMENT = '/adp/api/fragment',
     CONTROLLER = '/adp/api/controller',
     MANIFEST_APP_DESCRIPTOR = '/manifest.appdescr_variant'
@@ -15,12 +16,18 @@ export const enum RequestMethod {
 }
 
 type Fragments = { fragmentName: string }[];
+type Controllers = { controllerName: string }[];
 
 export interface FragmentsResponse {
     fragments: Fragments;
     message: string;
 }
 
+export interface ControllersResponse {
+    controllers: Controllers;
+    message: string;
+}
+
 export interface ManifestAppdescr {
     fileName: string;
     layer: Layer;
@@ -100,3 +107,32 @@ export async function writeFragment<T>(data: T): Promise<T> {
 export async function getManifestAppdescr(): Promise<ManifestAppdescr> {
     return request<ManifestAppdescr>(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
 }
+
+/**
+ * Retrieves all controller extensions from the project's workspace
+ *
+ * @returns Generic Promise<T>
+ */
+export async function readControllers<T>(): Promise<T> {
+    return request<T>(ApiEndpoints.CONTROLLER, RequestMethod.GET);
+}
+
+/**
+ * Writes a Controller to the project's workspace
+ *
+ * @param data Data to be send to the server
+ * @returns Generic Promise<T>
+ */
+export async function writeController<T>(data: T): Promise<T> {
+    return request<T>(ApiEndpoints.CONTROLLER, RequestMethod.POST, data);
+}
+
+/**
+ * Writes a change object to the project's workspace
+ *
+ * @param data Data to be send to the server
+ * @returns Generic Promise<T>
+ */
+export async function writeChange<T>(data: T): Promise<T> {
+    return request<T>(ApiEndpoints.CHANGES, RequestMethod.POST, data);
+}

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

@@ -1,6 +1,6 @@
 "use strict";
 
-sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "../control-utils", "../command-executor", "../api-handler"], function (MessageToast, sap_ui_core_library, Controller, JSONModel, OverlayRegistry, __ControlUtils, __CommandExecutor, ___api_handler) {
+sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/model/json/JSONModel", "sap/ui/dt/OverlayRegistry", "../control-utils", "../command-executor", "../api-handler", "./BaseDialog.controller"], function (MessageToast, sap_ui_core_library, JSONModel, OverlayRegistry, __ControlUtils, __CommandExecutor, ___api_handler, __BaseDialog) {
   "use strict";
 
   function _interopRequireDefault(obj) {
@@ -8,22 +8,24 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/core/mvc/Con
   }
   /** sap.ui.core */
   const ValueState = sap_ui_core_library["ValueState"];
+  /** sap.ui.base */
   const ControlUtils = _interopRequireDefault(__ControlUtils);
   const CommandExecutor = _interopRequireDefault(__CommandExecutor);
   const getFragments = ___api_handler["getFragments"];
   const writeFragment = ___api_handler["writeFragment"];
+  const BaseDialog = _interopRequireDefault(__BaseDialog);
   /**
    * @namespace open.ux.preview.client.adp.controllers
    */
-  const AddFragment = Controller.extend("open.ux.preview.client.adp.controllers.AddFragment", {
+  const AddFragment = BaseDialog.extend("open.ux.preview.client.adp.controllers.AddFragment", {
     constructor: function _constructor(name, overlays, rta) {
-      Controller.prototype.constructor.call(this, name);
+      BaseDialog.prototype.constructor.call(this, name);
       this.rta = rta;
       this.overlays = overlays;
+      this.model = new JSONModel();
       this.commandExecutor = new CommandExecutor(this.rta);
     },
     onInit: async function _onInit() {
-      this.model = new JSONModel();
       this.dialog = this.byId('addNewFragmentDialog');
       await this.buildDialogData();
       this.getView()?.setModel(this.model);
@@ -94,13 +96,6 @@ sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/core/mvc/Con
       await this.createNewFragment(fragmentData);
       this.handleDialogClose();
     },
-    closeDialog: function _closeDialog() {
-      this.handleDialogClose();
-    },
-    handleDialogClose: function _handleDialogClose() {
-      this.dialog.close();
-      this.getView()?.destroy();
-    },
     buildDialogData: async function _buildDialogData() {
       const selectorId = this.overlays.getId();
       let controlMetadata;

package/dist/client/adp/controllers/AddFragment.controller.ts

@@ -8,11 +8,9 @@ import MessageToast from 'sap/m/MessageToast';
 /** sap.ui.core */
 import { ValueState } from 'sap/ui/core/library';
 import type UI5Element from 'sap/ui/core/Element';
-import Controller from 'sap/ui/core/mvc/Controller';
 
 /** sap.ui.base */
 import type Event from 'sap/ui/base/Event';
-import type ManagedObject from 'sap/ui/base/ManagedObject';
 import type ManagedObjectMetadata from 'sap/ui/base/ManagedObjectMetadata';
 
 /** sap.ui.model */
@@ -28,6 +26,7 @@ import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
 import ControlUtils from '../control-utils';
 import CommandExecutor from '../command-executor';
 import { getFragments, writeFragment } from '../api-handler';
+import BaseDialog from './BaseDialog.controller';
 
 interface CreateFragmentProps {
     fragmentName: string;
@@ -38,36 +37,12 @@ interface CreateFragmentProps {
 /**
  * @namespace open.ux.preview.client.adp.controllers
  */
-export default class AddFragment extends Controller {
-    /**
-     * Runtime control managed object
-     */
-    public runtimeControl: ManagedObject;
-    /**
-     * JSON Model that has the data
-     */
-    public model: JSONModel;
-    /**
-     * Dialog instance
-     */
-    public dialog: Dialog;
-    /**
-     * Runtime Authoring
-     */
-    private rta: RuntimeAuthoring;
-    /**
-     * Control Overlays
-     */
-    private overlays: UI5Element;
-    /**
-     * RTA Command Executor
-     */
-    private commandExecutor: CommandExecutor;
-
+export default class AddFragment extends BaseDialog {
     constructor(name: string, overlays: UI5Element, rta: RuntimeAuthoring) {
         super(name);
         this.rta = rta;
         this.overlays = overlays;
+        this.model = new JSONModel();
         this.commandExecutor = new CommandExecutor(this.rta);
     }
 
@@ -75,8 +50,6 @@ export default class AddFragment extends Controller {
      * Initializes controller, fills model with data and opens the dialog
      */
     async onInit() {
-        this.model = new JSONModel();
-
         this.dialog = this.byId('addNewFragmentDialog') as unknown as Dialog;
 
         await this.buildDialogData();
@@ -193,21 +166,6 @@ export default class AddFragment extends Controller {
         this.handleDialogClose();
     }
 
-    /**
-     * Handles the closing of the dialog
-     */
-    closeDialog() {
-        this.handleDialogClose();
-    }
-
-    /**
-     * Handles the dialog closing and destruction of it
-     */
-    handleDialogClose() {
-        this.dialog.close();
-        this.getView()?.destroy();
-    }
-
     /**
      * Builds data that is used in the dialog
      */

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

@@ -0,0 +1,17 @@
+"use strict";
+
+sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
+  "use strict";
+
+  /**
+   * @namespace open.ux.preview.client.adp.controllers
+   */
+  const BaseDialog = Controller.extend("open.ux.preview.client.adp.controllers.BaseDialog", {
+    handleDialogClose: function _handleDialogClose() {
+      this.dialog.close();
+      this.getView()?.destroy();
+    }
+  });
+  return BaseDialog;
+});
+//# sourceMappingURL=BaseDialog.controller.js.map

package/dist/client/adp/controllers/BaseDialog.controller.ts

@@ -0,0 +1,51 @@
+import Dialog from 'sap/m/Dialog';
+import Event from 'sap/ui/base/Event';
+import ManagedObject from 'sap/ui/base/ManagedObject';
+import UI5Element from 'sap/ui/core/Element';
+import Controller from 'sap/ui/core/mvc/Controller';
+import JSONModel from 'sap/ui/model/json/JSONModel';
+import RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+
+import CommandExecutor from '../command-executor';
+
+/**
+ * @namespace open.ux.preview.client.adp.controllers
+ */
+export default abstract class BaseDialog extends Controller {
+    /**
+     * Runtime Authoring
+     */
+    protected rta: RuntimeAuthoring;
+    /**
+     * Control Overlays
+     */
+    protected overlays: UI5Element;
+    /**
+     * JSON Model that has the data
+     */
+    public model: JSONModel;
+    /**
+     * Runtime control managed object
+     */
+    protected runtimeControl: ManagedObject;
+    /**
+     * Dialog instance
+     */
+    public dialog: Dialog;
+    /**
+     * RTA Command Executor
+     */
+    protected commandExecutor: CommandExecutor;
+
+    abstract onCreateBtnPress(event: Event): Promise<void>;
+
+    abstract buildDialogData(): Promise<void>;
+
+    /**
+     * Handles the dialog closing and destruction of it
+     */
+    handleDialogClose() {
+        this.dialog.close();
+        this.getView()?.destroy();
+    }
+}

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

@@ -0,0 +1,114 @@
+"use strict";
+
+sap.ui.define(["sap/m/MessageToast", "sap/ui/core/library", "sap/ui/model/json/JSONModel", "sap/ui/fl/Utils", "../api-handler", "./BaseDialog.controller"], function (MessageToast, sap_ui_core_library, JSONModel, Utils, ___api_handler, __BaseDialog) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  /** sap.ui.core */
+  const ValueState = sap_ui_core_library["ValueState"];
+  /** sap.ui.base */
+  const getManifestAppdescr = ___api_handler["getManifestAppdescr"];
+  const readControllers = ___api_handler["readControllers"];
+  const writeChange = ___api_handler["writeChange"];
+  const writeController = ___api_handler["writeController"];
+  const BaseDialog = _interopRequireDefault(__BaseDialog);
+  /**
+   * @namespace open.ux.preview.client.adp.controllers
+   */
+  const ControllerExtension = BaseDialog.extend("open.ux.preview.client.adp.controllers.ControllerExtension", {
+    constructor: function _constructor(name, overlays, rta) {
+      BaseDialog.prototype.constructor.call(this, name);
+      this.rta = rta;
+      this.overlays = overlays;
+      this.model = new JSONModel();
+    },
+    onInit: async function _onInit() {
+      this.dialog = this.byId('controllerExtensionDialog');
+      await this.buildDialogData();
+      this.getView()?.setModel(this.model);
+      this.dialog.open();
+    },
+    onControllerNameInputChange: function _onControllerNameInputChange(event) {
+      const source = event.getSource();
+      const controllerName = source.getValue().trim();
+      const controllerList = this.model.getProperty('/controllersList');
+      if (controllerName.length <= 0) {
+        this.dialog.getBeginButton().setEnabled(false);
+        source.setValueState(ValueState.None);
+        this.model.setProperty('/newControllerName', null);
+      } else {
+        const fileExists = controllerList.find(f => {
+          return f.controllerName === `${controllerName}.js`;
+        });
+        const isValidName = /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(controllerName);
+        if (fileExists) {
+          source.setValueState(ValueState.Error);
+          source.setValueStateText('Enter a different name. The controller name that you entered already exists in your project.');
+          this.dialog.getBeginButton().setEnabled(false);
+        } else if (!isValidName) {
+          source.setValueState(ValueState.Error);
+          source.setValueStateText('The controller name cannot contain white spaces or special characters.');
+          this.dialog.getBeginButton().setEnabled(false);
+        } else {
+          this.dialog.getBeginButton().setEnabled(true);
+          source.setValueState(ValueState.None);
+          this.model.setProperty('/newControllerName', controllerName);
+        }
+      }
+    },
+    onCreateBtnPress: async function _onCreateBtnPress(event) {
+      const source = event.getSource();
+      source.setEnabled(false);
+      const controllerName = this.model.getProperty('/newControllerName');
+      const viewId = this.model.getProperty('/viewId');
+      await this.createNewController(controllerName, viewId);
+      this.handleDialogClose();
+    },
+    buildDialogData: async function _buildDialogData() {
+      const selectorId = this.overlays.getId();
+      const overlayControl = sap.ui.getCore().byId(selectorId);
+      const control = overlayControl.getElement();
+      const viewId = Utils.getViewForControl(control).getId();
+      this.model.setProperty('/viewId', viewId);
+      await this.getControllers();
+    },
+    getControllers: async function _getControllers() {
+      try {
+        const {
+          controllers
+        } = await readControllers();
+        this.model.setProperty('/controllersList', controllers);
+      } catch (e) {
+        MessageToast.show(e.message);
+        throw new Error(e.message);
+      }
+    },
+    createNewController: async function _createNewController(controllerName, viewId) {
+      try {
+        const manifest = await getManifestAppdescr();
+        await writeController({
+          controllerName,
+          projectId: manifest.id
+        });
+        const controllerRef = {
+          codeRef: `coding/${controllerName}.js`,
+          viewId
+        };
+        const service = await this.rta.getService('controllerExtension');
+        const change = await service.add(controllerRef.codeRef, controllerRef.viewId);
+        await writeChange(change);
+        MessageToast.show(`Controller extension with name '${controllerName}' was created.`);
+      } catch (e) {
+        // We want to update the model incase we have already created a controller file but failed when creating a change file,
+        // so when the user types the same controller name again he does not get 409 from the server, instead an error is shown in the UI
+        await this.getControllers();
+        MessageToast.show(e.message);
+        throw new Error(e.message);
+      }
+    }
+  });
+  return ControllerExtension;
+});
+//# sourceMappingURL=ControllerExtension.controller.js.map

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

@@ -0,0 +1,172 @@
+/** sap.m */
+import Input from 'sap/m/Input';
+import Button from 'sap/m/Button';
+import type Dialog from 'sap/m/Dialog';
+import MessageToast from 'sap/m/MessageToast';
+
+/** sap.ui.core */
+import { ValueState } from 'sap/ui/core/library';
+import type UI5Element from 'sap/ui/core/Element';
+
+/** sap.ui.base */
+import type Event from 'sap/ui/base/Event';
+
+/** sap.ui.model */
+import JSONModel from 'sap/ui/model/json/JSONModel';
+
+/** sap.ui.rta */
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+
+/** sap.ui.fl */
+import Utils from 'sap/ui/fl/Utils';
+
+/** sap.ui.dt */
+import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
+
+import type { ControllersResponse } from '../api-handler';
+import { getManifestAppdescr, readControllers, writeChange, writeController } from '../api-handler';
+import BaseDialog from './BaseDialog.controller';
+
+interface ControllerExtensionService {
+    add: (codeRef: string, viewId: string) => Promise<unknown>;
+}
+
+/**
+ * @namespace open.ux.preview.client.adp.controllers
+ */
+export default class ControllerExtension extends BaseDialog {
+    constructor(name: string, overlays: UI5Element, rta: RuntimeAuthoring) {
+        super(name);
+        this.rta = rta;
+        this.overlays = overlays;
+        this.model = new JSONModel();
+    }
+
+    /**
+     * Initializes controller, fills model with data and opens the dialog
+     */
+    async onInit() {
+        this.dialog = this.byId('controllerExtensionDialog') as unknown as Dialog;
+
+        await this.buildDialogData();
+
+        this.getView()?.setModel(this.model);
+
+        this.dialog.open();
+    }
+
+    /**
+     * Handles fragment name input change
+     *
+     * @param event Event
+     */
+    onControllerNameInputChange(event: Event) {
+        const source = event.getSource<Input>();
+
+        const controllerName: string = source.getValue().trim();
+        const controllerList: { controllerName: string }[] = this.model.getProperty('/controllersList');
+
+        if (controllerName.length <= 0) {
+            this.dialog.getBeginButton().setEnabled(false);
+            source.setValueState(ValueState.None);
+            this.model.setProperty('/newControllerName', null);
+        } else {
+            const fileExists = controllerList.find((f: { controllerName: string }) => {
+                return f.controllerName === `${controllerName}.js`;
+            });
+
+            const isValidName = /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(controllerName);
+
+            if (fileExists) {
+                source.setValueState(ValueState.Error);
+                source.setValueStateText(
+                    'Enter a different name. The controller name that you entered already exists in your project.'
+                );
+                this.dialog.getBeginButton().setEnabled(false);
+            } else if (!isValidName) {
+                source.setValueState(ValueState.Error);
+                source.setValueStateText('The controller name cannot contain white spaces or special characters.');
+                this.dialog.getBeginButton().setEnabled(false);
+            } else {
+                this.dialog.getBeginButton().setEnabled(true);
+                source.setValueState(ValueState.None);
+                this.model.setProperty('/newControllerName', controllerName);
+            }
+        }
+    }
+
+    /**
+     * Handles create button press
+     *
+     * @param event Event
+     */
+    async onCreateBtnPress(event: Event) {
+        const source = event.getSource<Button>();
+        source.setEnabled(false);
+
+        const controllerName = this.model.getProperty('/newControllerName');
+        const viewId = this.model.getProperty('/viewId');
+
+        await this.createNewController(controllerName, viewId);
+
+        this.handleDialogClose();
+    }
+
+    /**
+     * Builds data that is used in the dialog
+     */
+    async buildDialogData(): Promise<void> {
+        const selectorId = this.overlays.getId();
+        const overlayControl = sap.ui.getCore().byId(selectorId) as unknown as ElementOverlay;
+        const control = overlayControl.getElement();
+        const viewId = Utils.getViewForControl(control).getId();
+
+        this.model.setProperty('/viewId', viewId);
+
+        await this.getControllers();
+    }
+
+    /**
+     * Retrieves controller files and fills the model with data
+     */
+    async getControllers(): Promise<void> {
+        try {
+            const { controllers } = await readControllers<ControllersResponse>();
+            this.model.setProperty('/controllersList', controllers);
+        } catch (e) {
+            MessageToast.show(e.message);
+            throw new Error(e.message);
+        }
+    }
+
+    /**
+     * Creates a new fragment for the specified control
+     *
+     * @param controllerName Controller Name
+     * @param viewId View Id
+     */
+    private async createNewController(controllerName: string, viewId: string): Promise<void> {
+        try {
+            const manifest = await getManifestAppdescr();
+            await writeController({ controllerName, projectId: manifest.id });
+
+            const controllerRef = {
+                codeRef: `coding/${controllerName}.js`,
+                viewId
+            };
+
+            const service = await this.rta.getService<ControllerExtensionService>('controllerExtension');
+
+            const change = await service.add(controllerRef.codeRef, controllerRef.viewId);
+
+            await writeChange(change);
+            MessageToast.show(`Controller extension with name '${controllerName}' was created.`);
+        } catch (e) {
+            // We want to update the model incase we have already created a controller file but failed when creating a change file,
+            // so when the user types the same controller name again he does not get 409 from the server, instead an error is shown in the UI
+            await this.getControllers();
+            MessageToast.show(e.message);
+            throw new Error(e.message);
+        }
+    }
+}

package/dist/client/adp/init-dialogs.js

@@ -1,14 +1,16 @@
 "use strict";
 
-sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller"], function (XMLView, __AddFragment) {
+sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller", "./controllers/ControllerExtension.controller"], function (XMLView, __AddFragment, __ControllerExtension) {
   "use strict";
 
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
   }
   const AddFragment = _interopRequireDefault(__AddFragment);
+  const ControllerExtension = _interopRequireDefault(__ControllerExtension);
   var DialogNames = /*#__PURE__*/function (DialogNames) {
     DialogNames["ADD_FRAGMENT"] = "AddFragment";
+    DialogNames["CONTROLLER_EXTENSION"] = "ControllerExtension";
     return DialogNames;
   }(DialogNames || {});
   /**
@@ -24,6 +26,12 @@ sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller"
       handler: async overlays => await handler(overlays[0], rta, DialogNames.ADD_FRAGMENT),
       icon: 'sap-icon://attachment-html'
     });
+    contextMenu.addMenuItem({
+      id: 'EXTEND_CONTROLLER',
+      text: 'Extend With Controller',
+      handler: async overlays => await handler(overlays[0], rta, DialogNames.CONTROLLER_EXTENSION),
+      icon: 'sap-icon://create-form'
+    });
   };
 
   /**
@@ -34,7 +42,7 @@ sap.ui.define(["sap/ui/core/mvc/XMLView", "./controllers/AddFragment.controller"
    * @param dialogName Dialog name
    */
   async function handler(overlays, rta, dialogName) {
-    const controller = new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
+    const controller = dialogName === DialogNames.ADD_FRAGMENT ? new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta) : new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlays, rta);
     await XMLView.create({
       viewName: `open.ux.preview.client.adp.ui.${dialogName}`,
       controller