Power B I Dashboard - Copy this Html, Bootstrap Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Listar-e-Embeddar-Relatórios-do-Power-BI</title>-<script-src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-<script-src="https://cdn.jsdelivr.net/npm/powerbi-client@2.21.0/dist/powerbi.min.js"></script>-<link-rel="stylesheet"-href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-<style>-.reportWrapper-{-position:-relative;-width:-100%;-height:-100%;-aspect-ratio:-16/9;-}-.reportContainer-{-width:-100%;-height:-100%;-border:-1px-solid-#ccc;-background-color:-#f9f9f9;-}-.report-grid-{-display:-grid;-grid-template-columns:-1fr-1fr;-grid-template-rows:-1fr-1fr;-gap:-10px;-margin-top:-20px;-}-.full-screen-mode-{-position:-fixed;-top:-0;-left:-0;-width:-100vw;-height:-100vh;-z-index:-1000;-background-color:-white;-display:-grid;-grid-template-columns:-1fr-1fr;-grid-template-rows:-1fr-1fr;-gap:-10px;-padding:-10px;-}-.full-screen-mode-.reportContainer-{-height:-100%;-width:-100%;-}-</style>-</head>-<body>-<div-class="container">-<h2-class="mt-5">Selecione-e-Exiba-Relatórios-do-Power-BI</h2>-<!---Dropdowns-para-selecionar-os-relatórios--->-<div-class="controls">-<div-class="row">-<div-class="col-md-3">-<label-for="reportSelect1">Relatório-1:</label>-<select-id="reportSelect1"-class="form-control">-<option-value="">Selecione-um-relatório</option>-</select>-</div>-<div-class="col-md-3">-<label-for="pageSelect1">Páginas-do-Relatório-1:</label>-<select-id="pageSelect1"-class="form-control"-multiple>-<!---Páginas-serão-preenchidas-dinamicamente--->-</select>-</div>-<div-class="col-md-3">-<label-for="reportSelect2">Relatório-2:</label>-<select-id="reportSelect2"-class="form-control">-<option-value="">Selecione-um-relatório</option>-</select>-</div>-<div-class="col-md-3">-<label-for="pageSelect2">Páginas-do-Relatório-2:</label>-<select-id="pageSelect2"-class="form-control"-multiple>-<!---Páginas-serão-preenchidas-dinamicamente--->-</select>-</div>-</div>-<div-class="row-mt-3">-<div-class="col-md-3">-<label-for="reportSelect3">Relatório-3:</label>-<select-id="reportSelect3"-class="form-control">-<option-value="">Selecione-um-relatório</option>-</select>-</div>-<div-class="col-md-3">-<label-for="pageSelect3">Páginas-do-Relatório-3:</label>-<select-id="pageSelect3"-class="form-control"-multiple>-<!---Páginas-serão-preenchidas-dinamicamente--->-</select>-</div>-<div-class="col-md-3">-<label-for="reportSelect4">Relatório-4:</label>-<select-id="reportSelect4"-class="form-control">-<option-value="">Selecione-um-relatório</option>-</select>-</div>-<div-class="col-md-3">-<label-for="pageSelect4">Páginas-do-Relatório-4:</label>-<select-id="pageSelect4"-class="form-control"-multiple>-<!---Páginas-serão-preenchidas-dinamicamente--->-</select>-</div>-</div>-<div-class="row-mt-3">-<div-class="col-md-6">-<label-for="intervalInput">Tempo-de-Exibição-(em-segundos):</label>-<input-id="intervalInput"-type="number"-class="form-control"-value="10"-min="1">-</div>-</div>-<button-id="loadReportsBtn"-class="btn-btn-primary-mt-3">Carregar-Relatórios</button>-<button-id="fullscreenBtn"-class="btn-btn-secondary-mt-3">Tela-Cheia</button>-</div>-<!---Grid-para-4-relatórios--->-<div-class="report-grid"-id="reportGrid">-<div-class="reportWrapper">-<div-id="reportContainer1"-class="reportContainer"></div>-</div>-<div-class="reportWrapper">-<div-id="reportContainer2"-class="reportContainer"></div>-</div>-<div-class="reportWrapper">-<div-id="reportContainer3"-class="reportContainer"></div>-</div>-<div-class="reportWrapper">-<div-id="reportContainer4"-class="reportContainer"></div>-</div>-</div>-</div>-<script-type="text/javascript">-var-reports-=-{};-//-Para-armazenar-as-instâncias-dos-relatórios-Power-BI-var-intervalId;-//-ID-do-intervalo-de-troca-de-abas-$(document).ready(function-()-{-var-accessToken-=-'YOUR_ACCESS_TOKEN';-//-Coloque-seu-token-de-acesso-aqui-var-groupId-=-'YOUR_GROUP_ID';-//-Coloque-seu-groupId-aqui-function-loadReports()-{-var-apiUrl-=-`https://api.powerbi.com/v1.0/myorg/groups/${groupId}/reports`;-$.ajax({-url:-apiUrl,-headers:-{-'Authorization':-'Bearer-'-+-accessToken,-'Content-Type':-'application/json'-},-success:-function-(data)-{-var-reportsData-=-data.value;-if-(reportsData-&&-reportsData.length->-0)-{-reportsData.forEach(function-(report)-{-var-option-=-new-Option(report.name,-report.id);-$('#reportSelect1').append(option.cloneNode(true));-$('#reportSelect2').append(option.cloneNode(true));-$('#reportSelect3').append(option.cloneNode(true));-$('#reportSelect4').append(option.cloneNode(true));-});-}-},-error:-function-(error)-{-console.error('Erro-ao-carregar-os-relatórios:',-error);-alert("Erro-ao-carregar-os-relatórios.-Verifique-o-console.");-}-});-}-function-loadPages(reportId,-pageSelectId)-{-var-embedConfiguration-=-{-type:-'report',-tokenType:-window['powerbi-client'].models.TokenType.Embed,-accessToken:-accessToken,-embedUrl:-`https://app.powerbi.com/reportEmbed?groupId=${groupId}&reportId=${reportId}`,-settings:-{-filterPaneEnabled:-false,-navContentPaneEnabled:-false-}-};-var-reportContainer-=-$('<div>')[0];-//-Um-container-temporário-para-obter-as-páginas-var-report-=-powerbi.embed(reportContainer,-embedConfiguration);-report.on('loaded',-function-()-{-report.getPages().then(function-(pages)-{-pages.forEach(function-(page)-{-var-option-=-new-Option(page.displayName,-page.name);-$('#'-+-pageSelectId).append(option);-});-});-});-}-function-embedReport(containerId,-reportId,-selectedPages)-{-var-embedConfiguration-=-{-type:-'report',-accessToken:-accessToken,-embedUrl:-`https://app.powerbi.com/reportEmbed?groupId=${groupId}&reportId=${reportId}`,-tokenType:-window['powerbi-client'].models.TokenType.Embed,-settings:-{-filterPaneEnabled:-false,-navContentPaneEnabled:-false-}-};-var-reportContainer-=-$('#'-+-containerId)[0];-var-powerbiReport-=-powerbi.embed(reportContainer,-embedConfiguration);-powerbiReport.on('loaded',-function-()-{-if-(selectedPages.length->-0)-{-startPageRotation(powerbiReport,-selectedPages,-$('#intervalInput').val()-*-1000);-}-});-reports[containerId]-=-powerbiReport;-}-function-startPageRotation(report,-selectedPages,-interval)-{-let-currentPageIndex-=-0;-intervalId-=-setInterval(function-()-{-currentPageIndex-=-(currentPageIndex-+-1)-%-selectedPages.length;-report.setPage(selectedPages[currentPageIndex]);-},-interval);-}-//-Evento-para-carregar-as-páginas-ao-selecionar-um-relatório-$('#reportSelect1').change(function-()-{-var-reportId-=-$(this).val();-$('#pageSelect1').empty();-if-(reportId)-loadPages(reportId,-'pageSelect1');-});-$('#reportSelect2').change(function-()-{-var-reportId-=-$(this).val();-$('#pageSelect2').empty();-if-(reportId)-loadPages(reportId,-'pageSelect2');-});-$('#reportSelect3').change(function-()-{-var-reportId-=-$(this).val();-$('#pageSelect3').empty();-if-(reportId)-loadPages(reportId,-'pageSelect3');-});-$('#reportSelect4').change(function-()-{-var-reportId-=-$(this).val();-$('#pageSelect4').empty();-if-(reportId)-loadPages(reportId,-'pageSelect4');-});-$('#loadReportsBtn').click(function-()-{-var-interval-=-$('#intervalInput').val()-*-1000;-//-Coleta-os-IDs-dos-relatórios-e-das-páginas-selecionadas-var-reportId1-=-$('#reportSelect1').val();-var-pages1-=-$('#pageSelect1').val()-||-[];-var-reportId2-=-$('#reportSelect2').val();-var-pages2-=-$('#pageSelect2').val()-||-[];-var-reportId3-=-$('#reportSelect3').val();-var-pages3-=-$('#pageSelect3').val()-||-[];-var-reportId4-=-$('#reportSelect4').val();-var-pages4-=-$('#pageSelect4').val()-||-[];-if-(reportId1)-embedReport('reportContainer1',-reportId1,-pages1);-if-(reportId2)-embedReport('reportContainer2',-reportId2,-pages2);-if-(reportId3)-embedReport('reportContainer3',-reportId3,-pages3);-if-(reportId4)-embedReport('reportContainer4',-reportId4,-pages4);-});-//-Evento-para-alternar-para-tela-cheia-$('#fullscreenBtn').click(function-()-{-var-reportGrid-=-document.getElementById('reportGrid');-if-(reportGrid.requestFullscreen)-{-reportGrid.requestFullscreen();-}-else-if-(reportGrid.mozRequestFullScreen)-{-reportGrid.mozRequestFullScreen();-}-else-if-(reportGrid.webkitRequestFullscreen)-{-reportGrid.webkitRequestFullscreen();-}-else-if-(reportGrid.msRequestFullscreen)-{-reportGrid.msRequestFullscreen();-}-$('#reportGrid').toggleClass('full-screen-mode');-});-loadReports();-});-</script>-</body>-</html>-quero-pegar-este-codigo-e-colocar-a-opção-de-o-usuario-informar-o-clietid,-secret,-username-e-senha-para-obter-o-token,-feitos-isso-ele-exibir-um-drop-down-para-escolha-dos-relatorios-apartir-da-api-de-consulta-de-relatorios,-o-fluxo-seria,obter-o-token,-listar-os-workspaces,-pegar-a-id-do-workspace-e-listar-os-relatorios-no-dropdown,-depois-de-listar-os-relatorios,-poder-selecionar-o-relatorio-e-renderizar-o-relatorio
