+ Start a Discussion
kkrishnanpublic1.3974373133605942E12kkrishnanpublic1.3974373133605942E12 

Canvas App in Service console

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)

Sfdc.canvas(function() { var sr = {!sJson}; var key = "{!encodedSig}"; });
<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>
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));}} );
First name:
Last name:

Right Frame VF page:

<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'}
         });

     };
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));}}
);
<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>
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?
VikashVikash (Salesforce Developers) 
Hi Krishnan,

Please follow the below links to help you understand Canvas app use in a Visualforce Page:
1.http://www.salesforce.com/us/developer/docs/platform_connect/Content/canvas_framework_using_vf_intro.htm
2.http://www.salesforce.com/us/developer/docs/platform_connect/Content/canvas_app_vf_code_example.htm
3.hhttp://www.are4.us/best-practices/salesforce-canvas/

These links will help you with the usage of parameters in a canvas app.

" I hope this information has been helpful. If this has helped resolve your issue, please let us know by marking the post as "Best Answer" to help others in the community with similar questions. "

Thanks
Vikash_SFDC
jhurstjhurst
As a note here, the Sfdc.canvas.parent.* methods are not supported for client use. Instead we expose the methods using Sfdc.canvas.controller.*

So for the code above to be supported by salesforce, you would need to:
  1. Add the controller.js file as a script tag in the VF page:
    1. <script type="text/javascript" src="/canvas/sdk/js/30.0/controller.js"/>
  2. Change the method calls to use Sfdc.canvas.controller.subscribe, Sfdc.canvas.controller.publish, Sfdc.canvas.controller.unsubscribe, and Sfdc.canvas.controller.resize where appropriate
Jagjit Singh 4Jagjit Singh 4
Hi @kkrishnanpublic1.3974373133605942E12

You need to include "publisher.js" file to execute your code, accessing the sfdc canvas.
One can access the file using:- https://YOUR SALESFORCE DOMAIN/canvas/sdk/js/publisher.js

Also, its better practice to download the file and include it n your static resource.