Skip to Content

Hello Dear Community,

in this tutorial we’re going to perform entralling journey and take a look at how we can solve the task of delivering Google Calendar events into SAP Mobile Cards application on a mobile phone.

This is called a Tutorial (instead of just an article) because here I’m going to describe step-by-step path from the goal discovery up to the finish. Though be awared that this is not a guide for very beginners as I’m not going to post screenshots of how to register for SCP trial account or how to install Mobile Cards application. I will also share some thoughts (many thoughts) urging you to leave your comments. Those of you who come here in order to get pure technical stuff can skip large texts. Let’s start!

Why

First of all, why (except just interest) should we at all consider SAP Cloud Platform as a technology for solving our task. I would love to see any suggestions in comments. Meanwhile kindly let me suggest the following answer: while being a strategic decision for an enterprise grade customers SCP offers them a wide toolset of services which allow solving many different tasks relatively easy and relatively fast. That is, you may already have a bunch of solutions running for you in SCP and bringing desired benefits to your business users (this is the main goal, isn’t it?). And once they say: Hey, what about a little (they do really believe in this word) new feature which will throw a Google Calendar events to our users? Here you come at the stage saying exactly what they always expect but so rarely hear: Yes, with our existing SCP we can do this little feature fast and seamless.

Architecture overview

The architecture is simple and thus dares to be called charming or at least pretty. Note that there is no Java or any other custom applications. Still there is one not necessary thing which prevents me of calling this as an ideal architecture for this particular task. We will hopefully discuss it later.

But let’s start our step-by-step journey. It will be consisting of the following steps:

Backend for our data

  1. Prepare Google Calendar account and generate credentials;
  2. Somehow receive data from the Calendar;

Frontend on a mobile phone

  1. Design the look of our frontend;
  2. Connect our frontend to our data.

Step 1: Prepare Google account with Calendar

Log in to your Google account and go to Calendar page. There I created new Calendar called SCPCalendar.

Our Calendar is yet empty, we will create some events later.

Now we’re about to get the access to this calendar by API. Go to https://console.developers.google.com and create a new project, call it SCPCalendar.

You will see the notification as on the screenshot below (1). Switch to your newly created project by choosing it from the dropdown in the left top corner (2).

Then click “Enable APIs and Services” (3).

Find the Google Calendar API and click on it.

Then click on ENABLE.

Okay, you’ve enabled your Calendar API, now you should create credentials for it as Google prompts you.

On the next page Google will tries helping you to decide what type of credentials you need for your purposes. As we’re going to call the API from SAP Cloud Platform without any UI I’m pretty sure we choose “Web Server”.

Click on “What credentials do I need” and Google will offer you to create Oauth 2.0 Cliend ID.

Choose and enter the name your OAuth client ID. I choose “SCPCalendarClient”. Next we are prompted to enter authorized redirect URIs. Sounds great, but at a time we don’t know any URIs to redirect so leave fields blank for now. We click “Create OAuth Client ID”.

Next you can set up the consent screen, I will leave it on your own.

Finally Google creates your Client ID. You don’t need to immediately downoad it as it will be accessible later. Click Done!

Great, we have created OAuth client ID. We can see the Client ID and the Client secret by clicking at the pencil icon.

Step 1 summary

We have prepared our Google Account and generated OAuth credentials for future use. Please note that even though we created separate Calendar “SCPCalendar” we in fact grant the access to all calendars of this Google Account.

Step 2: Receiving data from Google Calendar

SAP provides growing number of services inside SCP. Here we will take a step into fresh Open Connectors service. There is already pre-defined connector to Google Calendar which we immediately take.

Go to Open Connectors service (Neo environment) and from the list of pre-defined connectors find Google Calendar. Hover the mouse on it and choose Authenticate. Expand optional fields. Copy and paste OAuth API Key (your Client ID) and OAuth API Secret (your Client Secret), then press Create Instance.

Oops, something went wrong as you see the error screen on the new browser tab.

If you switch your browser back to the SCP Open Connector tab you will see loading bar.

Let’s cancel the process and fix it.

Google showed the redirect URI: https://auth.cloudelements.io/oauth.

We must authorize the URI for our OAuth client.

The way we got the redirect URI looks a bit tricky, isn’t it? Unfortunatelly I haven’t found this URI in the SCP official documentation. If some of you know where it is located, please kindly provide a link in comments.

Okay, go back to your Google Developer Console, click at the pencil near your OAuth Client and paste https://auth.cloudelements.io/oauth into Authorized redirect URIs. You will see immediatelly the message saying you should also add the domain to the authorized domains list.

No problem, just click on the link (or head to the tab labeled “OAuth consent screen”) and in the “Authorized domains” field paste: cloudelements.io.

Click on Save and don’t forget to go back to your OAuth Client and add Redirect URI https://auth.cloudelements.io/oauth as it hasn’t been saved yet.

Now go back to your Open Connector tab and again click Create Instance. Wow, now we see completely different picture! It looks like we do right things as you can see the invitation from Google to grant the access to your account.

After you allow the access you are automatically redirected back to SCP Open Connectors service. It congratulates you!

Can’t wait to try what we have just created? Nothing can be easier! Go to Instances area and find your connector there. Let’s test it, click at “API Docs” button from the right.

You will see the list of all possible pre-defined request you are now able to work with.

Let’s explore the list of calendars. To do this we use the GET request /calendar-list.

Click on it and you will see info expanded. There will be a button “Try it out” on the right. What’re you waiting for, just click on it and then click Execute!

Scroll down to see hopefully the same what I see. Response code 200 (means OK) and the response body. If you take a closer look at the response body (it is scrollable) you will find all your calendars including our SCPCalendar.

Please note the id of our SCP calendar which is looks like “yourCalendarGuidHere@group.calendar.google.com”.

Now when we know our calendar ID let’s read its events! Copy the id and let’s now try another GET request: /calendars/{calendarId}/events

Click on it, then “Try it out”, but this time don’t be hurry executing it. We should pass the required parameter calendarId. Paste it and then click on Execute.

We’ve got an empty response body. Oh yes, we haven’t created any events yet, let’s fix this.

I create new event in my Calendar.

Now if I repeat my request through Open Connector I expect to see the result.

It is there!

Step 2 summary

We’ve succesfully connected to our Google Calendar and received its event via API call.

We can now call our Open Connector instance via https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/.

Take a look at what we exactly send as a request:

The request contains Authorization Header which consists of User, Organization, Element fields. These fields are needed for Open Connectors Service to be able to recognize you.

You can find your credentials by clicking at the button from the bottom left in the Open Connectors Cockpit.

We will be doing something with these credentials to make all this stuff work later on.

Congratulations, we’ve built our data backend as shown below.

The time to prepare our frontend.

Step 3: Design Mobile Cards for our Calendar events

We want events from our SCP Calendar to be moved as Mobile Cards on user’s mobile phone. SAP Cloud Platform Mobile Services is exactly something that we need for this purpose.

Go to SAP Cloud Platform Mobile Services, then expand Mobile Applications menu and go to SAP Mobile Cards.

First of all we should prepare the connection to our backend. Go to Features tab and there click on Connectivity.

Create the new Mobile Destination, I will call it CalendarConnector.

Set the URL: https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2

***Warning – the next step will not work. I believe we should step through it because I position this article as a tutorial, remember? We will fix it later on.***

Next it offers us to add custom headers. Great, this is what we need! You remember there are Authorization header right? We can add our Authorization header with User, Organization and Element fields. (spoiler: this wan’t work! But honestly, how would’ve we knew it?)

Next when it prompts choose SSO Mechanism “No Authentication” as all credentials passed via Authorization header.

Okay, we now have our destination. We can even succesfull Ping it.

It will not work.

But don’t panic, just continue.

Okay, now when we have the Destination it’s time to create our Mobile Card template.

Go to Card Templates and create a new one.

I will name it: CalendarForTutorial.

I also choose the HTML template and so on as shown on the screenshot below.

Select our destination: CalendarConnector (Ping is succesfull).

Please note that I choose Card Template: Automatic Instance Generation. This option is needed when you are going to push new cards from server to mobile devices from time to time.

Collection handling is set to Use Collection as our backend (Google) gives us an array of events.

Query field must be filled. Query is related to destination. Our query is:

/calendar/{your-calendar-id-here}/events

Check the Query by clicking the Check link.

Oops, it gives us 401 error – authentication failed.

We will back to it later and now let’s finish our card template creation.

Go to Sample Data tab and replace the content there with the following:

{
    "summary": "Say hello to Community",
    "reminders": {
      "useDefault": true
    },
    "creator": {
      "displayName": "Yourname",
      "email": "yourmail@gmail.com"
    },
    "kind": "calendar#event",
    "htmlLink": "",
    "created": "2018-11-06T11:41:58.000Z",
    "iCalUID": "asdsadsadsadasasd@google.com",
    "start": {
      "dateTime": "2018-11-06T15:00:00+03:00"
    },
    "sequence": 0,
    "extendedProperties": {
      "private": {
        "everyoneDeclinedDismissed": "-1"
      }
    },
    "organizer": {
      "displayName": "SCPCalendar",
      "self": true,
      "email": "sdadasdadadafd0@group.calendar.google.com"
    },
    "etag": "\"33424324234340\"",
    "end": {
      "dateTime": "2018-11-06T16:00:00+03:00"
    },
    "id": "7fdsfdsfsdfdfdgf2",
    "updated": "2018-11-06T11:41:58.457Z",
    "status": "confirmed"
}

You should be already familiar with this structure as it is exactly what we get when testing our Open Connector. (I have changed the UUIDs for confidentional reasons).

Please note that we paste only one entity, but Google gives us an array of entities. We do not paste an array and even brackets [ ] because we set ‘Use Collection’ in card template, thus SCP Mobile Service understands what to expect from backend.

 

Then go to Editor tab. I just changed the content there for the very simple HTML:

<body>
    <div id="mySimpleTemplate" class="myTemplate"
data-type="text/x-handlebars-template">
        <div class="header" style="height: 30px">
            <div style="text-align: left;">
                <span style="font-weight: bold; font-size: 24px; float: left; color: #ffffff; display: inline; padding-top: 8px">
                    {{EventName}}
                </span>
            </div>
        </div>

        <div class="listitem">
                <div class="listitem-label">
                    <span>
                        Author
                    </span>
                </div>
                <br>
                <div class="listitem-value">
                    <span>
                        {{EventAuhor}}
                    </span>
                </div>
        </div>
            
        <div class="listitem">
                <div class="listitem-label">
                    <span>
                        Event date
                    </span>
                </div>
                <br>
                <div class="listitem-value">
                    <span style="float: right; clear: right; display: inline; font-size: 17px;  padding-top: 4px">
                        {{EventDate}}
                    </span>
                </div>
         </div>
        
    </div>
</body>

For simplicity reasons I use only 3 variables: EventName, EventAuthor, EventDate. All of them are presented in our Sample Data, we just need to prepare the Data Mapping.

Go to Data Mapping tab.

Let’s set the mapping manually.

We have prepared our card. Despite there is a problem with our Query let’s now save the template.

When it asks if we want to save as locked cards, I prefer to choose No.

Now we finally can see our card.

Good, but what with the connection problem?

I think things like this are something to be solved by every developer all the time. It takes time. The platform in turn should eager to help its developers live and deal with it. I hope SCP is gonna be an adult platform and will continue improving developer support.

For our connection issue I spent some time digging and finally discovered that headers which have been set by us in the CalendarConnector destination are got cut out. Other headers except Authorization are passed while the Authorization header is just being deleted. And nowhere in documentation I was able to find anything about this behaviour.

So go back to our CalendarConnector and just delete Authorization header.

I’ve created the Question at https://answers.sap.com/questions/670667/scp-open-connectors-authorization-header.html and got the Answer that for now the only way to go is using SCP API Management Service.

We only need to pass Header to our request. To my mind API Management is too huge for it. Will only hope that guys from SCP work on it. As Divya said: “We are also working with our teams to support this from Connectivity services in a standard manner for our future releases”.

Step 3 summary

We’ve prepared the look of our Mobile Card. We’ve also realized the problem with passing Authorization header from SCP Mobile Service directly to SCP Open Connectors. We’ve been answered that we should use SCP API Management service.

So now our architecture looks as something like this:

Step 4: SCP API Management to connect Backend and Frontend

It’s pretty easy thanks to series of posts by Divya Mary (https://blogs.sap.com/2018/09/24/blog-series-simplify-integration-with-third-party-application-with-sap-cloud-platform-open-connectors/).

We want our API proxy to be connected to Open Connectors. From Mobile Service we will send the request to a proxy, which in turn will wrap the request to Open Connectors adding the desired headers to it.

Go to SAP Cloud Platform API Management service, then Develop tab and Create a new API proxy.

I will call it CalendarConnectorProxy.

Select the URL radiobutton and paste the full URL of our Open Connector including Calendar id:

https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/calendars/your-own-calendar-id0%40group.calendar.google.com/events

Let’s set the API Base Path the same pretty short name: /CalendarConnectorProxy.

Click Save.

After save click Policies to be forwarded into the Policy Editor. What we need is to apply one policy for our PreFlow. Policy is called AssignMessage.

I called the policy “setAuth”.

The code follows:

<!-- This policy can be used to create or modify the standard HTTP request and response messages -->
<AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
	<!-- Sets a new value to the existing parameter -->
	<Add>
		<Headers>
		    <Header name="Authorization">User paste-your-user-credential=, Organization paste-your-organization-credential, Element paste-your-element-guid=</Header>
		    <Header name="Accept">application/json</Header>
		</Headers>
	</Add>
	<IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
	<AssignTo createNew="false" type="request">request</AssignTo>
</AssignMessage>

From where did I get this code? I wrote it after reading the documentation which can be found here: https://docs.apigee.com/api-platform/reference/policies/assign-message-policy

Update the policy and save and deploy the proxy.

After the proxy is deployed you can click on API Proxy URL (or API Base Path) and the new browser tab will open showing you the events of your Google Calendar!

It’s now the very time to go back to our Mobile Service and fix the destination!

Go to SCP Mobile Services, Destinations, find our CalendarConnector destination, edit it. Change the URL from the Open Connector’s URL to newly created API Proxy URL:

https://your-trial-user-trial.apim1.hanatrial.ondemand.com:443/

Use only part of the URL with domain and port. The relative path will be the Query in our Mobile Card Template.

Make sure there are no custom headers and SSO Mechanism is set to No Authentication.

When the destination updated go to our mobile card CalendarForTutorial and change the Query field for the second part of API Base Path: /your-user-trial/CalendarConnectorProxy

If you now click Check, you should finally see the success.

The only what is left to do and what I’m not going to describe (because it’s trivial) is to take your smartphone, install SAP Mobile Cards application, subscribe to CalendarForTutorial card and voila!

Step 4 summary

Our completed architecture after all.

In this step we leveraged API Management service in order to wrap the request from Mobile Service to Open Connector. We were able to pass Authorization header needed for Open Connectors.

Conclusion

In this tutorial I tried to show the path a developer must go through in order to build something on SAP Cloud Platform.

Actually there was not much code-development, wasn’t it? Just a little HTML for Card Template and some XML lines in API Management Service and that is it.

At the same time we connected three separate SCP services together and got working prototype as a result.

Thank you!

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply