Semi-manual application integration

Application integration typically happens in the backend — on the server side- , through fully automated means using APIs, web services, adapters/connectors, integration technology (service bus, event broker, ..) and custom software.

Automated, server side data exchange from source to target application

For large volumes, low latency requirements and well defined format translations this is the logical approach. It is not easy nor cheap to implement — but it is robust, fast and capable of handling large volumes of data.

For data exchanges that are not so well defined or where the source application has most but not all of the data required for the transaction in the target application and where speed is not crucial, there is another way. We can set up client side data transfer, initiated and guided by the user.

Simply put: the user works on a record in application A. The data in this record is then required for creating or updating a record in application B. The user has access to both applications in the context of a web browser. In the source application’s user interface, the data is gathered. Subsequently in the target application’s user interface, the data is used to populate or update a record. The user can complement the data from the source application and refine it where for example the formats differ. When the record is complete in application B, the user can save it to complete the transaction.

The user initiates client side data transfer in the source application. Data is transferred to the target application’s user interface , corrected and enriched by the user before being saved to the application’s backend

You may wonder how exactly the data is gathered in the user interface in one application and then injected into the user interface of another application. The answer: a tailor made browser extension.

A browser extension reads data in application A, stores it and then applies it in application B. The requirement is that both applications have user interfaces that run in the browser

The browser extension collects data in context of Application A — when the user requests this by pressing a button in the side panel. The gathered data is presented in the side panel. In the context of Application B, the user can request auto-population of fields from the data in the side panel. Additionally, the user can copy/paste the value of an individual data element to the current focus field (in application B) — by clicking on that data element in the side panel.

Some use cases where this simple integration approach could offer value:

• LinkedIn Profile candidate details are copied to candidate record in ATS (Application Tracking System)
• Data for Candidate in ATS (Applicant Tracking System) is to be transferred to HR system
• Data for Product (in marketplace website) is to be transferred to Order or Expenses system
• Data for Customer Deal in CRM system is to be transferred to Project | Contract Management application

Example of client side user guided data transfer: product details in Amazon.com are used to populate the expense report form

The implementation of the required browser extensions is done in JavaScript and HTML. It does not require any server side access to the applications involved. The actions are fully controlled by the user. And most users will truly appreciate the use of the browser extension, because it will support them to handle a job they currently have to do through keying in data from one system into another in a nicer, faster and less error-prone way.

I have written an earlier article with some steps to create a browser extension for Chrome, Brave and Edge browsers: https://medium.com/javascript-in-plain-english/chrome-extension-demonstrating-key-mechanisms-with-context-menu-dom-inspection-and-side-panel-6635af25f027

I have also created a workshop for my colleagues at Conclusion as introduction into the development of Chrome browser extensions, with step by step code examples: https://github.com/lucasjellema/my-chrome-extension-exploration