A Fiori Launchpad Sandbox for all your CAP-based projects – Overview

In my journey of teaching myself TypeScript, I was thinking to myself: why not create something that’s useful for my real life projects instead of simply following some exercises online? So that got me thinking. What’s something I’m missing when using CAP? What do I repetitively do within my projects? How can I reduce the time I spend when working with CAP?

Well for me one of the things I always seem to be doing: adding a launchpad sandbox to simplify testing / showing my project’s Fiori apps locally.

So how am I doing this manually? Basically by repeating three steps in each of my projects:

1. Create a custom launchpad HTML file (sample) in the app folder of my CAP project
2. Create a fioriSandboxConfig.json (sample) in a folder “appconfig” within the app folder of my CAP project
3. Adapt the fioriSandboxConfig.json to work with my project (based on the Fiori apps within the project)

As you can see, no rocket science here. But this is something I have to repeat for each and every project and although it’s not hard to do so, it takes a little bit of my time each and every time. So, to save myself (and hopefully you) some time, I’ve created a NodeJS module which generates a Fiori Launchpad Sandbox on the fly incorporating the Fiori apps within the project automatically.

So how does it work?

When incorporating the module within your project, the module registers 2 endpoints when serving a CAP-based project.

• /$launchpad: serving the Fiori Launchpad Sandbox HTML template.
• /appconfig/fioriSandboxConfig.json: generating a default launchpad group with the Fiori apps within the project

What are the prerequisites for the module to work?

There are only two important prerequisites to check / setup within your project for this module to work.

The first important prerequisite to setup within your project is the sapux section within your project.json file. The sapux section basically lists all the individual SAPUI5 applications within your project.

Example including three apps within a project:

"sapux": [
  "app/admin-authors",
  "app/admin-books",
  "app/browse"
]

Second important prerequisite, each SAPUI5 application should have at least one cross navigation inbound intent configured within the manifest file of the Fiori app. Without this configuration, no tile will be generated for the SAPUI5 application.

Example section (to be included within the sap.app section of the manifest file):

"crossNavigation": {
  "inbounds": {
    "intent1": {
      "signature": {
        "parameters": {},
        "additionalParameters": "allowed"
      },
      "semanticObject": "Books",
      "action": "manage",
      "title": "{{appTitle}}",
      "info": "{{appInfo}}",
      "subTitle": "{{appSubTitle}}",
      "icon": "sap-icon://course-book"
    }
  }
 }

Optional prerequisite, if you’re using string templates within the inbound navigation configuration. Be sure to update your i18n files accordingly. The module reads the texts from the main i18n file within the SAPUI application. (no multi-language support, yet)

How to include this module within a project?

First of all, install the module with following command:

npm install cds-launchpad-plugin --save-dev

Next include the module within your custom server.js file.

Example without any specific SAPUI5 version or theme:

const cds = require ('@sap/cds');

if (process.env.NODE_ENV !== 'production') {
    const {cds_launchpad_plugin} = require('cds-launchpad-plugin');

    // Enable launchpad plugin
    cds.once('bootstrap',(app)=>{
        const handler = new cds_launchpad_plugin();
        app.use(handler.setup());
    });
}

Example with a specific SAPUI5 version and theme:

const cds = require ('@sap/cds');

if (process.env.NODE_ENV !== 'production') {
    const {cds_launchpad_plugin} = require('cds-launchpad-plugin');

    // Enable launchpad plugin
    cds.once('bootstrap',(app)=>{
        const handler = new cds_launchpad_plugin();
        app.use(handler.setup({theme:'sap_horizon', version: '1.99.0'}));
    });
}

Screenshots

Standard index.html generated by CAP:

Unfortunately there no other way to add a link to the launchpad within the standard index.html which being served by the CAP framework. (only available levels are: endpoint or entity)

Maybe a nice addition to the CAP framework might be a section specifically for plugins to add their endpoints?

Fiori Launchpad Sandbox:

Wrap-up

As you can see, it’s very easy to include the module within your project. It’s only using standard configuration, which you should have in place anyway, to generate a Fiori Launchpad Sandbox out-of-the-box.

Please keep in mind that this is a first release of this module. I’ve tested it with only a hand full of projects, so you might expect bugs. If you run into issues, please report them in the GitHub repository. Pull requests are appreciated! (I’ll be updating the README within the next couple of days)

In my next blog, I’ll guide your through setting up the module with the sample repository fiori sample.