Re: How to pass external date filter so that repor...

Anmolgan · ‎01-22-2018

How to pass external values from an HTML Page to the Powerbi Embedded Report.

v-ljerr-msft · ‎01-23-2018

With JavaScript library for embedding Power BI, you can apply additional filters when loading a report. You can also change filters dynamically. This allows you to create your own custom filter pane to match the brand of your application, and to automatically apply filters on some other context of your application to help show the user the correct visual/information.

Retrieving filters:

report.getFilters()
 .then(filters => {
     ...
 });

Applying filters: (See section below on Constructing Filters)

const filter = { ... };

report.setFilters([filter])
  .catch(errors => {
    // Handle error
  });

Regards

Anmolgan · ‎01-23-2018

How can I edit the below html using what you have said?? Please guide me through!!!!

<html>
<body>
<h2>PowerBI Embedded Report</h2>
<form action="/action_page.php">
<input type="text" name="sdate" placeholder="Start Date"><br>
<input type="text" name="edate" placeholder="End Date"><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">

window.onload = function () {
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
accessToken: 'H4sIAAAAAAAEAB2Wtc7GDJaD7-VvM1KYRpoi_IYZuzAzZ7X3vt9s7-o5to__5x8rfYc5Lf759z9qFtBnLEprEV4Oe0kwN8NnsVB6-bveCtzdaVtYZzQwzua7M7rr7UjXq5Kly9Q9GNPbMT7OQ5umkk2GF9wFfv4oN713w6VZBzcPOhoWA6NnRUjHVKB_nzFdJxPtyQwobPSGTD31VDSyQ94x-WCNruPCPzWerwbbU0PkQBhhhQ6TcIs-m0bOf8qE9FB-arMxWxHQE3F6ZcGRF61B-r-KZZE6DXKzVV27OQTRDIae2N8L_XbrnA0YcUM96aXSJM7WoVrvSGXu9tfuUctEuykCquZEs6TOwFwD_r4hDb-9UREaT7ej1QF-UQ2b5bxcNF-ImDTax66tL_2eAw-1_eicZYIts-0nC3jpnQqRKL721JzTGl_LfnsGAdaNvxnP_dT0uorhgvez8dhQabuyyhmfFPIRD9kDk1kYpb5-E-kpPlrBb9Hkl62z8N2JDnhEA0Mjn5jF6NIcoJxC2-3ZdxNHd_MSRtMu_6n1mkzZ40LZsUJnPAo1fSZ9z45BvmKKDKJdQgPP5yMO-ZCH28pSTUMeurrengIwU1-5Ths1bQUahKacaKcNPNXfHF0ZVLwZ1cx_dnDy-4qYweSp-yqbptSqZl2lyT3QA-LHdhzvUo1umrIFn3EXAeKQfC-hqn_Dq45HMCJS2qod6a0n4m1yBkzg5bbqfcpxwFT9VHsL2yO1Ro_WaQM1Xs61QETRkLI4_VSvwojbOE3vF_Is-Kh3xQtta2avL4_b1_a7xavOb-ZgXQB1tUkS6YdlpyjGEjLyEb3ixIQVi6s4ZwqWeI0Q9XWooATTO48hLp6RXQqK-aHb0iZIPt3Le6mQT0YS4uHyEUCV5wQO284xuQw0y90XbiDja84T47LIEXgMggpJAaFMUpSoJdEbE21BAPSeUojO8c72NlN81HtvtmJSgsvJGkS_bZklJ4Q9QlMRnzQc-Lh4pfVwMLYikKpKr8zrNhKnZVGwiN9izwPmmeF5X0GylNLO3heMOxZl8MK7XYOVJuQo3IS561Io1rpUcx11KXs8kN3ES7Ys5YXxsymSxpNTTNZclKoLm4OI9EywU6fuko_i4KSZzK_pfRPjPETANzxam6M84mSl2bmo8lugvfg23aploZAN5fbAbOP-lj52PGdu72WGUX5VNebEDGdfGz0NO0MZxKUYFY8RAl9wy-siZFAB9tqcqwecESda5qau0v7rXVrughbFSm77jgjJ9Kml_0wtXbEsmHOwGkNUIWyIfXz6WxBDybAoQmAauxPuGZ55qfsALB3iRi1s8AMAFLNnGQf048qrieXvIfFoSp_xEqinUR--v-46xMhMabgjJGpKUgnW6JQLBAmXcH_s4wbJ-5dBNmBC1CC5hNv28u2g9uxaYiW8m0bg8QxjD2xzmKD70Ews31JP5HTeyXbFzeEzhHKDmCDemPwJjmUrNNUlNonIS5W2zhwG2UY0Mul4Ht7iBtQgWu6yT3RY7FV7lrvLPw-OPDtCnTGfZpcj0NRUJVpiytzGAHnAD1UEn1famtNw7IZTHgz49Rb47Ji2zlGfuwUzeuMYBIA1lnRriYt7xZnuIR-iy5SXFqT3rkmXU1nbo3DEu0Ko7d8gFLzHlWCdh_V95q1lHXgU2IFkHW9sxGnhXF5kHk-0f6FEnm-KzWLZWkkG4ofm1e2LWpB1jJmoj4qs20EK8OAvRFZlfm2ek43X63Vf5E6j8ir8YIU_er6ubztzgIE0OypnfF83jDvqlsq06pd6JFjRZrtNWs2YclH84qy5_yFIO724vEBpPvQ3qq6BUkk3nuCrRITVOdaDluvLTeA8O-V7OnSbJlj13RC0jb9yCEZ6yzliP4_fXWERivJjKNmuJxuhXDx1wUiJx0kaEiaz5fsb4JEsiDAwKGDuewl9e-_3pEkByPRiOsm9EfLpB-DS0FcuTbbechYYjSd9604TphFbFa7DlYjjojhj7KNeBeEN122DlIyDa9kPKBroZa_3xzOskDhSJxHotFTLiwRA7Lz9ZIdSKGgR4cADWTmJYpSCBk0ik-OJ1a-wmwzlaQITXioL2XGuX33XEGUj-grL4_zzr3-47V2OWS3fvzlw5EMBhyoLUK9l2rjzGwJQD2Egz162PN7vcwUPE2g3Nh99jnHgkQJyMHwQQrQMBJ9ZHJ6_U1dKuegxCTrtD09t__EE4zDUYyqZdwnyY32n_onSeCBCT1KSiGIwR6IcGy_odi16Rn58HS3nyR99khtNrKLg2t2SqY7pZe6O27j2uw2x2P37xBe4qEjzI85r3M8p4X6s3ThtsuJXdL15o9qmPy9lnXoFPWJV9qYvKVjazS-stnAdRzq3pDOVlzMtwHh4Tm-g63y8qxlqAmyILPFzp5Mab9HSrOZ-sdrblo_EoRqn5-JXNoSK2_d6-H5CoMO27rdZZo55bqOgOM6wZVXbOdz_-c9_Mb9LU25y8Ed5sGj5SRSLkfvEdNI6jaWhqf9f5bb1lB7nVv7JhD4-2AhheXuFr4Vz83Dom_wvUDuS3dcTRnKD_MrCvljuVt9M7aYvgaL5h1PQh7UN9BavyFhhlR2KfxeZp6cw_u1R362hlHBd5o_EA7kwlz1RRx2XfK5dTzgdIK2i3oal8TSakdS4m7Cs-PhMpTn5IDZFe7hbHOMv9Xt4HWEo3F6PpYFUvm2qGwlQRAHFLaAZ3NW4sSNimU5IlZabhzR9swNRW_Wxz0bE0SYaolTmv0JjXwdNnO6vHnw9_ImhBQilbEayg3XBQ6F-nC4LbubRsJ9IN7URxBvujRIVgjHfPk3jVYy3LA5TKMNVlyOw4b3Of80K7Hru1Ge4cTW0oDhXX6T9h_l__w_MAeuQAgsAAA==',
id: 'cd0cbb78-41ca-4db1-b739-e982f59694a2',
tokenType: models.TokenType.Embed,
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=cd0cbb78-41ca-4db1-b739-e982f59694a2&groupId=a78aa4c1-f...'
};

var report;
var $reportContainer = $('#reportContainer');

report= powerbi.embed($reportContainer.get(0), embedConfiguration);

var Filter1 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "reporting_validation_agg_group",
column: "aggregation_end_date_local_1"
},
logicalOperator: "AND",
conditions: [
{
operator: "LessThanOrEqual",
value: "1/20/2017"
}
]
}

var Filter2 = {
$schema: "http://powerbi.com/product/schema#advanced",
target: {
table: "reporting_validation_agg_group",
column: "aggregation_end_date_local_1"
},
logicalOperator: "AND",
conditions: [
{
operator: "GreaterThan",
value: "1/10/2017"
}
]
}

report.on('loaded', event => {
report.getFilters()
.then(filters => {

filters.push(Filter1);
filters.push(Filter2);
return report.setFilters(filters);
});
});

}

function reloadreport(){

var $reportContainer = $('#reportContainer');
powerbi.embedNew($reportContainer.get(0), embedConfiguration);

};
</script>
<script src="jquery.js"></script>
<script src="es6-promise.js"></script>
<script src="powerbi.js"></script>
<div id="reportContainer"></div>
</body>

</html>

Anmolgan · ‎01-23-2018

So suppose If I have start and end date boxes where I pass the date parameters and then click on submit, then the report should rendered A/Q to those values right??

Does your reply help me in doing this?

How to pass external date filter so that report gates filtered A/Q to the external values

Helpful resources

Microsoft Fabric Learn Together

Power BI Monthly Update - April 2024

Fabric Community Update - April 2024