WebIDE: How to Create Shell Plugin for Fiori Launchpad? - sapui5

Question

This is to:
customize the Fiori Launchpad (e.g. modifying shell bar or adding footer)
work in NEO environment (not Cloud Foundry)
setup in WebIDE, not Business Application Studio
Other guides have pockets of outdated information such as the no-longer-existing option to create a 'Fiori Launchpad Plugin' from 'New Project from Template'

Answer 1

2020 Updated
Steps:
Create SAPUI5 template app
Add following code to Component.js (& modify to your liking). Everything will be stored in Component.js, MVC will be left untouched. Everything in .then() add custom code for modifications to FLP.
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
var rendererPromise= this._getRenderer();
rendererPromise.then(function(oRenderer){
// var bFull= jQuery.sap.getUriParameters().get("plugin-full");
oRenderer.addHeaderItem("sap.ushell.ui.shell.ShellHeadItem", {
icon:"sap-icon://add"
,tooltip:"Current Stage"
},true,true);
});
// var oRenderer= sap.ushell.Container.getRenderer('fiori2');
// oRenderer.addHeaderItem({icon:'sap-icon://add'},true,true);
// enable routing
// this.getRouter().initialize();
// set the device model
// this.setModel(models.createDeviceModel(), "device");
},
_getRenderer:function(){
var that=this,
oDeferred= new jQuery.Deferred(),
oRenderer;
that._oShellContainer= jQuery.sap.getObject("sap.ushell.Container");
if(!that._oShellContainer){
oDeferred.reject("Illegal state: shell container not available. This component must be executed in a unified shell runtime context.");
} else{
oRenderer= that._oShellContainer.getRenderer();
if(oRenderer){oDeferred.resolve(oRenderer);}
else{ //renderer not initialized yet, listen to rendererCreated event
that._onRendererCreated= function(oEvent){
oRenderer= oEvent.getParameter('renderer');
if(oRenderer){oDeferred.resolve(oRenderer);}
else{oDeferred.reject('Illegal state: shell renderer not available after receiving rendererLoaded event');}
};
that._oShellContainer.attachRendererCreatedEvent(that._onRendererCreated);
}
}
return oDeferred.promise();
}
Deploy your app
Activate your plugin: Go to SCP's Portal service > Go to Service > Site Directory > *Choose a launchpad you want your plugin activated in > Content Management > Apps > *Add app ('+' icon)
Properties: *App Resource: select your deployed app > *App Type: select Shell Plugin
Catalogs: *select a Catalog to place your plugin in
Save
Publish site using top ribbon's right side Globe icon
How it Looks: *Note the additional '+' button on top ribbon. Success!
References:
Sample Plugin: this sample shows how to add header action items, footer, parameters, etc.
Activating plugin: see ONLY the "Configuring a Shell Plugin App" section
API Reference on what can be modified in FLP

Answer 2

Instead of using jQuery in the _getRenderer function, this at least works for me in a quick test.
Uses Promises instead of Deferred and ObjectPath (requires "sap/base/util/ObjectPath") which is the recommended replacement for "$.sap.getObject" as this is deprecated.
_getRenderer: function() {
return new Promise(function(fnResolve, fnReject) {
this._oShellContainer = ObjectPath.get("sap.ushell.Container");
if (!this._oShellContainer) {
fnReject(
"Illegal state: shell container not available; this component must be executed in a unified shell runtime context."
);
} else {
var oRenderer = this._oShellContainer.getRenderer();
if (oRenderer) {
fnResolve(oRenderer);
} else {
// renderer not initialized yet, listen to rendererCreated event
this._onRendererCreated = function(oEvent) {
oRenderer = oEvent.getParameter("renderer");
if (oRenderer) {
fnResolve(oRenderer);
} else {
fnReject(
"Illegal state: shell renderer not available after receiving 'rendererLoaded' event."
);
}
};
this._oShellContainer.attachRendererCreatedEvent(
this._onRendererCreated
);
}
}
}.bind(this));
}