The ultimate Fabric, Power BI, SQL, and AI community-led learning event. Save €200 with code FABCOMM.
Get registeredEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
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.
Solved! Go to Solution.
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.
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.
Thanks for the reply - yes I was using a table as the visual. I will check your link, thanks again.
User | Count |
---|---|
5 | |
5 | |
2 | |
2 | |
2 |
User | Count |
---|---|
10 | |
7 | |
4 | |
4 | |
4 |