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
?