Hello there!
Welcome back to the fifth and last hands-on blog of this “Timesheet Management with CAP & Trello” blog series. In this blog “Add a Fiori Launchpad Site #5” we will add a Fiori Launchpad Module to our MTA project.
If you missed some other blogs of this series, you can find them here:
The GitHub Repository is available here:
I really hope you liked the configuration and development steps so far. But most of all I hope, I was able to bring the content in an understandable and detailed enough way. Now it is time to store/place our application in a Fiori Launchpad Module. This to serve our application in a nice Fiori Launchpad Dashboard. Once we added and configured this Launchpad Module, we will deploy our whole Multi Target Application to see the result.
This with the nice “SAP Fiori 3 Quartz Dark Theme” of course!
To be able to use the Fiori Launchpad Module afterwards when our MTA project is deployed, we need to subscribe to the “Portal” Subscription in our Cloud Foundry Subaccount.
Now it is finally time to add our FLP Module. To do so we open up a terminal inside our project its root directory and we execute the following command:
This will provide us an overview with all our available/installed Yeoman Generators.
Here we select the “@sapflp/launchpad Module“, which is available because we included this extension when we setup our SAP Business Application Studio Workspace in the first hands-on blog.
Once you selected this generator, provide a name for your Module, let’s take “FLP” and you say “Yes” to the question to create a launchpad module.
You will notice that the “FLP” Module directory has been added to your MTA Project:
When we have a look at our “mta.yaml” file we will see that the “Portal” Service has been added to our “resources” and “modules” section.
Inside our “resources” so it can use the “Portal” Service with the “standard service plan”:
Inside the “modules” section the “FLP” Module has been added as well and it requires the “portal resources” obviously and also the “repo-host” and “ui_deployer” to deploy and store our Fiori Launchpad Site. Last but not least it needs the “xsuaa-service” to add the authentication to our FLP:
Now that this module is available, the “Portal resources” have been added to the “Approuter” its “requires” section:
But this is not the only change that was made regarding the “Approuter”. Go and have a look at your “Approuter” its “xs-app.json” file.
Yep all your config is gone… But the “welcomeFile” property has to correct value to continue from now on:
This value “/cp.portal” will direct us to the Fiori Launchpad Site that we will configure in a minute.
Let us add our previous configuration but we keep the “/cp.portal” value for our “welcomeFile” property. Your “xs-app.json” file should look like this:
To configure the FLP Module we open the “CommonDataModel.json” file inside our “FLP Module > portal-site” directory. This will open the “Launchpad Editor” to configure your FLP. You can also switch to the “Code Editor” by right-clicking the “CommonDataModel.json” file and selecting “Open With > Code Editor”.
Here you can provide a name for your group by pressing the “Edit-icon”. I called mine “Time Management Apps”.
To add our app to the FLP Module we press the “+-sign” in the tile. This will open the following pop-up which will allow us to add our Timesheet application to our FLP.
Hmmm, my application is greyed out and by this I cannot add it to my FLP. Well that’s correct, because it is missing an “Intent Navigation”. What is this? You can refer to it as a path/URL params to navigate in your FLP/Apps. Let’s add this “Intent Navigation”.
Close this screen and open the “manifest.json” file of your HTML5 Module (TimesheetManager). Here we add the following configuration to our “sap.app” property:
We will deploy the project like we did in all the other steps.
Build the project by executing the following command inside the project its root directory:
Once the project has been built, we execute the following command to deploy it:
Do not forget to update your User provided Instance again if you did not place the keys inside the “Trello-API-Keys.json” file. Here is the command once more:
And if you had to update them again, do not forget to restart your “TrelloAuthorizer” Node Module again (see explanations in previous blog):
Now open your deployed Approuter again and you will see it will open your Fiori Launchpad Module:
Next we press our tile and we allow the App to consume our Trello information:
This will redirect us to our tile/app inside the FLP Site because we added our intent to the callback URL. Here we see our avatar and all our boards:
With all the expected behavior the app offers:
Maybe one cool note here, is that if you would login in an incognito window now and you open the app. You would not be asked to allow the application to consume your Trello information and you would not even have to be logged-in in Trello. Now why is that? The Trello access-tokens are cached remember and they are bound to your SCP—user in the cache. When you login with your SCP-user the cache finds you Trello tokens and allows you to consume your data. This is quite nice since you do not have to grant access again, since you already granted access for 1 hour.
Awesome!!!
In the end you should have the same result as shown in the demo video below:
In this blog we created our Fiori Launchpad Site Module which will serve our HTML5 Module (Timesheet application) as an app/tile on the Fiori Launchpad.
We configured this Fiori Launchpad Site Module inside the SAP Business Application Studio by providing a look and feel for our tile. We also created a semantic-object for our HTML5 Module inside the “manifest.json” fil, so we could add the app to the FLP Module.
Last but not least we adjusted the “TrelloAuthorizer” Node.js Module, so it directs us to the tile/App inside the FLP Site after allowing the App to use our Trello information.
We cleaned up our space, build our MTA project to a “.mtar” file with the “Cloud MTA Build Tool” and deployed this to the SAP Cloud Platform.
After deployment we opened our application in the Fiori Launchpad Site via our Approuter.
With this we finished the whole setup, configuration and development of our MTA Timesheet Project. Your application is now ready to use and is waiting for some awesome extension development from you!
The sky is the limit!
Maybe looking for a better way to store the Trello keys? Maybe possible via destinations, maybe not? Maybe with the Credential Store once the correct plan is available again. All worth to find and checkout! Or add some Enterprise Messaging use case? Let the good ideas flow and role.
We described the following requirements from the beginning and implemented the following ones:
I really hope you found this Timesheet Management with CAP & Trello ⏱️ blog series interesting, and that I was able to bring all the content in a clear and understandable way.
Last but not least, I hope you do not have to lose time anymore maintaining your timesheets. ?
A really big thanks for joining and reading this blog series and hopefully until the next blog!
Kind regards,
Dries
Welcome back to the fifth and last hands-on blog of this “Timesheet Management with CAP & Trello” blog series. In this blog “Add a Fiori Launchpad Site #5” we will add a Fiori Launchpad Module to our MTA project.
If you missed some other blogs of this series, you can find them here:
| Timesheet Management with CAP & Trello ⏱️ |
| Timesheet Management with CAP & Trello ⏱️ – Setup the IDE & MTA Project #1 |
| Timesheet Management with CAP & Trello ⏱️ – Setup a Database and Service Module #2 |
| Timesheet Management with CAP & Trello ⏱️ – Connect to Trello API’s via a Node.js Module #3 |
| Timesheet Management with CAP & Trello ⏱️ – Build the Trello Timesheet HTML5 Module #4 |
| Timesheet Management with CAP & Trello ⏱️ – Add a Fiori Launchpad Site Module #5 (this blog) |
The GitHub Repository is available here:
Timesheet Management with CAP & Trello ⏱️ GitHub Repository
Introduction
I really hope you liked the configuration and development steps so far. But most of all I hope, I was able to bring the content in an understandable and detailed enough way. Now it is time to store/place our application in a Fiori Launchpad Module. This to serve our application in a nice Fiori Launchpad Dashboard. Once we added and configured this Launchpad Module, we will deploy our whole Multi Target Application to see the result.
This with the nice “SAP Fiori 3 Quartz Dark Theme” of course!
Activate the Portal Subscription in SCP CF
To be able to use the Fiori Launchpad Module afterwards when our MTA project is deployed, we need to subscribe to the “Portal” Subscription in our Cloud Foundry Subaccount.
Add the Fiori Launchpad Module
Now it is finally time to add our FLP Module. To do so we open up a terminal inside our project its root directory and we execute the following command:
yoThis will provide us an overview with all our available/installed Yeoman Generators.
Here we select the “@sapflp/launchpad Module“, which is available because we included this extension when we setup our SAP Business Application Studio Workspace in the first hands-on blog.
Once you selected this generator, provide a name for your Module, let’s take “FLP” and you say “Yes” to the question to create a launchpad module.
You will notice that the “FLP” Module directory has been added to your MTA Project:
When we have a look at our “mta.yaml” file we will see that the “Portal” Service has been added to our “resources” and “modules” section.
Inside our “resources” so it can use the “Portal” Service with the “standard service plan”:
Inside the “modules” section the “FLP” Module has been added as well and it requires the “portal resources” obviously and also the “repo-host” and “ui_deployer” to deploy and store our Fiori Launchpad Site. Last but not least it needs the “xsuaa-service” to add the authentication to our FLP:
Now that this module is available, the “Portal resources” have been added to the “Approuter” its “requires” section:
But this is not the only change that was made regarding the “Approuter”. Go and have a look at your “Approuter” its “xs-app.json” file.
Yep all your config is gone… But the “welcomeFile” property has to correct value to continue from now on:
This value “/cp.portal” will direct us to the Fiori Launchpad Site that we will configure in a minute.
Let us add our previous configuration but we keep the “/cp.portal” value for our “welcomeFile” property. Your “xs-app.json” file should look like this:
{
"welcomeFile": "/cp.portal",
"authenticationMethod": "route",
"routes": [
{
"source": "^/timesheetService/(.*)$",
"target": "/timesheet-management/$1",
"authenticationType": "xsuaa",
"destination": "srv_api",
"csrfProtection": false
},
{
"source": "^/TrelloAuthorizer/(.*)$",
"target": "$1",
"authenticationType": "xsuaa",
"destination": "TrelloAuthorizer_api",
"csrfProtection": false
},
{
"source": "^(.*)$",
"target": "$1",
"service": "html5-apps-repo-rt",
"authenticationType": "xsuaa"
}
]
}
Configure the Fiori Launchpad Module
To configure the FLP Module we open the “CommonDataModel.json” file inside our “FLP Module > portal-site” directory. This will open the “Launchpad Editor” to configure your FLP. You can also switch to the “Code Editor” by right-clicking the “CommonDataModel.json” file and selecting “Open With > Code Editor”.
Here you can provide a name for your group by pressing the “Edit-icon”. I called mine “Time Management Apps”.
To add our app to the FLP Module we press the “+-sign” in the tile. This will open the following pop-up which will allow us to add our Timesheet application to our FLP.
Hmmm, my application is greyed out and by this I cannot add it to my FLP. Well that’s correct, because it is missing an “Intent Navigation”. What is this? You can refer to it as a path/URL params to navigate in your FLP/Apps. Let’s add this “Intent Navigation”.
Close this screen and open the “manifest.json” file of your HTML5 Module (TimesheetManager). Here we add the following configuration to our “sap.app” property:
"crossNavigation": {
"inbounds": {
"intent1": {
"signature": {
"parameters": {},
"additionalParameters": "allowed"
},
"semanticObject": "TimesheetManager",
"action": "display",
"title": "Timesheet Manager",
"info": "Manage Timesheet with Trello info",
"subTitle": "Easy time management",
"icon": "sap-icon://timesheet"
}
}
}
Deploy the Multi Target Application
We will deploy the project like we did in all the other steps.
Build the project by executing the following command inside the project its root directory:
mbt buildOnce the project has been built, we execute the following command to deploy it:
cf deploy mta_archives/Trello-CAP-TimesheetManagement_0.0.1.mtar --delete-servicesDo not forget to update your User provided Instance again if you did not place the keys inside the “Trello-API-Keys.json” file. Here is the command once more:
cf uups Trello-API-Keys -p '{"desc": "Trello credentials","api-key": "{your-key}","api-secret": "{your-secret}", "appName": "TrelloCAPauthorizer", "scope": "read", "expiration": "1hour"}'And if you had to update them again, do not forget to restart your “TrelloAuthorizer” Node Module again (see explanations in previous blog):
cf restart TrelloAuthorizerNow open your deployed Approuter again and you will see it will open your Fiori Launchpad Module:
Next we press our tile and we allow the App to consume our Trello information:
This will redirect us to our tile/app inside the FLP Site because we added our intent to the callback URL. Here we see our avatar and all our boards:
With all the expected behavior the app offers:
Maybe one cool note here, is that if you would login in an incognito window now and you open the app. You would not be asked to allow the application to consume your Trello information and you would not even have to be logged-in in Trello. Now why is that? The Trello access-tokens are cached remember and they are bound to your SCP—user in the cache. When you login with your SCP-user the cache finds you Trello tokens and allows you to consume your data. This is quite nice since you do not have to grant access again, since you already granted access for 1 hour.
Awesome!!!
Demo Video Timesheet App
In the end you should have the same result as shown in the demo video below:
Wrap Up ?
In this blog we created our Fiori Launchpad Site Module which will serve our HTML5 Module (Timesheet application) as an app/tile on the Fiori Launchpad.
We configured this Fiori Launchpad Site Module inside the SAP Business Application Studio by providing a look and feel for our tile. We also created a semantic-object for our HTML5 Module inside the “manifest.json” fil, so we could add the app to the FLP Module.
Last but not least we adjusted the “TrelloAuthorizer” Node.js Module, so it directs us to the tile/App inside the FLP Site after allowing the App to use our Trello information.
We cleaned up our space, build our MTA project to a “.mtar” file with the “Cloud MTA Build Tool” and deployed this to the SAP Cloud Platform.
After deployment we opened our application in the Fiori Launchpad Site via our Approuter.
With this we finished the whole setup, configuration and development of our MTA Timesheet Project. Your application is now ready to use and is waiting for some awesome extension development from you!
The sky is the limit!
Maybe looking for a better way to store the Trello keys? Maybe possible via destinations, maybe not? Maybe with the Credential Store once the correct plan is available again. All worth to find and checkout! Or add some Enterprise Messaging use case? Let the good ideas flow and role.
We described the following requirements from the beginning and implemented the following ones:
- A Multi Target Application (MTA) project
- An Approuter
- An xsuaa instance/service
- Appropriate roles assigned by role collections (xsuaa)
- A HANA database (via CDS)
- An OData V4 service (via CDS)
- A Node.js application to authenticate and authorize against Trello
- A User-Provided Service to store the Trello API Keys.
- A UI5 App
- A Fiori Launchpad Module
I really hope you found this Timesheet Management with CAP & Trello ⏱️ blog series interesting, and that I was able to bring all the content in a clear and understandable way.
Last but not least, I hope you do not have to lose time anymore maintaining your timesheets. ?
A really big thanks for joining and reading this blog series and hopefully until the next blog!
Kind regards,
Dries
- SAP Managed Tags:
1 Comment
