This is an example of pushing IBM Connections Cloud "Community Apps" into a standard HTML page.
This standard HTML page will still require access to the IBM Connections Cloud instance in order to properly inject the context into the community app.
Scroll down to the hotpink-bordered iframes at the bottom of the page to see the resulting working example.
Each app requires a context so that it can understand what to show. The context uses a postMessage with information about the context -- displayed in the iframes below.
The context is populated with information from both XCC and IBM Connections using the Javascript inline in this page (see the page source):
var message = {
source: {
resourceId: 'zzzzz', // e.g. The community UUID or XCC ID for the page or community equivalent
resourceName: 'XCC Community Equivalent\'s Name', // e.g. the name of the WorkSpace On page or community equivalent
resourceType: 'xcc-community-equivalent', // A unique resourceType for XCC
orgId: 'o12345', // The orgId/customerId from IBM Connections
widgetInstanceId: '__widgetInstanceId__' // Populated from the data-widget-instance-id attribute on the iframe - make this unique
},
user: { // From IBM Connections
userId: 'u1234', //
orgId: 'o12345', // Could be different from the source.orgId if the user is a visitor/guest
displayName: 'David Simpson', //
email: 'david@appfusions.com' //
},
extraContent: {
canContribute: 'true', // From IBM Connections
canPersonalize: 'true' // 'true' || 'false' - Means that the user is a community owner or equivalent, so can configure the app
}
};In this test harness each app required a unique data-widget-instance-id attribute on the iframe:
<iframe class="spoke"
data-widget-id="xxx1"
data-widget-instance-id="xxx1_yyy"
src="https://rawgit.com/dvdsmpsn/ibm-connect-2016-examples/master/community-app/skeleton.html"
scrolling="no"></iframe>The iframes need to resize when the content gets larger or smaller. This happens when a postMessage is sent from the iframe content to the host page.
The iframes need the ability to open dialog modals in the host page. This happens when a postMessage is sent from the iframe content to the host page.