Embedding codap in an iframe

[brollb]

Is there an established way to embed codap in another app and interact with it programmatically?

[jsandoe]

Yes. Actually, a few ways. The easiest is to place CODAP in an IFrame. The main page can communicate with CODAP using the CODAP Plugin API. The Plugin API is documented here: https://github.com/concord-consortium/codap/wiki/CODAP-Data-Interactive-Plugin-API. Using this API one can perform all the operations that one would from a plugin embedded in CODAP: create datasets, add cases, create and position components, and so on. The API is Post Message-based and the usual security restrictions apply.

Some notes on setting up this type of connection:

• The use of the npm library, IFramePhone, is required. The above mentioned documentation describes how to connect to it, although, since your app would be the parent page, you would connect to the particular IFrame, not window.parent, as is described.
• To enable the parent listener, you should add the query parameter, "embeddedServer=true" to the CODAP URL.
• Other query parameters can suppress some UI elements, which may be useful in embedded mode. See: https://github.com/concord-consortium/codap/wiki/URL-Parameters-and-Modes .

[brollb]

Thanks, @jsandoe.

I have been having some trouble establishing the communication channel with CODAP. I have been loading CODAP in an iframe and then creating the connection as shown below:

var codapPhone = new iframePhone.IframePhoneRpcEndpoint(
    function(command, callback) {
        onCODAPMessage(command, callback);
    },
    'data-interactive',
    frame
);

where onCODAPMessage is simply printing the command then calling the callback and frame is the iframe. This code is running in the onload handler for the CODAP iframe.

I was expecting to see a {message: 'codap-present'} message but haven't seen anything yet. I have also tried creating a data context (after waiting a bit) but have been receiving timeouts (Error: IframePhone timed out waiting for reply).

Do you have any ideas about what I might be missing?

[yutingliuzz]

Hi @jsandoe,

I am actually having the same problem as @brollb mentioned above. Do you have any ideas why this happened?