Exploring User-Friendly Table-Based UI in SAP Clou...
Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
As an SAP PO developer, you're no stranger to the importance of message monitoring. It's your go-to tool for understanding what's happening in your SAP landscape. If you've had experience with SAP Process Orchestration (PO), you will be familiar with the Message Status Overview, which serves as your gateway to message monitoring. This invaluable tool simplifies the process of searching for messages and identifying errors.
However, when you transition to SAP Cloud Integration (CPI), you might find yourself missing the simplicity and convenience of SAP PO's Message Monitoring Overview. SAP PO Message monitoring overview and its equivalent is not present currently on SAP Cloud Integration / CPI. The look and feel and the navigation process is quite different as it built on top of SAP UI5.
As of now, our community's experts have developed a couple of existing solutions to bridge the gap between SAP PO's Message Monitoring Overview and the SAP Cloud Integration Monitor Message Processing:
Cloud Integration Reporting Dashboard by SAP. Details can be found on the blog post by sunny.kapoor2.
Inspired by the above solutions and with the aim of narrowing the gap to provide a monitoring experience comparable to the familiar SAP PO Message Monitoring Overview, I have created a user-friendly solution called the Table-Based UI. This solution is crafted to provide you with all the necessary information to facilitate your daily tasks and simplify message monitoring, much like the experience in SAP PO. It is entirely designed using the fundamental building blocks and artifacts of SAP Cloud Integration, harnessing the inherent capabilities of the platform, and utilizing the power of the Groovy Markup Builder. This approach ensures that the solution aligns more closely with the platform's core development style and pushing the boundaries of what can be accomplished within this framework.
Additionally, I have broadened this approach to include Integration Artifacts and Content, making it your go-to tool for gaining comprehensive insights into all integration contents within your sub-account.
Allow me to introduce you to the Table-Based UI.
Features:
Provide detailed insights not only about SAP Cloud Integration's Monitor Message Processing but also about all Integration Artifacts/Contents in the tenant in a table-based format.
Enhanced Filtering and Search Capabilities.
Sorting and seamlessly exporting your monitoring data as CSV, Excel, PDF, or copying it to the clipboard.
Most importantly, with this, our functional colleagues can now have a look at what's going on in the SAP Cloud Integration landscape without granting access to the BTP cockpit or SAP Cloud Integration sub-account. [Create separate OAuth keys with the service plan 'integration-flow' for such use cases.]
Note:To preview the HTML page, you will need a REST API client such as Insomnia, Postman, etc.
This integration artifacts is published as an open source project.
What does this mean for you?
Firstly, it guarantees that you will always have access to the complete source code, which will be readily available on GitHub and included in every project release. Secondly, the open-source license, specifically the MIT License, provides you with the freedom to make modifications to the code. This is released under the MIT License, which is known for its permissiveness and simplicity among open-source licenses. This means that if you wish to make additions or alterations, you can do so without any restrictions.
You can download the complete integration package from GitHub at this link: Download. The full source code and all other necessary files are included in the download. Everything you need is also available in the GitHub repository table-based-ui-sap-cloud-integration. For documentation and installation instructions, please refer to the user documentation. If you encounter any issues, please do let me know by either commenting below or creating an issue on GitHub.
Solution Overview
Fig.1 – General architecture
Fig.2 – Table-based User Interface Overview
Solution Details
Integration artifacts Details:
This integration package contains 3 integration flows that generate an HTML page as a response in a table-based format.
This integration package utilize the standard public OData APIs of SAP Cloud Integration under the hood.
For more details, please refer to the table below.
Table 1
Serial number
Integration Flow Name
Descriptions
1.
Integration Artifacts UI
This integration flow will generate an HTML page as a response, providing detailed insights into all or specific Integration Artifacts in the sub-account in a table-based format. The endpoint for accessing this information is /http/integration-artifacts.
2.
Integration Assets UI
This integration flow will generate an HTML page as a response, providing detailed insights into all or specific Integration Assets (such as External Parameter & Resources) in the sub-account in a table-based format. The endpoint for accessing this information is /http/integration-assets.
3.
Message Monitoring UI
This integration flow will generate an HTML page as a response, providing detailed insights into all or specific Monitor Message Processing logs in the sub-account in a table-based format. The endpoint for accessing this information is /http/message-logs.
Some Key Points:
Since the output is an API response in HTML, you will need a REST API client like Insomnia by Kong, Postman, etc.
The solution has been tested specifically with the REST API clients Insomnia by Kong and Postman. Both have some limitations and corresponding workarounds, which will be discussed later.
While it is recommended to use either Insomnia by Kong or Postman as your REST API client, it is not mandatory. You can opt for a REST API client of your preference; however, ensure that it supports the preview/rendering of HTML pages. For instance, the Advanced Rest Client provides responses in HTML but lacks a preview option. In such cases, a workaround is to download and save the response as an *.html file, then drag and drop the HTML file into the browser of your choice.
The mentioned integration flow will generate an HTML page as a response. To preview the HTML page using Postman or Insomnia by Kong, please refer to the corresponding collection name in the table below.
Table 2
Integration Flow Name
Collection Name
HTTP Request Name
HTTP Method
Endpoint
Integration Artifacts UI
Integration Content UI
Get all Integration Artifacts
GET
/http/integration-artifacts
Integration Assets UI
Integration Content UI
Get all Integration Assets
GET
/http/integration-assets
Message Monitoring UI
Message Monitoring UI
Get all Message Processing Logs
GET
/http/message-logs
How to use?
Prerequisite
To use this integration artifacts, you will need the following:
Download the Integration Package Zip file from the GitHub Repo and import Integration Package into your tenant.
Create an OAuth client (Client Credentials grant type) on the tenant with service plan 'api'.
Navigate to your SAP BTP cockpit of the Cloud Foundry sub-account, go to 'Services', then 'Service Marketplace' and select 'Process Integration'
Create a new instance with service plan 'api' and with the following configuration:
Grant-types: 'client_credentials'
Roles:
AuthGroup_IntegrationDeveloper
AuthGroup_Administrator
AuthGroup_BusinessExpert
Create a Service Key and copy the entire JSON text to your clipboard to use in the step 3 for 'Create OAuth2 Client Credentials in SAP Cloud Integration'. This credentials will be used to call public ODATA APIs of the SAP Cloud Integration to fetch the required Integration Content or Message Processing Logs API.
For the Neo Environment, please refer to steps 1 and 2 in the Neo documentation. Assign the roles mentioned above to the user 'oauth_client_'. Copy the Token Endpoint (found in the branding tab), Client ID, and Client Secret to your clipboard for use in Step 3 when creating the OAuth2 Client Credentials. [Subscription: Select tmn node]
Create the User Credentials in SAP Cloud Integration.
Manage Security Material -> Add Create OAuth2 Client Credentials. Deploy the credentials.
Create an OAuth client (Client Credentials grant type) on the tenant with service plan 'integration-flow'.
Navigate to your SAP BTP cockpit of the Cloud Foundry sub-account, go to 'Services', then 'Service Marketplace' and select 'Process Integration'
Create a new instance with service plan 'integration-flow' and with the following configuration:
Grant-types: 'client_credentials'
Roles: ESBMessaging.send
Create a Service Key and copy the entire JSON text to your clipboard to use in the step 6 for 'Configure Environments'. This credentials will be used by the REST API Client to connect to the http endpoints of the iflows.
For the Neo Environment, please refer to steps 1 and 2 in the Neo documentation. Assign the roles mentioned above to the user 'oauth_client_'. Copy the Token Endpoint (found in the branding tab), Client ID, and Client Secret to your clipboard to use in the step 6 for 'Configure Environments'. [Subscription: Select iflmap node]
Based on REST API client of your preference - import as below
For Postman, download the Postman Collection Zip file from the GitHub Repo. Unzip and import the collections and environment into your Postman.
For Insomnia, download the Insomnia Collection Zip file from the GitHub Repo. Unzip and import the collections and environment into your Insomnia.
Configure Environments - Update the Environment variables with the credentials generated in Step 4.
Configuration
If the above prerequisites are fulfilled, you’ll be ready to configure the external parameters of the integration flow and the query parameter for the APIs.
Whenever the size of the response exceeds 1MB, the Visual Preview (i.e., response window where the HTML is displayed) is unable to render the HTML Page. However, you can still view the raw HTML as a response. During testing, I observed this issue when the number of rows in the table exceeds 2000. In such cases, a workaround is to download and save the response as an *.html file. Afterward, you can drag and drop the HTML file into the browser of your choice to view tables with huge data/rows. You can also decrease the row count by using multiple filter parameters available in the query parameters. [Note: This issue is not related with code as the same works in Postman.]
Using Postman:
Know the limitations:
Since JavaScript is not enabled by default in Postman, the three export buttons (csv, excel, pdf) will not function in Visualize (i.e., the response window where the HTML is displayed). In such cases, a workaround is to download and save the response as an *.html file. Then, you can drag and drop the HTML file into the browser of your choice and utilize the export buttons as needed. However, in Postman, there are no constraints related to the size of the response or the number of rows in the tables. During testing, it was able to render the HTML page for tables with rows count exceeding 5000.
Summary
This was a humble attempt to create something out-of-the-box integration, harnessing the inherent capabilities of the platform and utilizing the power of the Groovy Markup Builder to see how far I could push its capabilities. I would also like to invite you all to share your feedback or thoughts in the comments section. I am confident that there are still opportunities for improvement and ideas for new rules or features that can be added to make this tool even better and more robust.