A Fiori Launchpad Sandbox for all your CAP-based projects – Sample project setup

[geert-janklaps]

In my previous blog post, I've given you a high level overview on how to easily add a Fiori Launchpad Sandbox to your CAP-based projects. In this blog, I'll guide you through setting up the module with the CAP Sample repository using the fiori sample.

 

Downloading / Cloning and setting up the sample repository

First ensure you have @Sisn/cds-dk installed globally, by running command: 

npm i -g @sap/cds-dk

Next download the sample repository as a ZIP-file or clone the repository using following command:

git clone https://github.com/sap-samples/cloud-cap-samples samples

cd samples

Within the root folder of the sample repository run the install command:

npm install

 

Adding the launchpad plugin module to the sample project

To add the launchpad plugin to the sample project simply run following command within the root of the sample project:

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

For the sake of simplicity we'll use the fiori sample within this project, to enable the module add following code to the server.js file within the fiori folder:

if (process.env.NODE_ENV !== 'production') {

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

    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'}));

    });

}

Info: you can omit the parameters in the setup method, this will make the launchpad fall back to the latest SAPUI5 version with theme sap_fiori_3. (if you want the sap_horizon theme, just set the theme parameter and omit the version if you want to use the latest SAPUI5 version)

Result:

You can now run the project using following command in the root of the sample project:

cds watch fiori

Opening the launchpad preview will result in... an empty launchpad sandbox:

As mentioned in my previous blog, there are some minor prerequisites that need to be in place for the module to be able generate a sandbox launchpad with apps included. In the next steps, we'll adapt the fiori sample to fulfill these prerequisites.

 

Adapting the fiori sample

The first and most important missing prerequisite is the missing sapux section within the package.json file within the fiori sample.

Add following section to the package.json file:

"sapux": [

    "app/admin-authors",

    "app/admin-books",

    "app/browse"

]

Result:

Running the project again will result in two tiles, even though there are three SAPUI5 apps listed in the sapux section. You guessed right, one of the SAPUI5 apps (admin books) is missing the inbound navigation intent configuration. So let's quickly correct that as well!

In the manifest.json file of the admin-books app, add following to the sap.app section:

"crossNavigation": {

    "inbounds": {

        "intent1": {

                "signature": {

                "parameters": {},

                "additionalParameters": "allowed"

            },

            "semanticObject": "Books",

            "action": "manage",

            "title": "{{appTitle}}",

            "info": "{{appInfo}}",

            "subTitle": "{{appSubTitle}}",

            "icon": "sap-icon://course-book"

        }

    }

}

Result:

All set! Running the project again will now result in a launchpad sandbox containing all the SAPUI5 apps within the sample. (please note that two tiles are showing the same descriptions, this is because of the fact that the descriptions in both the individual apps are the same. This can be changed by adapting the individual i18n files)

 

Wrap-up

As you can see, it's very easy to include a launchpad sandbox within your CAP-based projects. No need to perform all the manual steps anymore, just let the module generate the launchpad for you. Hope you enjoy using the module! I'm always available for feedback, potential improvements, pull requests!