Technical Articles
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:
- Create a custom launchpad HTML file (sample) in the app folder of my CAP project
- Create a fioriSandboxConfig.json (sample) in a folder “appconfig” within the app folder of my CAP project
- 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.
Nice blog, but would it be as easy as adding a html page like this?
https://github.com/SAP-samples/cloud-cap-risk-management/blob/ext-service-consume-ui/app/launchpage.html
I understand the approach here might just be experimental.
Hi,
It's a new approach for sure, but I didn't run into problems with it yet. Anyway this is only for development purposes anyway.
The main advantage of this approach is that you don't have to create the HTML page in each and every project and you don't need to take care of the json configuration within that HTML page for each app you add to your project. (because this solution automatically generates the necessary configuration for you)
If in the future the base HTML needs to be adapted (e.g. because of changes in SAPUI5, new approaches for sandbox launchpad, ...) it's just going to be a matter of updating the solution and updating your projects with the latest release of the plugin to get up and running.
Regards,
Geert-Jan
I have tried the approach above, but cant add icons to the tiles here 🙁
Fantastic Geert-Jan Klaps, nice idea and works like a charm. It really helps the development cycles on intent navigation etc.
Thanks for taking the effort to package and share, highlight of my week for sure! Something for David Kunz et. al. to consider incorporating in the core flow maybe?
//Carl
Indeed, this looks like a great tool! Looping in Christian Georgi from the tools team.
This looks great! Thanks for sharing.