WebIDE: How to Create Shell Plugin for Fiori Launchpad?

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)

1. Properties: *App Resource: select your deployed app > *App Type: select Shell Plugin
2. Catalogs: *select a Catalog to place your plugin in
3. Save

• Publish site using top ribbon's right side Globe icon

How it Looks: *Note the additional '+' button on top ribbon. Success!

References:

1. Sample Plugin: this sample shows how to add header action items, footer, parameters, etc.
2. Activating plugin: see ONLY the "Configuring a Shell Plugin App" section
3. API Reference on what can be modified in FLP