Sign Up ›
  • kavithatrailheads reddy
  • NEWBIE
  • 50 Points
  • Member since 2016
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 1
    Replies
0 replies

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.
 
SOLVED
38 replies

Create a Simple Camping List Lightning Component

Hi,
the challenge is as follows :

Create a camping component that contains a campingHeader and a campingList component.
1.The campingList component contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
2.The campingHeader component contains an H1 heading style with a font size of 18 points and displays 'Camping List'.

so i made a lightening application named "camping.app" having code :

<aura:application >
    <br/><br/><br/>
    <c:campingHeader/>
    <c:campingList/>  
</aura:application>


where lightening component "campingHeader.cmp" having code :

<aura:component >
    <h1> Camping List </h1>
</aura:component>

for I have "campingHeader.css" having code :
.THIS {
}

h1.THIS {
    font-size: 18px;
}

and lightening component "campingList.cmp" having code :

<aura:component >
    <ol>
       <li>Bug Spray</li>
       <li>Bear Repellant</li>
       <li>Goat Food</li>      
    </ol>
</aura:component>

when i preview the application it is working nice; but when checking the challenge it says :
"Challenge Not yet complete... here's what's wrong: 
The 'camping' Lightning Component does not include either the campingHeader or campingList component."

please help me know where I m doing wrong. Thanx waiting for your reply