Hello Community!

Welcome to this Blog Series about “Timesheet Management with CAP & Trello ⏱️”. Some time ago I started my journey in the SAP Cloud Platform Cloud Foundry Environment. I was used to the Neo Environment, and changing to the Cloud Foundry one was a huge step if you ask me. Now don’t get me wrong, I love Cloud Foundry. It gives you so much freedom and options to build exactly that one thing you need. Find one developer who doesn’t like freedom. ?

Now I will be honest with you guys, this Cloud Foundry journey was hard for me. But hey, there is nothing that we cannot learn right? Since it is a topic which is evolving so fast, you will find a lot of good documentation. The only catch there is that it can be “outdated”. But I want to thank everyone for sharing their knowledge regarding SAP Cloud Foundry. It helped me a lot, and now I do understand the concepts and principals that come with it. Thanks everyone!

I will try to cover all the main concepts such as Multi Target Applications, Approuters, XSUAA, CAP and so much more during this Blog Series. This in a way that the content will not really get “outdated”. We will do this by having a look at the technologies and services, instead of “the way to implement it”, because there are so many ways and they evolve very fast. It is impossible to keep them up to date in the blogs, so the message is: “Always try to check the most recent documentation”. I will explain every step as detailed and clear as possible and we will take small steps to understand the whole Cloud Foundry and MTA setup. Because I do not want you guys to experience all those pain points out there.

For those who are interested in all these Cloud Foundry services, I created a personal project called “Timesheet Management with CAP & Trello ⏱️”. I built a Timesheet Application that connects to Trello to consume the Trello data. It seemed a nice way to start discovering the Cloud Foundry environment and everything that comes with it. But discovering those was not the only benefit I gained from this project. It helped me simplifying my timesheet management and I’m sure it will simplify yours too. ?

Introduction

At a lot of customers, I’ve been working with task management applications, based on Kanban principles. A tool that I saw showing up a lot of times is Trello. It is a web-application based on boards (projects), containing lists (processes in time) with individual cards (tasks to perform). This provides the users a way of keeping track of the work that is still to be done or is currently worked on or ready.

But when you must note down all the spent hours on cards in an external tool, you will get some extra work during the day. Whether it’s writing down all these details and spent hours in a spreadsheet. Or adding the spent time in another timesheet tool. You still must provide all the details of the cards you worked on. This copy-paste process and searching for the right details, can sometimes cost you a lot of valuable time.

A Trello Example

The following picture shows you an example of a Trello Launchpad. Here you will find all the boards you have currently access to.

Once you select a board, you will get a nice overview of all the cards in the board collection, separated in different lists. These lists can be processes in time or separated task lists or whatever suits your business case.

If you would like some more information about the Trello Tool, you can check out the following video ‘Trello – A Quick Overview‘. Once you checked out this video, getting started with the boards and cards, will be self-explaining.

The Old Process

Back then at a certain customer we were supposed to check the Trello Board with all its Tasks (Cards) and start to work on the cards we were assigned to. After a working day we had to fill in our timesheets obviously. Next we had to check the Trello board and card and copy these details into an external spreadsheet. Finalizing by putting comments and spent hours. This brought a lot of copy paste and search work with it. The spreadsheet file contained some logic and functions that my colleague and I didn’t totally get… Especially me… With lack of spreadsheet knowledge, the file got messed up a lot of times. Which made it difficult to keep this process clean. The maintainer of this file had more work by maintaining it, than gaining profit from it.

The following picture illustrates an example of the spreadsheet file we had to maintain. Well no that we tried to maintain…

Conclusion, no one was winning this way…

But there was light at the end of the tunnel! ?

Somewhere in September on a Monday Morning

It was about time to fill in the timesheet again. You can already guess the problem/catch waiting around the corner… Searching and copy-pasting actions who will cost me some valuable time…

But what happened? Let me show you my text-conversation, that explains the problem one more time and which brought the solution! ?

Thanks to my Flexso Digital colleague Laurens Deprost I started the development for the Timesheet app and integrated it with Trello.

The New Process with the Timesheet App

With the built timesheet app, we were able to get rid of the spreadsheet file. This by integrating Trello into an SAP Multi Target Application running on Cloud Foundry. This supported by the SAP Cloud Application Programming Model.

Thanks to the nice and clear API’s offered by Trello, we can build this awesome application.

The MTA project will be called “Trello-CAP-TimesheetManagement” and the Timesheet application (HTML5 Module) is called “TimesheetManager”. This way, we can later one add more Modules to the same MTA project. One project to rule them all. ?‍♂️

Here is an overview of the Architecture of the whole End-to-End scenario.

This architecture only shows what’s inside the Multi Target Application Box. Let me unbox it for you from the left to the right. The MTA will hold a Node.js application to login and access the data of your Trello account. The Cloud Application Programming Model offers us the possibility to create and maintain a HANA database inside our MTA. This database can be created by using Core Data Services (CDS). On top of this database an OData V4 service will be created to expose our data inside the HANA database. By implementing this Node.js and CAP applications we fully covered the access and consumption of Trello data, and we provided a way to store our Spent Hours on Trello Cards. Obviously, this data needs to be consumed by a front-end application, where the user can fill in his timesheet. This part is covered by our HTML5 Module, again running inside our MTA. Finally, a Fiori Launchpad Module is created and the Timesheet manager application (HTML5 Module) is placed into it.

All the communication between these applications is passing via the approuter. This is the “director” where communication runs through. More information about this approuter will be available later in this blog series. More good news is that all these applications/modules are not only running and connected inside one MTA, but they are also secured. Every single Module inside this MTA will only be accessible by authenticated users. This security and authentication mechanism are handled by the XSUAA service (Authorization & Trust Management). I will explain the XSUAA service in detail once we are developing and configuring it.

Timesheet Manager App – User Experience

The first thing a user will do is surf to the approuter-URL. The approuter will direct the user automatically to the Fiori Launchpad. But before he can access it, he will be asked to login with his SAP Cloud Platform account, this because of the XSUAA service. After the user is logged in into the SAP Cloud Platform, he will have access to the Fiori Launchpad. This with a beautiful Fiori 3 (Quartz Dark) Theme. Later in the appropriate blog I will show you how to apply this theme. If you want some more information about it already you can find it here:

Applying Fiori 3 Dark Theme (SAP Quartz Dark) in UI5 Apps & Fiori Launchpad MTA

When the user starts the application by selecting the Timesheet App Tile in the Fiori Launchpad, he will be prompt by Trello to login to his account, when not yet logged in. All the permissions the application requires from Trello will be displayed. When the user presses the login button, he will be redirected to the Trello login screen. After logging in into Trello, he needs to approve that the application can read his boards, cards and user information. The information that was also visible on the page where he was asked to login.

Once approved, all the boards of the user will be shown in the Timesheet application. This together with the user information (Username and avatar). All this Trello data provided by the Node.js Application running inside the MTA project. The HTML5 module (our Timesheet App inside the MTA) calls the Trello services via the approuter. It forwards this request to the Node.js App and this will respond with the Trello login screen and Trello data.

When the user selects a board, he will see all his cards and spent hours (on the appropriate cards). Here he can add, remove and edit the spent hours on the selected card.

These spent hours are retrieved from the database inside the MTA project. This retrieval is done by an OData V4 service, created and exposed inside the MTA. CAP for the win! In the database a simple model is specified to simplify the development of the application. Every entry in the database table contains a board id and card id when they are created. This comes with the benefit of retrieving the spent hours of a card when they are selected. An easy request with a filter will be used to fetch the respective spent hours on the cards. This makes it very easy to retrieve the right spent hours on cards of specific boards.

Demo Video Timesheet App

Instead of providing a lot of pictures of all these steps, I would like to share the following demo video with you all. It will give you a clear view of the user experience while consuming the Timesheet Manager application on SAP Cloud Foundry.

Building the Timesheet App

In the following blogs in this Blog Series I will provide a walkthrough, on how to build this Timesheet app from scratch.

Going over the following topics:

As you can see, we will be using different Modules all running inside the same Multi Target Application project.

Wrap Up ?

I really hope you liked reading this blog and found it interesting. Maybe you experienced the same situation in the past, or you are currently facing it yourself or you already have a solution your own. My intention is to give you some insights on how you can reduce these manual copy-pasting tasks according to timesheet management. This by integrating third-party API’s (in this case the Trello API’s) inside your own MTA project running on Cloud Foundry.

At the end of this Blog series you will have the following key take-aways:

1. You will be in the possessions of your own CAP Trello Timesheet Management Application.
2. The SAP Cloud Foundry Environment and all its services are no secrets for you anymore.
3. No more valuable time will be lost maintaining your Timesheets, because you will be using your developed Timesheet Application.

Thanks for reading this first Blog of the “Timesheet Management with CAP & Trello ⏱️” Blog Series. Hopefully I convinced you to see you in the next hands-on blogs where we will create this timesheet application from scratch!

More good news is that this full Multi Target Application project will be available in the following TimesheetManagement GitHub Repository.

In case you would like some more good information about SAP Cloud Foundry, MTA and CAP services you can check out the following documentation and hands-on tutorials:

• SAP Cloud Application Programming Model
• Create a Node.js Application on Cloud Foundry
• Create an application using SAP HANA and the Cloud Application Programming model
• Develop your first SAP Fiori launchpad site with portal service on SAP Cloud Platform Multi Cloud – part 1
• Test your CAP nodejs applications with authentication locally

• Set Up SAP Business Application Studio for Development
• SAP Business Application Studio – Product Walkthrough
• #CloudFoundryFun #9 – Develop with the SAP Business Application Studio
• 46 – The SAP Business Application Studio with Marius Obert
• It’s time to try out SAP Business Application Studio

This is just a start, there is way more good documentation out there. But remember always try to check out the most recent ones. ?

Time to get hands-on in the following blog!

Timesheet Management with CAP & Trello ⏱️ – Setup the IDE & MTA Project #1

Kind regards,

Dries