topic Re: dataSelected on table in Developer

dataSelected on table

mahoon — Tue, 10 Jan 2017 15:52:41 GMT

I have a powerbi embedded report that works fine -it renders as a table with a few columns . I would like to be able to click a row in the table and see the data related to that row. I have tried to utilise dataSelected:

(

    <script> 
        $(function() {
            var reportConfig = {
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: false,
                    dataSelectedEnabled: true
                }
            };
            var reportElement = document.getElementById('pbi-report');
            var pageName = document.getElementById('page-name');

            // Embed report
            var report = powerbi.embed(reportElement, reportConfig);
            var pages = [];
            var pageIndex = 0;
            var currentPage = null;
            report.on('loaded',
                function() { 
                    report.getPages()
                        .then(function (reportPages) {
                            pages = reportPages;
                        });
                });

            report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(data);
            });
            report.on('pageChanged',
                function(e) {
                    currentPage = e.detail.newPage;
                    //pageName.innerText = e.detail.newPage.displayName;
                    if (pages.length === 0) {
                        return;
                    }
                    pageIndex = pages.findIndex(function(el) {
                        return el.name === e.detail.newPage.name;
                    });
                });
            function changePage(direction) {
                var nextPageIndex = pageIndex + direction;
                if (nextPageIndex < 0) nextPageIndex = pages.length - 1;
                if (nextPageIndex >= pages.length) nextPageIndex = 0;

                pages[nextPageIndex].setActive();
            }
            function addFilter() {
                var target = $('#filter-target').val();
                var table = $('#filter-table').val();
                var column = $('#filter-column').val();
                var value = $('#filter-value').val();

                var basicFilter = {
                    $schema: "http://powerbi.com/product/schema#basic",
                    target: {
                        table: table,
                        column: column
                    },
                    operator: 'In',
                    values: [value]
                };

                var filterTarget = target === 'page' ? currentPage : report;
               
                filterTarget.getFilters().then(function(allTargetFilters) {
                    allTargetFilters.push(basicFilter);
                    filterTarget.setFilters(allTargetFilters);
                });
                $('#filter-form')[0].reset();
            }

            function clearFilters() {
                report.removeFilters();
                pages.forEach(function(page) {
                    page.removeFilters();
                });
            }
            function updateSetting(e, settingName) {
                var settings = {};
                settings[settingName] = e.target.checked;
                report.updateSettings(settings);
            }
        });
    </script>

and followed https://microsoft.github.io/PowerBI-JavaScript/demo/dataselection.html to the best of my ability. But I'm getting nothing firing when I click on a row. what am I missing? Any help appreciated.

Re: dataSelected on table

Eric_Zhang — Wed, 11 Jan 2017 09:32:15 GMT

@mahoon

What visual do you click on? Based on my test, the Table and Matrix visual seem not having the dataSelected event. On other visuals, the dataSelected event can be fired.

            report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(JSON.stringify(data));				 
            });

the data JSON string
{  
   "report":{  
      "id":"719c43ad-xxx-4xxx9-8xx4-f79exxxxc1a6",
      "displayName":"Pyrxxxxple"
   },
   "page":{  
      "name":"ReportSection",
      "displayName":"Sample Dashboard"
   },
   "visual":{  
      "name":null,
      "title":"Count of Opportunity by Region",
      "type":"pieChart"
   },
   "dataPoints":[  
      {  
         "identity":[  
            {  
               "target":{  
                  "table":"Account",
                  "column":"Region"
               },
               "equals":"Central"
            }
         ],
         "values":[  
            {  
               "value":null
            }
         ]
      }
   ],
   "regions":null,
   "filters":[  

   ]
}

So far, it is not possible to get the values, the data json doesn't have values at the moment and the PG team is working on it. Check this link.

Re: dataSelected on table

mahoon — Wed, 11 Jan 2017 09:42:26 GMT

Thanks for the reply - yes I was using a table as the visual. I will check your link, thanks again.