Advance your Data & AI career with 50 days of live learning, dataviz contests, hands-on challenges, study groups & certifications and more!
Get registeredGet Fabric Certified for FREE during Fabric Data Days. Don't miss your chance! Request now
How to pass external values from an HTML Page to the Powerbi Embedded Report.
Hi @Anmolgan,
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
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>
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?
Advance your Data & AI career with 50 days of live learning, contests, hands-on challenges, study groups & certifications and more!
Check out the October 2025 Power BI update to learn about new features.
| User | Count |
|---|---|
| 5 | |
| 3 | |
| 1 | |
| 1 | |
| 1 |