SCB TCIB FIConnect Integration

Vijay Bhaskar

Version 1.0, 2017-05-10

TCIB Wealth and FI Connect integration

1. Introduction
This document describes the modifications made to WealthTAP channels application in order to
enable access to SCB’s FIConnect application via iframe.

This document is intended to be used as a reference by developers to further customize and

enhance the application based on SCB’s needs.

2. High level requirement summary

Identify methods to add access to RFQ page to TCIB via iFrame Identify possibility of sending data
back to TCIB from RFQ

2.1. Additional requirements

• RFQ/FIConnect application to be consumed as Iframe within TCIB

• The RFQ/FIConnect iframe is to be invoked from TCIB order entry page

• The values chosen in FIConnect needs to sent back to TCIB and corresponding form elements
needs to be updated.

NOTE: It is assumed that TCIB and FIConnect will interact with each over over iframe. The data that
needs to be sent to the and received from the FIConnect is left to the system stakeholders and
developers during future development.

3. Technical Overview
As we build an ecosystem where web applications can interact with one another we need a way of
securely sending messages between windows. The postMessage() method provides just that.

For a long time sending messages between windows was only possible if the windows used the
same protocol, port, and host. The postMessage() method lifts this restriction by providing a way to
securely pass messages across domains.

3.1. Sending Message with postMessage

The postMessage() method accepts two parameters.

• message – A string or object that will be sent to the receiving window.

• targetOrigin – The URL of the window that the message is being sent to. The protocol, port and
hostname of the target window must match this parameter for the message to be sent.
Specifying "*" will match any URL however this is strongly discouraged for security reasons.

This method should be called on the window that the message is being sent to. A reference to the

1
target window can be obtained in a number of different ways:

• When using window.open() a reference to the new window will be returned by the open()
method.

• For iframes you can access the contentWindow property on the desired iframe.

targetWindow.postMessage('Hello World!', 'http://example.com');

3.2. Event Listeners to Receive Messages

When a call to postMessage() is executed successfully a MessageEvent will be fired on the
receiving window. You can use a standard event listener to watch for this event and execute some
code when it occurs.

The event passed into the listener callback has a property called data that can be used to access the
string or object that was sent by postMessage().

window.addEventListener('message', function(e) {
  var message = e.data;
});

For more details and documentation refer to https://developer.mozilla.org/en-US/docs/Web/API/

Window/postMessage

4. Code Changes
4.1. TAPPlaceOrder_FIConnect.IFP
Based on the suggestion provided by SCB, the iframe integration has been done on the copy of the
Order Creation component to prevent any conflict with the customizations that are being tested.
The main change in this project file includes adding the iframe_involer.tpl to the presentation as a
text element.

The image below gives a visual representation of where the file is added in the edgeConenct
projects.

2
This file can be found in <project_location>/Components/TAP/UI/TapPlaceOrders_FIConnect

4.2. Iframe placeholder - iframe_invoker.tpl

This file contains the logic to send and receive data to the third party FIConnect application. For any
future enhacements the logic in this file will need to be updated.

4.2.1. Parameterisation

There are three parameters that are embedded as a part of DSF for storing URL/Domain details of
TCIB and FIConnect. The parameters include:

THIRDPARTY_IFRAME_DOMAIN - Stores the domain details of the FIConnect or third party

application to be consumed via iframe.
TCIB_DOMAIN - Stores the location where TCIB is hosted.
THIRDPARTY_IFRAME_URL - Direct link to the FI Connect url that needs to be opened up in an
iframe in tcib

<GlobalParameter GlobalParameterValue="http://ficonnect:8080"
Name="THIRDPARTY_IFRAME_DOMAIN" />
<GlobalParameter GlobalParameterValue="http://tcib:8181" Name="TCIB_DOMAIN"/>
<GlobalParameter
GlobalParameterValue="http://ficonnect:8080/html/thirdparty_iframe.html"
Name="THIRDPARTY_IFRAME_URL"/>

4.2.2. Sending data

This POC has an additional capability to send data to thirdparty application as a json object. This
feature can be used for sending any specific form element value or authentication parameters for
the third party application to verify and validate.

3
 if(portfolio_code != "" && client_name != "" ){
  data_tx = {
  call : "sendData",
  message : "Data from TCIB sent at: " + Date.now() ,
  functional_data : {
  "portfolio_code": portfolio_code,
  "client_code": client_code,
  "client_name": client_name
  }
  }
  return true;
}else {
  console.log("No Data to send");
  //@TODO: Code to show error message to user
  var modalObj = $("#modal_iframe_container");
  modalObj.find(".modal-body").text("No data to send");
  modalObj.modal('show');
  return false;
}

4.2.3. Receiving data

To receive and process data from the iframe, a callback function iframeListener is registered with
window object. This function reads the contents of object event.data to set the form elements
(Target Nature dropdown, Quantity or Amount field).

As the visibility of Quantity and Amount fields are dependent on the value of the Target Nature
dropdown, a setTimeout function has been written to wait for edgeConnect to complete
processing, post which the fields are updated.

This function can be modularized by using unique identifiers for the fields (Target
 Nature, Quantity, Amount) instead of html ids.

The set timeout limit will need to be tuned based on the response time on the
 servers. Alternatively, a Mutation observer can be built to observe the change in
Target Nature field before setting value to Quantity and Amount field

if (window.addEventListener) {
  addEventListener("message", iframeListener, false);
} else {
  attachEvent("onmessage", iframeListener);
}

This file can be found in <@TODO confirm>

4
5. Validation testing in SCB environment
The test in SCB environment was performed by creating a simple web application that emulates
FIConnect. This application like TCIB has functions to receive and send data to the host (TCIB). For
the POC, the emulator simply sends the parameters to host (TCIB) namely, TARGET_NATURE,
AMOUNT, QUANTITY. Based on the values of these parameters the corresponding form elements
on TCIB Order page is updated.

As a part of future extension, the developers can update the fields/parameters that
 are being sent by FIConnect and updated on TCIB.

6. Document History
Version Date Author /Changed Status Change
By Description
1.0 12/05/2017 Vijay Initial