- SAP Managed Tags:
I've seen a number of mentions to SAP Cloud Platform Open Connectors, so I figured why not put one to use myself and show you how to use an Open Connector with Mobile Cards.
You should start off by going through the blog that divya.mary#overview posted where she has written a number of blogs that take you through creating an SAP UI5 application with Open Connectors. This is a good way to get a quick overview on how to use Open Connectors.
I decided to use the ServiceNow Open Connector and get a list of Incidents and generate a deck of cards for open incidents. The card itself is pretty straight forward, and when using the Open Connector it makes it really easy to do the integration. ServiceNow provides a REST API in order to integrate with their solution, and with the Open Connectors I was able to enable an API in SAP Cloud Platform that gives me access to those API's through my ServiceNow developer account. The scenario I created is pretty simple; use a Get query to get a list of incidents, put relevant information from the incident on the card, and then add an action that allows me to add comments to the incident.
You'll first need to either already have a ServiceNow developer account or go and create a new account in order to get a new instance. If you need to create one, go to their developer site and sign up.
Once you have an instance you'll use the provided information to create an Open Connector instance in Open Connectors.
I'll assume you read the blog from Divya provided above and know how to get to Open Connectors. Here we will search for the ServiceNow Connector.
When you put your mouse over the tile you can select the My Resources option. From there select the Authenticate Instance icon in the toolbar.
You can name the instance however you like and then add the information about your ServiceNow developer instance that you got when creating a developer account.
With the Instance created go to Resources and you will be able to test getting incidents from ServiceNow. Scroll down to incidents and then select Get. In order to test it select your Instance that you just created in the left hand tool bar and then a Try it Out button will show. When you select the button, Authorization will be populated, and then you can select Execute. You should get a response back that shows the results for incidents in your ServiceNow account.
If you want to test this elsewhere you can take the curl and put it in something like Postman. We will use it to create our Mobile Card.
I'll assume you have working knowledge of creating Mobile Cards and Mobile Services in general. If not there are several posts by myself and others that show step by step creation of Mobile Cards.
Create a Mobile Destination to the Open Connector URL. This will be https://api.openconnectors.ext.hanatrial.ondemand.com assuming you are running in trial. You can see your destination path in the above curl output. Set your Authentication type to No Authentication. You will need to Add a Header.
The Header Key will be:
Authorization
and the Value will be:
User xxxx, Element xxxx
You can get these values from the curl output or when you do the Try It Out in the Authorization section just copy and past the entire string for the value. In Part 4 of Divya's blog it talks about how to use the SAP's API Management in order to manage the token creation so that you do not need to define this header.
Once you have created the Destination make sure to add it as a Connection for Mobile Cards to use.
Create a New Card, select to use Template Manager as the source and select Basic Mobile Card Template. Make sure you change your Destination to the destination you created. Use the below information in the Card Template section. The query I am using is to retrieve only five incidents and also getting only those that are open by using a where clause of resolved_by=''. You can define the query as you like depending on how many cards you want to show in the device and the type of filtering you want to do.
Card Template: Automatic Instance Generation
Query: /elements/api-v2/incidents?pageSize=5&where=resolved_by=''
Collection Handling: User Collection
Query URL Collection Root: $
Query Entity Key Paths: $.sys_id
Go to the Sample Data and select the Get Data. This should return the JSON from ServiceNow based on the Query URL.
You can then start designing your card as you wish. Here I am providing my HTML and CSS for the card that I created. You will need to add a ServiceNow.jpeg to your Assets or change the image name as needed.
HTML for the Front of the card:
HTML for the Back of the Card, note that I'm using a class reference c2g_address in order to allow for the use of showing a map of where the incident is located:
CSS
I have added one Action to this card where you can add a comment to the incident. There are API's to close, update, delete and do other things to the incident, this one was straight forward to do.
In Action add the following
Name: Comments
Label: Add Comments
URL: /elements/api-v2/incidents/${ID1}/comments
HTTP Method: POST
Action Body: {"comments":"${Notes}"}
ID1 will evaluate to the sys_id of the incident and Notes is a Parameter where you will add the comments when selecting this action in the card.
Once you have this done, save your card and subscribe. You should receive 5 incidents from your ServiceNow developer account. Keep in mind the developer account for ServiceNow does hibernate your instance so you may need to wake it if you haven't been using it for some time.
Example card and then adding comments to that incident.
You can go to your ServiceNow dashboard and find the incident INC0000018 for this example.
Opening the Incident you should see the comments that were added through Mobile Cards.
You should start off by going through the blog that divya.mary#overview posted where she has written a number of blogs that take you through creating an SAP UI5 application with Open Connectors. This is a good way to get a quick overview on how to use Open Connectors.
I decided to use the ServiceNow Open Connector and get a list of Incidents and generate a deck of cards for open incidents. The card itself is pretty straight forward, and when using the Open Connector it makes it really easy to do the integration. ServiceNow provides a REST API in order to integrate with their solution, and with the Open Connectors I was able to enable an API in SAP Cloud Platform that gives me access to those API's through my ServiceNow developer account. The scenario I created is pretty simple; use a Get query to get a list of incidents, put relevant information from the incident on the card, and then add an action that allows me to add comments to the incident.
You'll first need to either already have a ServiceNow developer account or go and create a new account in order to get a new instance. If you need to create one, go to their developer site and sign up.
Once you have an instance you'll use the provided information to create an Open Connector instance in Open Connectors.
I'll assume you read the blog from Divya provided above and know how to get to Open Connectors. Here we will search for the ServiceNow Connector.
When you put your mouse over the tile you can select the My Resources option. From there select the Authenticate Instance icon in the toolbar.
You can name the instance however you like and then add the information about your ServiceNow developer instance that you got when creating a developer account.
With the Instance created go to Resources and you will be able to test getting incidents from ServiceNow. Scroll down to incidents and then select Get. In order to test it select your Instance that you just created in the left hand tool bar and then a Try it Out button will show. When you select the button, Authorization will be populated, and then you can select Execute. You should get a response back that shows the results for incidents in your ServiceNow account.
If you want to test this elsewhere you can take the curl and put it in something like Postman. We will use it to create our Mobile Card.
I'll assume you have working knowledge of creating Mobile Cards and Mobile Services in general. If not there are several posts by myself and others that show step by step creation of Mobile Cards.
Create a Mobile Destination to the Open Connector URL. This will be https://api.openconnectors.ext.hanatrial.ondemand.com assuming you are running in trial. You can see your destination path in the above curl output. Set your Authentication type to No Authentication. You will need to Add a Header.
The Header Key will be:
Authorization
and the Value will be:
User xxxx, Element xxxx
You can get these values from the curl output or when you do the Try It Out in the Authorization section just copy and past the entire string for the value. In Part 4 of Divya's blog it talks about how to use the SAP's API Management in order to manage the token creation so that you do not need to define this header.
Once you have created the Destination make sure to add it as a Connection for Mobile Cards to use.
Create a New Card, select to use Template Manager as the source and select Basic Mobile Card Template. Make sure you change your Destination to the destination you created. Use the below information in the Card Template section. The query I am using is to retrieve only five incidents and also getting only those that are open by using a where clause of resolved_by=''. You can define the query as you like depending on how many cards you want to show in the device and the type of filtering you want to do.
Card Template: Automatic Instance Generation
Query: /elements/api-v2/incidents?pageSize=5&where=resolved_by=''
Collection Handling: User Collection
Query URL Collection Root: $
Query Entity Key Paths: $.sys_id
Go to the Sample Data and select the Get Data. This should return the JSON from ServiceNow based on the Query URL.
You can then start designing your card as you wish. Here I am providing my HTML and CSS for the card that I created. You will need to add a ServiceNow.jpeg to your Assets or change the image name as needed.
HTML for the Front of the card:
<body>
<div id="mySimpleTemplate" class="myTemplate"
data-type="text/x-handlebars-template">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="wrap">
<div class="header" >
<img src="ServiceNow.jpeg" alt="" height="56px">
<!-- Images within the title header area should have an image height =56px. -->
<div style="text-align: left;">
<h1>
Service Now Incidents
<!--replace the title with your own or handlebard field of a field you would like to pull into your card. -->
</h1>
</div>
<!--The div style below is an example of how to include some additional fields in the title/header part that are aligned right-->
<div class="additional">
<span class="additional1">
Incident Number
</span>
<span class="additional2">
{{number}}
</span>
</div>
</div>
<div class="card-content">
<!-- the <hr> creates an example horizontal line at the beginning of card body directly below the header. It can be removed but this horizontal line shows how the header CSS padding is working -->
Incident Details, see back of card for more information
<hr>
<br>
<span class="label">Opened By:</span><br>
{{opened_by.display_value}} <br>
<br>
<span class="label">Incident State: </span><br>
{{state}}<br>
<br>
<span class="label">Incident Impact: </span><br>
{{impact}}<br>
<br>
<span class="label">Incident Priority: </span><br>
{{priority}}<br>
<br>
<span class="label">Incident Opened: </span><br>
{{opened_at}}<br>
<br>
<span class="label">Incident Short Description: </span><br>
{{short_description}}<br>
<br>
<br>
</div>
</div>
</div>
</body>HTML for the Back of the Card, note that I'm using a class reference c2g_address in order to allow for the use of showing a map of where the incident is located:
<body>
<div id="mySimpleTemplate" class="myTemplate"
data-type="text/x-handlebars-template">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="wrap">
<div class="header" >
<div style="text-align: left;">
<h1>
Example Backside
</h1>
</div>
<!--The div style below is an example of how to include some additional fields in the title/header part that are aligned right-->
</div>
<hr>
<div class="card-content">
<!-- the <hr> creates an example horizontal line at the beginning of card body directly below the header. It can be removed but shows how the header CSS padding is working -->
<!--by adding a class reference like the ones specified below add an action to the arrow item in the bottom left hand side of the card. Supported items are c2g_phonenumber; c2g_email; c2g_website; c2g_address;-->
<span class="label">Location:</span><br>
<div class="c2g_address">
{{location.display_value}}
</div>
<br>
</div>
</div>
</div>
</div>
</body>
CSS
.myTemplate {
background: linear-gradient(to right bottom,#d3d3d3,#367dc4);
color: #fafafa;
font-family: Helvetica, Arial;
height: 100vh;
/*The linear-gradient background provides a nice background with slight color transistion from upper-right to bottom left. We also recommend Helvetica or Arial for the broadest range of font-weight property support. Another example could be background: linear-gradient(to bottom right,#589CCE,#226596);*/
}
.header {
display: flex;
padding: 1rem;
height: 3rem;
/*Padding the header's title area of the card with 1REM or 16px gives the header details room to breathe on all four sides. Helpful to accomodate many mobile screen sizes*/
}
.header img {
margin-right: 0.5rem;
}
.header h1{
font-size: 1rem;
margin-top: 0.5rem;
color: #fff;
font-weight: bold;
flex: 1 1;
line-height: 2.5rem;
white-space: nowrap;
/*We recommend that the header title font size of 1.25rem or 20px and tends to fit on a single line around 24 characters. Single line titles display best when in the card deck view. If you are including an image in header than consider 20px*/
}
.header .name{
font-weight: normal;
margin-top: 1.25rem;
font-size: 1rem;
display: block;
text-align: right;
white-space: normal;
}
.header .additional {
position: absolute;
right: 16px;
color: #fafafa;
text-align: right;
margin-left: 1rem;
}
.header .additional1 {
font-size: 0.75rem;
display: block;
text-align: right;
line-height: 0.5rem;
padding-top:0.5rem;
}
.header .additional2 {
font-size: 0.875rem;
display: block;
text-align: right;
padding-top:0.5rem;
}
.card-content {
padding: 1rem;
margin-bottom: 2rem;
}
.card-content .label{
font-size:0.75rem;
color:#CEDDEC;
}
.footer{
background-color: #2F6497;
height: 3rem;
display: flex;
position: absolute;
bottom: 0;
width:100%;
}
.footer .footer-content{
position: relative;
left: 18%;
display: flex;
}
.footer h4{
font-size: 0.75rem;
flex: 1 1;
color: #fafafa;
font-weight: normal;
margin-right: 0.5rem;
}I have added one Action to this card where you can add a comment to the incident. There are API's to close, update, delete and do other things to the incident, this one was straight forward to do.
In Action add the following
Name: Comments
Label: Add Comments
URL: /elements/api-v2/incidents/${ID1}/comments
HTTP Method: POST
Action Body: {"comments":"${Notes}"}
ID1 will evaluate to the sys_id of the incident and Notes is a Parameter where you will add the comments when selecting this action in the card.
Once you have this done, save your card and subscribe. You should receive 5 incidents from your ServiceNow developer account. Keep in mind the developer account for ServiceNow does hibernate your instance so you may need to wake it if you haven't been using it for some time.
Example card and then adding comments to that incident.
You can go to your ServiceNow dashboard and find the incident INC0000018 for this example.
Opening the Incident you should see the comments that were added through Mobile Cards.
