You need to sign in to do that
Don't have an account?

How do you capture Tableau reports events in Salesforce using Salesforce connected app?
we have a Requirement on Tableau To salesforce Integration. Our requirement is load the reports data in Visualforce page and on click of particular report we have to read some data from report and based on that data we have perform some operation in salesforce . For this we have followed 2 ways .
1.Tableau Viz: By using Tableau Viz we are able to achieve above requirement. This is not required now.
2.Slaeforce Canvas App: By using salesforce Canvas app loading the reports is possible but not able to catch the data on click of particular report . This required is needed now.
Below is the Reference Code:
Visual force page with Tableau Viz code:
<apex:page controller="CanvasController">
<html>
<head>
<title>Respond to Events</title>
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js (https://public.tableau.com/javascripts/api/tableau-2.min.js" style="color:#0563c1; text-decoration:underline)"></script>
<script type="text/javascript">
var viz;
window.onload = function () {
alert('function');
var containerDiv = document.getElementById("vizContainer"),
url = "https://Myservername/views/Opportunities/Dashboard1 (https://Myservername/views/Opportunities/Dashboard1" style="color:#0563c1; text-decoration:underline)",
options = {
"Academic Year": "",
hideTabs: true,
onFirstInteractive: function () {
listenToMarksSelection();
}
};
viz = new tableau.Viz(containerDiv, url, options);
}
function listenToMarksSelection() {
viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, onMarksSelection);
}
function onMarksSelection(marksEvent) {
return marksEvent.getMarksAsync().then(reportSelectedMarks);
}
function reportSelectedMarks(marks) {
var html = "";
var oppName = "";
for (var markIndex = 0; markIndex < marks.length; markIndex++) {
var pairs = marks[markIndex].getPairs();
html += "<b>Mark " + markIndex + ":</b><ul>";
for (var pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
var pair = pairs[pairIndex];
alert(pair.fieldName);
html += "<li><b>Field Name:</b> " + pair.fieldName;
html += "<br/><b>Value:</b> " + pair.formattedValue + "</li>";
}
html += "</ul>";
document.getElementById('oppvalue').innerHTML = oppName;
}
var infoDiv = document.getElementById('markDetails');
infoDiv.innerHTML = html;
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer"></div>
<br/>
<div id="markDetails">Information about selected marks displays here.</div>
<br/>
Selected Account is :
<div id="oppvalue">
</div>
</body>
</html>
</apex:page>
Visual force page with canvas App code:
For this created connected app and completed tableau server authentication .
While working with below code it is displaying reports and not displaying data from selected reports .we want to achieve this.
<apex:canvasApp applicationName="Sparkler_Connector" height="536px" width="654px" parameters=" {
'ts.name':'OpportunityDashboardDreamforce/OpportunityDashboard',
'ts.width':'1000',
'ts.height':'400',
'ts.javascriptLib':'https://mytableauserverdomain/javascripts/api/viz_v1.js', 'ts.hostUrl':'https://mytableauserverdomain/',
'ts.siteRoot':'/t/myOrganizationSite',
'ts.tabs':'no',
'ts.toolbar':'yes',
'ts.trustedTicket.host':'mytableauserverdomain', 'ts.filter':'Opportunity_Parameter={!Opportunity.Id}' }" />
Any help is much appreciated.
Thanks.
1.Tableau Viz: By using Tableau Viz we are able to achieve above requirement. This is not required now.
2.Slaeforce Canvas App: By using salesforce Canvas app loading the reports is possible but not able to catch the data on click of particular report . This required is needed now.
Below is the Reference Code:
Visual force page with Tableau Viz code:
<apex:page controller="CanvasController">
<html>
<head>
<title>Respond to Events</title>
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js (https://public.tableau.com/javascripts/api/tableau-2.min.js" style="color:#0563c1; text-decoration:underline)"></script>
<script type="text/javascript">
var viz;
window.onload = function () {
alert('function');
var containerDiv = document.getElementById("vizContainer"),
url = "https://Myservername/views/Opportunities/Dashboard1 (https://Myservername/views/Opportunities/Dashboard1" style="color:#0563c1; text-decoration:underline)",
options = {
"Academic Year": "",
hideTabs: true,
onFirstInteractive: function () {
listenToMarksSelection();
}
};
viz = new tableau.Viz(containerDiv, url, options);
}
function listenToMarksSelection() {
viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, onMarksSelection);
}
function onMarksSelection(marksEvent) {
return marksEvent.getMarksAsync().then(reportSelectedMarks);
}
function reportSelectedMarks(marks) {
var html = "";
var oppName = "";
for (var markIndex = 0; markIndex < marks.length; markIndex++) {
var pairs = marks[markIndex].getPairs();
html += "<b>Mark " + markIndex + ":</b><ul>";
for (var pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
var pair = pairs[pairIndex];
alert(pair.fieldName);
html += "<li><b>Field Name:</b> " + pair.fieldName;
html += "<br/><b>Value:</b> " + pair.formattedValue + "</li>";
}
html += "</ul>";
document.getElementById('oppvalue').innerHTML = oppName;
}
var infoDiv = document.getElementById('markDetails');
infoDiv.innerHTML = html;
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer"></div>
<br/>
<div id="markDetails">Information about selected marks displays here.</div>
<br/>
Selected Account is :
<div id="oppvalue">
</div>
</body>
</html>
</apex:page>
Visual force page with canvas App code:
For this created connected app and completed tableau server authentication .
While working with below code it is displaying reports and not displaying data from selected reports .we want to achieve this.
<apex:canvasApp applicationName="Sparkler_Connector" height="536px" width="654px" parameters=" {
'ts.name':'OpportunityDashboardDreamforce/OpportunityDashboard',
'ts.width':'1000',
'ts.height':'400',
'ts.javascriptLib':'https://mytableauserverdomain/javascripts/api/viz_v1.js', 'ts.hostUrl':'https://mytableauserverdomain/',
'ts.siteRoot':'/t/myOrganizationSite',
'ts.tabs':'no',
'ts.toolbar':'yes',
'ts.trustedTicket.host':'mytableauserverdomain', 'ts.filter':'Opportunity_Parameter={!Opportunity.Id}' }" />
Any help is much appreciated.
Thanks.