Demo

Is it possible to implement this
with just a few lines of code?

Yes, indeed

OpenUI5 libraries

What is sap.ui.dt?

sap.ui.Design Time

sap.ui.dt helps developers to build outstanding tooling on top of UI5 apps

Basic concepts

Overlay concept

Overlays

Available plugins

Usage example

Creating a Design Time Instance

							sap.ui.require([
							    "sap/ui/dt/DesignTime",
							    "sap/ui/dt/plugin/MouseSelection",
							    "sap/ui/dt/plugin/ControlDragDrop",
							    "custom/ushell/plugin/shooter/designtime/Shooter"
							], function (
							    DesignTime,
							    MouseSelection,
							    ControlDragDrop,
							    Shooter
							) {
							    var oAppLifeCycle = sap.ushell.Container.getService("AppLifeCycle");
							    var oDesignTime = new DesignTime({
							        rootElements: oAppLifeCycle.getCurrentApplication().componentInstance,
							        plugins: [
							            new MouseSelection(),
							            new ControlDragDrop(),
							            new Shooter()
							        ]
							    });
							});
						
							sap.ui.require([
							    "sap/ui/dt/DesignTime",
							    "sap/ui/dt/plugin/MouseSelection",
							    "sap/ui/dt/plugin/ControlDragDrop",
							    "custom/ushell/plugin/shooter/designtime/Shooter"
							], function (
							    DesignTime,
							    MouseSelection,
							    ControlDragDrop,
							    Shooter
							) {
							    var oAppLifeCycle = sap.ushell.Container.getService("AppLifeCycle");
							    var oDesignTime = new DesignTime({
							        rootElements: oAppLifeCycle.getCurrentApplication().componentInstance,
							        plugins: [
							            new MouseSelection(),
							            new ControlDragDrop(),
							            new Shooter()
							        ]
							    });
							});
						
							sap.ui.require([
							    "sap/ui/dt/DesignTime",
							    "sap/ui/dt/plugin/MouseSelection",
							    "sap/ui/dt/plugin/ControlDragDrop",
							    "custom/ushell/plugin/shooter/designtime/Shooter"
							], function (
							    DesignTime,
							    MouseSelection,
							    ControlDragDrop,
							    Shooter
							) {
							    var oAppLifeCycle = sap.ushell.Container.getService("AppLifeCycle");
							    var oDesignTime = new DesignTime({
							        rootElements: oAppLifeCycle.getCurrentApplication().componentInstance,
							        plugins: [
							            new MouseSelection(),
							            new ControlDragDrop(),
							            new Shooter()
							        ]
							    });
							});
						

Implementing a Custom Plugin

						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					
						sap.ui.define(["sap/ui/dt/Plugin"], function (Plugin) {
						    var Shooter = Plugin.extend("custom.ushell.plugin.shooter.designtime.Shooter");

						    Shooter.prototype.registerElementOverlay = function (oOverlay) {
						        oOverlay.attachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype.deregisterElementOverlay = function (oOverlay) {
						        oOverlay.detachBrowserEvent("dblclick", this._onClick, oOverlay);
						    };

						    Shooter.prototype._onClick = function (e) {
						        this.setSelected(false);
						        this.addStyleClass("sapUiDtOverlayPoof");
						        this.attachBrowserEvent("animationend", function () {
						            this.getElement().setVisible(false);
						        }, this);
						        e.stopPropagation();
						    };

						    return Shooter;
						});
					

Summary