+ Start a Discussion
kavithatrailheads reddykavithatrailheads reddy 

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">
    <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 () {
            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 () {
            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];
                  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;       
<body onload="initViz();">
    <div id="vizContainer"></div>
    <div id="markDetails">Information about selected marks displays here.</div>   
   Selected Account is : 
    <div id="oppvalue">

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.javascriptLib':'https://mytableauserverdomain/javascripts/api/viz_v1.js',         'ts.hostUrl':'https://mytableauserverdomain/',        
     'ts.trustedTicket.host':'mytableauserverdomain',         'ts.filter':'Opportunity_Parameter={!Opportunity.Id}'     }" />

Any help is much appreciated.