Starting now this new series of posts I am going to discuss an integration scenario between Web IDE and Jira involving one of the latest integration services available in SAP Cloud Platform called Open Connectors.
Open Connectors was released in the last quarter of 2018 and it has been receiving a lot of attention from SAP community with different blog posts covering this subject. I provided also my contribution explaining how you can build a custom connector using Spotify Web API as example. You can find the link to this article below:
Open Connectors provides a lot of pre-built connectors simplifying and accelerating the integration between SAP applications and 3rd party APIs.
After analyzing the list of connectors available I had an interesting idea, instead of focusing on a usual business scenario why not try something new and use this service in a new feature destined to UI5 developers?
Since I moved to Australia in 2016, I've been noticing that in most part of the SAP projects there are two important software applications present in the daily routine of UI5 developers: Web IDE and Jira (Atlassian).
If these two applications are so important, why still there isn't any kind of integration between both in the same cloud app?
Maybe the lack of a service to orchestrate multiple parties has increased the complexity of such solution and for this reason, no one was interested to implement this idea before. If this is the case there is no excuse anymore, in this article we are going to explore this interesting scenario and deliver this integration based on the mentioned technologies.
Before we discuss the technical details of this solution let's have a look in both offerings to understand the impact they have in the life of UI5 developers.
Jira is one of the main software applications delivered by Atlassian, an Australian company that develops products for software developers, project managers and content management.
Jira is used for bug tracking, issue tracking, and project management and it is widely adopted in consulting services and implementation projects nowadays.
In most part of the SAP projects in Australia, we can find Jira supporting the software or the project life cycle.
As a SAP developer, you probably heard about Web IDE at some point of time.
Web IDE is a web-based development environment for SAP Fiori, SAPUI5, and full-stack business apps delivered by SAP Cloud Platform as a SaaS (Software as a Service).
Web IDE provides multiple assistants and templates to speed up the development process including additional features (extensions) that make the life of developers easier.
Now that you understand the importance of both applications let's move on and discuss the technical solution proposed by this article.
To provide integration between Web IDE and Jira we are going to explore a lot of different topics. In this series of posts you will learn:
The basic concept is to use Open Connectors as an accelerator to mediate the message exchange between Web IDE and Jira Cloud, the diagram below demonstrates the basic communication flow expected with this solution.
Note: Almost all the knowledge requested by this series of blogs is already available through different articles published in SAP Blogs, I will share the relevant links and references that helped me during my research along the way.
Let's start this development with the configuration of a new Jira Cloud development instance and the configuration of Open Connectors.
The first step is to register for a development instance in Atlassian Cloud, the good news is the development instance is FREE! You can find more information about this offer through the following article Atlassian introduces new cloud development environment.
To sign up and get access to your free development instance you just need to fill the form available in the link Get your development environment.
Claim your site name, provide your personal information, define a password and mark the agreement checkbox. After the last step, your instance is ready to go and you can start the configuration of your workspace.
For the purpose of this article, I created a new instance using the hostname feliperodrigues.atlassian.net, please remember to adjust the steps of this demo using your own URL.
In your Jira Cloud instance create a new project based on the Bug Tracking template with the name of SAP Blogs Demo.
Create a new issue reflecting a random UI5 development to be fixed. Press the + button on the left menu to create a new incident.
Select the type Bug, define a title, description and press the button Create.
Open the menu Reported by me and check your new issue available in the list.
Note: At this stage, we are not exploring all the Jira features available, for this first blog we just need the basic data to test the API communication, one project and one issue are enough for the purpose of this demo. Feel free to explore additional options if you want to enhance your application. 🙂
With the Jira setup concluded we can move on and start the configuration of a new instance in SAP Cloud Platform Open Connectors.
As I mentioned before, I am going to share some interesting blog posts that supported my research during the run of this new blog series, since we are starting with Open Connectors configuration I would like to share this blog that covers most part of the features available in this service:
Let's start our configuration by accessing the SAP Cloud Platform and activating the relevant service. If the service is already active you will see the status Enabled under the title (similar to the image below).
Click on the link Go to Service to start the application in another browser tab.
In the new page check the left menu and select the item Connectors to open a list with all the available pre-built connectors, search for Jira and you will find a tile ready for consumption.
Pass the mouse over this tile to show all the options available. The first step is the authentication with the external API, let's proceed with this step by pressing the button Authenticate.
Note: For the sake of this exercise we use the Basic Authentication to avoid increasing the overall complexity but Jira REST API documentation recommends accessing via OAuth2 in a production environment. If you want to understand how this authorization protocol works you can have a look in my previous article with a good example of a common OAuth2 authentication flow and all the detailed steps to configure Open Connectors for this particular case. You can find the link for this article below:
In the next step, create a new instance providing a Username, Password and the Server URL of the Jira Cloud development environment.
To avoid using your real password there is a simple workaround based on API tokens. You can find more information about this option through the link API tokens - Atlassian Documentation.
Let's follow the recommended steps and create a new API token to access Jira API. First things first, log in to https://id.atlassian.com/manage/api-tokens.
Press the button Create API token and define a concise label, in my case I chose feliperodrigues-openconnectors.
Confirm by pressing the button Create. You should receive the token in the next dialog, similar to the example below.
Press the button Copy to clipboard or select the option View to visualize the new token. Notice that before the first authentication the Last accessed field is still marked as Never accessed.
Get back to Open Connectors, replace the Password by the new API token and finalize the process by pressing the button Create Instance.
After the authentication, you should receive a success message in the header of the page:
And the following options will be available for consumption.
Before we proceed with the tests of the API let's have a quick look in the API token one more time to see what happened.
Now the Last accessed field reflects an update because of the recent authentication triggered by the connector. At any point of time is possible to revoke this token as a security measure.
Getting back to the new instance, let's confirm if everything is working fine by performing a simple test in one of the methods of this API. Select the option Test in the API docs and the following page appears.
All the entities from Jira API are now available through this screen and you can test the basic CRUD operations. Let's do a quick test selecting the project and incident created at the beginning of this article.
Start by searching for the projects entity.
Click on the method GET /projects and press the button Try Out.
Now you have the option to change some of the parameters before executing the API method. Since at this stage there is no need to adjust the call, just scroll down the container until you find the button Execute, press the button to trigger the API call.
If everything goes as planned you must see the HTTP 200 Code informing a successful API call and in the Response Body you should find the project created via Jira Cloud with the name of SAP Blogs Demo.
Note: If you check the Request URL there is no distinction from the Jira API or even the current Open Connectors account, the only thing available in the URL is the entity selected for this call (in our case projects). If all the connectors and accounts run through the same base URL how is it possible to identify the differences between each one of them?
The answer is connected with the Authorization Header. Open Connectors has a specific hash for the authorization based on three different components:
The combination of these parameters defines the route to find the SAP Cloud Platform account, Open Connectors sub-accounts and the Connector / API.
Before we conclude this exercise let's repeat the test using the method GET /incidents.
Press the buttons Try Out and Execute. After the search is finished look the payload in the Response Body to find the details about our incident.
Before we conclude this first blog I would like to include an extra configuration step that will be necessary for the next parts.
To access Open Connectors from your cloud application (in our case Web IDE) you need to configure a new Destination in the main cockpit from SAP Cloud Platform. Without this configuration is not possible to access the API via the Web IDE extension.
Open the SAP Cloud Platform and access Connectivity -> Destination.
Configure the connection to Open Connectors API based on the following parameters:
Notice we didn't include an authentication method because the pattern used by Open Connectors is conceived specifically for this service, in this case, we need to adapt the authorization header via UI5 development.
You can find more information about this topic in the blog post I shared previously but we will discuss the details about this code adjustment in my next blog.
And this is the end... of part 1 at least. 😉
In Part 2 we discuss how we can extend Web IDE with Features & Plugins including new events and also new components to the user interface. At the end of the next blog, you will learn how to perform a basic integration scenario between Web IDE and Open Connectors API.
In Part 3 we put more focus on the development process creating the final development with multiple views and a more complex UI integrating Jira with some of the CRUD operations available through the API.
If you want to follow the next parts don't forget to subscribe to my SAP account and receive notifications about the next releases.
Hope you enjoyed the content and see you next time. 🙂
Integrate Web IDE and Jira using SCP Open Connectors
| Part 1: Open Connectors & Jira |
| Part 2: Web IDE Features & Plugins |
| Part 3: The UI5 Development |
Prologue
Open Connectors was released in the last quarter of 2018 and it has been receiving a lot of attention from SAP community with different blog posts covering this subject. I provided also my contribution explaining how you can build a custom connector using Spotify Web API as example. You can find the link to this article below:
Build a new connector in SAP Cloud Platform Open Connectors
Open Connectors provides a lot of pre-built connectors simplifying and accelerating the integration between SAP applications and 3rd party APIs.
After analyzing the list of connectors available I had an interesting idea, instead of focusing on a usual business scenario why not try something new and use this service in a new feature destined to UI5 developers?
Since I moved to Australia in 2016, I've been noticing that in most part of the SAP projects there are two important software applications present in the daily routine of UI5 developers: Web IDE and Jira (Atlassian).
If these two applications are so important, why still there isn't any kind of integration between both in the same cloud app?
Maybe the lack of a service to orchestrate multiple parties has increased the complexity of such solution and for this reason, no one was interested to implement this idea before. If this is the case there is no excuse anymore, in this article we are going to explore this interesting scenario and deliver this integration based on the mentioned technologies.
Before we discuss the technical details of this solution let's have a look in both offerings to understand the impact they have in the life of UI5 developers.
Jira (Atlassian)
Jira is one of the main software applications delivered by Atlassian, an Australian company that develops products for software developers, project managers and content management.
Jira is used for bug tracking, issue tracking, and project management and it is widely adopted in consulting services and implementation projects nowadays.
In most part of the SAP projects in Australia, we can find Jira supporting the software or the project life cycle.
Web IDE
As a SAP developer, you probably heard about Web IDE at some point of time.
Web IDE is a web-based development environment for SAP Fiori, SAPUI5, and full-stack business apps delivered by SAP Cloud Platform as a SaaS (Software as a Service).
Web IDE provides multiple assistants and templates to speed up the development process including additional features (extensions) that make the life of developers easier.
Now that you understand the importance of both applications let's move on and discuss the technical solution proposed by this article.
Technical proposal
To provide integration between Web IDE and Jira we are going to explore a lot of different topics. In this series of posts you will learn:
- How to subscribe and configure a new Jira Cloud development instance.
- How to use and configure a pre-built connector offered by SAP Cloud Platform Open Connectors.
- How to publish a new Destination via SAP Cloud Platform.
- How to deploy a new Web IDE Feature & Plugin via SAP Cloud Platform.
- How to adjust a SAPUI5 application to consume data from a 3rd party API and interact with the external provider making use of CRUD operations.
The basic concept is to use Open Connectors as an accelerator to mediate the message exchange between Web IDE and Jira Cloud, the diagram below demonstrates the basic communication flow expected with this solution.
Note: Almost all the knowledge requested by this series of blogs is already available through different articles published in SAP Blogs, I will share the relevant links and references that helped me during my research along the way.
Let's start this development with the configuration of a new Jira Cloud development instance and the configuration of Open Connectors.
Setup of a Jira Cloud environment
The first step is to register for a development instance in Atlassian Cloud, the good news is the development instance is FREE! You can find more information about this offer through the following article Atlassian introduces new cloud development environment.
To sign up and get access to your free development instance you just need to fill the form available in the link Get your development environment.
Claim your site name, provide your personal information, define a password and mark the agreement checkbox. After the last step, your instance is ready to go and you can start the configuration of your workspace.
For the purpose of this article, I created a new instance using the hostname feliperodrigues.atlassian.net, please remember to adjust the steps of this demo using your own URL.
In your Jira Cloud instance create a new project based on the Bug Tracking template with the name of SAP Blogs Demo.
Create a new issue reflecting a random UI5 development to be fixed. Press the + button on the left menu to create a new incident.
Select the type Bug, define a title, description and press the button Create.
Open the menu Reported by me and check your new issue available in the list.
Note: At this stage, we are not exploring all the Jira features available, for this first blog we just need the basic data to test the API communication, one project and one issue are enough for the purpose of this demo. Feel free to explore additional options if you want to enhance your application. 🙂
With the Jira setup concluded we can move on and start the configuration of a new instance in SAP Cloud Platform Open Connectors.
Create a new instance in Open Connectors
As I mentioned before, I am going to share some interesting blog posts that supported my research during the run of this new blog series, since we are starting with Open Connectors configuration I would like to share this blog that covers most part of the features available in this service:
Blog Series: Simplify Integration with third-party application with SAP Cloud Platform Open Connecto...
Let's start our configuration by accessing the SAP Cloud Platform and activating the relevant service. If the service is already active you will see the status Enabled under the title (similar to the image below).
Click on the link Go to Service to start the application in another browser tab.
In the new page check the left menu and select the item Connectors to open a list with all the available pre-built connectors, search for Jira and you will find a tile ready for consumption.
Pass the mouse over this tile to show all the options available. The first step is the authentication with the external API, let's proceed with this step by pressing the button Authenticate.
Note: For the sake of this exercise we use the Basic Authentication to avoid increasing the overall complexity but Jira REST API documentation recommends accessing via OAuth2 in a production environment. If you want to understand how this authorization protocol works you can have a look in my previous article with a good example of a common OAuth2 authentication flow and all the detailed steps to configure Open Connectors for this particular case. You can find the link for this article below:
Build a new connector in SAP Cloud Platform Open Connectors
In the next step, create a new instance providing a Username, Password and the Server URL of the Jira Cloud development environment.
To avoid using your real password there is a simple workaround based on API tokens. You can find more information about this option through the link API tokens - Atlassian Documentation.
Let's follow the recommended steps and create a new API token to access Jira API. First things first, log in to https://id.atlassian.com/manage/api-tokens.
Press the button Create API token and define a concise label, in my case I chose feliperodrigues-openconnectors.
Confirm by pressing the button Create. You should receive the token in the next dialog, similar to the example below.
Press the button Copy to clipboard or select the option View to visualize the new token. Notice that before the first authentication the Last accessed field is still marked as Never accessed.
Get back to Open Connectors, replace the Password by the new API token and finalize the process by pressing the button Create Instance.
After the authentication, you should receive a success message in the header of the page:
Nice work! You've successfully created a JIRA connector instance
And the following options will be available for consumption.
Before we proceed with the tests of the API let's have a quick look in the API token one more time to see what happened.
Now the Last accessed field reflects an update because of the recent authentication triggered by the connector. At any point of time is possible to revoke this token as a security measure.
Getting back to the new instance, let's confirm if everything is working fine by performing a simple test in one of the methods of this API. Select the option Test in the API docs and the following page appears.
All the entities from Jira API are now available through this screen and you can test the basic CRUD operations. Let's do a quick test selecting the project and incident created at the beginning of this article.
Start by searching for the projects entity.
Click on the method GET /projects and press the button Try Out.
Now you have the option to change some of the parameters before executing the API method. Since at this stage there is no need to adjust the call, just scroll down the container until you find the button Execute, press the button to trigger the API call.
If everything goes as planned you must see the HTTP 200 Code informing a successful API call and in the Response Body you should find the project created via Jira Cloud with the name of SAP Blogs Demo.
Note: If you check the Request URL there is no distinction from the Jira API or even the current Open Connectors account, the only thing available in the URL is the entity selected for this call (in our case projects). If all the connectors and accounts run through the same base URL how is it possible to identify the differences between each one of them?
URL: https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/projects
The answer is connected with the Authorization Header. Open Connectors has a specific hash for the authorization based on three different components:
- User
- Organization
- Element
The combination of these parameters defines the route to find the SAP Cloud Platform account, Open Connectors sub-accounts and the Connector / API.
Before we conclude this exercise let's repeat the test using the method GET /incidents.
Press the buttons Try Out and Execute. After the search is finished look the payload in the Response Body to find the details about our incident.
Configure a SAP Cloud Platform Destination
Before we conclude this first blog I would like to include an extra configuration step that will be necessary for the next parts.
To access Open Connectors from your cloud application (in our case Web IDE) you need to configure a new Destination in the main cockpit from SAP Cloud Platform. Without this configuration is not possible to access the API via the Web IDE extension.
Open the SAP Cloud Platform and access Connectivity -> Destination.
Configure the connection to Open Connectors API based on the following parameters:
- Name: openconnectors
- Type: HTTP
- Description: (optional)
- URL: https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/
- Proxy Type: Internet
- Authentication: NoAuthentication
- Additional Properties
- TrustAll => true
- WebIDEEnabled => true
Notice we didn't include an authentication method because the pattern used by Open Connectors is conceived specifically for this service, in this case, we need to adapt the authorization header via UI5 development.
You can find more information about this topic in the blog post I shared previously but we will discuss the details about this code adjustment in my next blog.
And this is the end... of part 1 at least. 😉
So, what's next?
In Part 2 we discuss how we can extend Web IDE with Features & Plugins including new events and also new components to the user interface. At the end of the next blog, you will learn how to perform a basic integration scenario between Web IDE and Open Connectors API.
In Part 3 we put more focus on the development process creating the final development with multiple views and a more complex UI integrating Jira with some of the CRUD operations available through the API.
If you want to follow the next parts don't forget to subscribe to my SAP account and receive notifications about the next releases.
felipedemello.rodrigues
Hope you enjoyed the content and see you next time. 🙂
- SAP Managed Tags:
7 Comments
