AppSpokes Test Harness

Run this code on a real web server, not just from your local file system.

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 message

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: ''                      // 
    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

The iframe

In this test harness each app required a unique data-widget-instance-id attribute on the iframe:

<iframe class="spoke" 


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.

The Result

Skeleton App Instance 1

Skeleton App Instance 2

Source for the Community app