Integrating the iframe
To add an Important To Me (ITM) bar to your Connections component in an iframe, follow these steps.
About this task
To complete this task, you need to edit the HTML source for your component page.
Procedure
-
Add itmBootstrap.js to your page with a
<script/>
element.For example:<script src="/social/itm/itmBootstrap.js"></script>
- Add the DOM element in which the ITM bar will render.
For example:
<div id="itm_root"></div>
- Add a
script
element to your page, and create an ITM configuration object variable, for use by the function that creates the ITM bar.For example:var itmConfig = { rtl: false, appRegistry: true, locale: en };
For complete information about the configuration object, see "Important To Me bar reference".
- Create an onLoaded callback function, for use by the function that creates the ITM
bar.For example:
function onLoaded(itmRef) { itmBar = itmRef; itmBar.callMethod('addStaticHeadEntries', [genGloablEntry()]); itmBar.addEventListener('onEntrySelected', onEntrySelected); itmBar.addEventListener('onAction', onActionSelected); }
The onLoaded callback function is invoked once the ITM bar is initialized. An ITM bar reference is passed in as the callback function parameter. Keep the reference in the Host app, since it is used to manipulate the ITM bar.
In addition to receiving the ITM bar reference, the onLoaded callback function can perform more initialization tasks, such as adding a global entry or adding a listener for ITM events.
- Create the ITM bar by calling lconn.itm.client.itmFactory.create(), defined in
itmBootstrap.
lconn.itm.client.itmFactory.create(config, onLoaded, node); //config is the itm configuration object mentioned above. //onLoaded is the callback function mentioned above. //node is either the DOM node to contain the ITM bar or the id of the container.
Example
To run it, follow these steps.
- Download the ITM web client project from https://github.ibm.com/connections/it-web-client.
- Run
npm install
. - Run
npm run build:applite
. - Run
npm run start:test
. - Open a browser and visit
http://localhost:3001/parent
.
What to do next
itmRef
to perform tasks
like getting a list of entries or setting the status of an entry.