Skip to Content
Technical Articles
Author's profile photo Dominic Beckbauer

[CPI] CPI-Helper Chrome Extension – Swiss Army Knife for Integrators

Hello Integrators,

it is a while since my last post. The CPI-Helper developed and I thought it is a good idea to sum up how the CPI-Helper can make your life easier in case you use Chrome or Edge as Browser. Special thanks goes to Deva Prasad Arava who helped me with this post.

Another special thanks to all the people out there who help to make CPI development more easy and add missing features like Fatih Pense with his GroovyIDE that saved me houres of work.

If you like the CPI-Helper, please follow this post for new features. You can also follow me on LinkedIn for updates

What is the CPI-Helper Plugin?

If you do not know the CPI-Helper, it is an open source Chrome Browser plug-in that extends the Cloud Platform Integration with some cool new features that helps you during development/testing of Integration Flows.

  • Sidebar with processed messages
  • Activate Inline Trace to see message route in integration flow designer
  • Directly see trace messages in integration flow designer
  • Pretty print for trace messages in integration flow designer
  • Button to switch on trace
  • Directly go to traces of specific message
  • Directly go to logs and attachments of specific message
  • Pop-up with error-message when hovering message in sidebar
  • Pop-up with deployment info
  • View and delete variables in info pop-up
  • Customize the CPI tenant page & icon

Installation

Install directly from Chrome Web Store. After installation, you see the icon in the browser bar. If it is not shown, you must pin this addon by clicking the Extensions

 

 

Icon.

The above pin Icon can be used to pin this CPI-Helper Extension to make it visible all the time and shows how it looks once it is done.

At first it is grey, but it activates when you are on a CPI page. The new buttons will be added automatically when you are on the integration flow designer.

How does it look like?

If you installed the plugin, you will have three more buttons in the integration flow designer:

Main features of CPI-Helper Plugin

Trace

This button helps you to activate & deactivate trace without navigating away from the Integration flow designer.

 

 

 

When this button is enabled, the trace option will be activated for that artifact and a message notification also will be displayed at the bottom of the screen. Trace highlighted in Red color indicates that the Trace option is enabled and active for the artifact.

To deactivate the trace, click on the Trace button and a message notification at the bottom of the screen will be displayed indicating that Trace will not be triggered anymore automatically.

Messages

This button provide information about Artifact State, Message Log fetch last update time, Deployed timestamp, recent message log details.

Message Status Symbol

By hovering the cursor over Success or Fail

symbol, It will provide overview of error information of the message in case of failures. Using this option, no need to navigate to monitoring page to find out error details is needed anymore.

Timestamp

This will display the time at which message has been executed.

Message Icon

This will navigate to Message Processing Log Attachments page where we can get Log and Attachment details.

Trace/Info Icon

‘T’ indicates that the artifact has been executed in Trace mode and ‘I’ indicates that the artifact has been executed in Info mode. By clicking on this icon, it will redirect us to the Message Processing Run page where we can find the Integration Flow Model, Log Content & Message Content details depending on the mode it has been executed.

Inline Debugging Mode

Only for Trace mode, the Inline Debugging can be activated by clicking the

icon. This will enable the Inline Debugging which will give option to check the Trace data for each step of the flow.

On activating the Inline Debugging mode, the Settings icon will be highlighted, and all the integration flow elements will be highlighted that are part of the message execution.

Selecting each highlighted step will throw a pop-up that contains details about Properties, Headers, Body & Log.

XML and Json Payloads can be beautified using “Try to Beautify” button.

Attention: Traces will be deleted by SAP after round about 1 hour. So, you can see the run steps but not the message itself on the next day.

Info: This button provides information about Artifact Name, Symbolic Name, Trace Status, Deployed On, Deployment Status, Semantic State, Deployed by and Global & Local Variable details.

The latest values assigned to these variables can be viewed, downloaded and can be deleted using the above 3 options next to Variable name.

So, if you installed the CPI-Helper in your Chrome Browser, you can easily access variables after pressing the Info button in the Integration Flows designer.

The Extension Popup

This can be opened when clicking the Cloud

Icon in the browser bar. It is colored and working when on CPI page. The popup looks like this:

 

Last Visited on Tenant: Last visited on tenant gives the list of last 10 artifacts viewed/accessed in the current tenant.

All these artifacts will be shown as hyperlinks which will redirect us to the corresponding artifact integration flow designer page.

Tenant Settings: Tenant settings gives options to customize CPI tenant page tab according to our need

Custom Name for Tab: By default, Cloud Integration will be the Tab name. But if you want to change it according to your need you can achieve this by using the below format.

for example, we can have name of client followed by name of the artifact/environment as CPI page tab name

ABCGroup $iflow.name

Tenant Color: By default, the color of the ribbon on the top of the CPI tenant page will be as shown below.

But to differentiate this ribbon according to your need, you can customize this color by choosing the appropriate color according to your requirement from “Select Tenant Color” option and this is how it looks when we changing the color:

CPI Tenant Page Icon: By default, we will be having SAP Icon as part of the tab name.

If we want to change it to CPI-Helper Icon, we can do this by selecting the drop down option under “Choose An Icon” option.

This is how the Custom Icon looks like:

It is a good practice to color prod tenants in red 🙂

Tenant URLs:

This option gives us hyperlinks to access

  • Processed Messages: will be redirected to Message Monitor Processing Page that shows messages with all status in past 1 hour.
  • Failed Messages: will be redirected to Message Monitor Processing Page that shows messages in Failed status in past 1 hour.
  • Artifacts: will be redirected to Manage Integration Content page.
  • Design: will be redirected to Design page of the PCI tenant which shows all the package details.
  • Monitoring: will be redirected to the Operations view page of CPI tenant.

General Links: This will provide you links to access to SAP Cloud Integration page, CPI-Helper latest blog and Online IDE to execute Groovy Scripts.

You can access the below links to go through the source code and contribute at our GitHub page links shared below.

It saves a lot of time for me and I hope you like it too. I recommend you install the Chrome Extension directly from Chrome Store to get the newest updates.

You can easily get the CPI-Helper from the Chrome Store. It is free and open source. You can also install from sources if you want. More details on the GitHub Page

If you want to know more about the CPI-Helper, visit my older posts

For more details, see my GitHub page and my first blog post about the CPI-Helper. The CPI-Helper is Open Source. If you want to contribute you are more than welcome.

License and Data Protection

The CPI-Helper is under GNU GPL 3 license. I do not collect any data. If you do not trust me you can always have a look in the source code and build your own chrome extension with it.

If you have any questions or if you traced down some bugs (I know there are some but I do not have the time to fix non letal bugs), leave me a comment here or add me on LinkedIn

 

Happy Integration to all

Dominic Beckbauer

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Maik Offerle
      Maik Offerle

      Really great tool 🙂 Thank you very much!

      Author's profile photo Fatih Pense
      Fatih Pense

      Thanks for the shout-out, Dominic!

      This documentation is the cherry on top of the useful extension, Thank you for your hard work & hard ideas and for making it available to everyone!

      Regards,
      Fatih

      Author's profile photo Saurabh Kabra
      Saurabh Kabra

      Simply wowwww... I have been using this for more than a year now and I must admit it had tremendously helped me(along with GroovyIDE from Fatih Pense ).

      Thank you guys!

      BR
      Saurabh

      Author's profile photo Faisal Jamal
      Faisal Jamal

      Hello Dominic Beckbauer

      Awesome work with this extension!

      It looks like it is not working for me today. I got this popup for update to version 1.6.0 and it doesn't show me the messages anymore. The messages are available in CPI trace monitor, but not in the ConVista side window. It was working fine until yesterday.

      I have tried clearing the cache and reinstalling the extension to Chrome browser. Any idea?

      Author's profile photo Dominic Beckbauer
      Dominic Beckbauer
      Blog Post Author

      Hi Faisal Jamal

      that is strange. it works on my tenant. Are you on NEO or Cloud Foundry?

      Could you press F12 in Chrome for developer tools and post a screenshot if there is sth in the Console tab that could help us?

      Anyone else with this problem?

      Author's profile photo Faisal Jamal
      Faisal Jamal

      Hello Dominic,

      Thank you for your response. Here is the screenshot:

      Author's profile photo Faisal Jamal
      Faisal Jamal

      Just noticed that this problem is not common for all iFlows. For some iFlows, it displays the message list and for others it does not.

       

      Author's profile photo Dominic Beckbauer
      Dominic Beckbauer
      Blog Post Author

      Faisal Jamal this would be super interesting if you could find a pattern here. Was the flow renamed or does it have special characters?

      Author's profile photo Faisal Jamal
      Faisal Jamal

      Dominic Beckbauer I can tell that the iFlows have not been renamed. Also, I could not see any pattern in the names here. Some iFlows are named with underscores and some without it. It is working for only some of them. Also, the extension seems to be working fine in the Prod tenant, but not in pre-prod tenants.

      Others in my team are facing the same issue. Any other clues?

      Author's profile photo Dominic Beckbauer
      Dominic Beckbauer
      Blog Post Author

      That is super interesting. Till now I have only heared from you about this topic.

      But maybe we can find a clue. Could you go again in the developer tools, on network tab and see if there are any errors when the message bar is open? I assume there is sth coming from the server that my extension does not expect. Your Screenshot sais it is in line of code 91 and this is where the incoming message from the server is parsed.

       

      Maybe open networ tab and than open and close and open message again and let's see what happens. You can also write me a message on Linkedin if you do not want to post your screenshots here.

       

      BR

      Dominic Beckbauer