Canvas App in Service console

Question

I have a VF page which is part of a Force.com Site. I refer this page using Canvas app. Now I'm trying establish a publish/subscribe model between the VF page in Salesforce and the Canvas app which show the Site page. The problem I'm having is a Javascript error. I don't know what script files I need to add to the VF page to initiate this communication. Attached my code along with this post. I get Uncaught TypeError: Cannot call method 'publish' of undefined. I'm showing the Canvas app(Site page) in a service console and the side panel as a another VF page. I'm trying to establish a connection between the VF Page shown by Canvas app and the right side panel Custom VF page?

Site VF page (Shown by the canvas app)

<apex:page standardController="Lead" extensions="SideBarController"  showHeader="false" standardStylesheets="false" >

<script type="text/javascript" src="{!URLFOR($Resource.CanvasJavascript,'/CanvasScripts/js/canvas-all.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.CanvasJavascript,'/CanvasScripts/js/canvas.js')}"></script>

<script type="text/javascript" src="{!$Resource.Json2}"></script>

<script type="text/javascript"> 

 Sfdc.canvas(function() {
var sr = {!sJson};
var key = "{!encodedSig}";
});
</script>

 <script>
 (function(global) {
 var module = function() {
 function subscribe(event) {
  Sfdc.canvas.parent.subscribe(event)
 }
  function unsubscribe(event) {
  Sfdc.canvas.parent.unsubscribe(event)
 }
 function publish(event) {
  Sfdc.canvas.parent.publish(event)
}
function resize(size, target) {
  Sfdc.canvas.parent.resize(size, target)
}
return{subscribe:subscribe, unsubscribe:unsubscribe, publish:publish, resize:resize}
}();
global.Sfdc = global.Sfdc || {};
global.Sfdc.canvas = global.Sfdc.canvas || {};
global.Sfdc.canvas.controller = module
})(this);

 </script>

<script>

var sr = "{!sJson}";

Sfdc.canvas(function() {
console.log("in the call ");
Sfdc.canvas.controller.subscribe(sr.client,
{name : 'demo.testAction1', onData : function (data) {
  console.log("event received... ");
  console.log("published message received " + JSON.stringify(data));}}
);

  </script>

 <apex:form >

 First name: <apex:inputText value="{!firstName}" id="firstNameID" /><br/>
 Last name: <apex:inputText value="{!lastName}" id="lastNameID" />

 </apex:form>

 </apex:page>

Right Frame VF page:

<apex:page sidebar="false" standardController="Lead" extensions="SideBarController" tabStyle="Lead">

 <script type="text/javascript" src="{!URLFOR($Resource.CanvasJavascript,'/CanvasScripts/js/canvas-all.js')}"></script>
 <script type="text/javascript" src="{!URLFOR($Resource.CanvasJavascript,'/CanvasScripts/js/canvas.js')}"></script>
 <script type="text/javascript" src="{!$Resource.Json2}"></script>






<script>

    function testpayload (msg) { 

     Sfdc.canvas.controller.publish({
         name: 'pnc.testAction', 
         payload : {message:msg},
         target : {canvas : 'app1'}
         }); 

     };

 </script>

 <script>

var sr = "{!sJson}";

Sfdc.canvas(function() {
console.log("in the call sidebar ");
Sfdc.canvas.controller.subscribe(sr.client,
{name : 'demo.testAction1', onData : function (data) {
  console.log("event received sidebar... ");
  console.log("published message received sidebar" + JSON.stringify(data));}}
);

  </script>





<apex:form >

    <apex:pageBlock title="Question" helpTitle="Custom Help Title" helpUrl="http://test/" mode="edit">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!saveQuestion}" value="Save"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Group-1 Questions">
          <apex:repeat value="{!$ObjectType.Question_test__c.FieldSets.Group1}" var="field">
                <apex:inputField value="{!quest[field]}" />
                <br/>
          </apex:repeat>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="Group-2 Questions">
          <apex:repeat value="{!$ObjectType.Question_test__c.FieldSets.Group2}" var="field">
                <apex:inputField value="{!quest[field]}" />
                <br/>
          </apex:repeat>
        </apex:pageBlockSection>
    </apex:pageBlock>

    <apex:commandLink onclick="testpayload('Open')" value="Open" reRender="TestPanel"/><br/>
    <apex:commandLink onclick="testpayload('Closed')" value="Closed" reRender="TestPanel"/>
    <apex:outputPanel id="TestPanel">
    </apex:outputPanel> 

</apex:form>
    </apex:page>

Can anyone help me how to get the communication going between the Canvas app's VF page and the VF page on the right frame?

Answer 1

There are a couple of things in your code that look strange:

1. The controller.js is used to pass events from A VF Page to any canvas app inside of that VF page

2. Your site VF page subscribes to the demo.testAction1 event

3. Your Right Frame VF page is trying to publish an event called pnc.testAction, without using the controller.js

4. Your Right frame also subscribes to demo.testAction1 event

So:

1. There is no code to publish the demo.testAction1 event
2. You have to reverence the controller.js to publish an event in the way you have laid out (you need to add <script type="text/javascript"src="https://na1.salesforce.com/canvas/sdk/js/30.0/controller.js"> to your right VF page)
3. The code will still push an event from the VF page to teh canvas app, but only to canvas apps on the same page

Hope this helps