HTML Content

[alicya-abdala]

I'm a beginner in Power BI and wrote a code for a taskbar. This taskbar is supposed to be linked to the charts on my dashboard, but that’s not happening. How can I resolve this so that the rendered HTML is directly connected to the Power BI filtering mechanism?
Segue o código:

BN-Vert =

"<div class='navbar'>

    <div class='user-profile'>

        <img src='IMAGEM'>

        <div class='user-name'>@User</div>

    </div>

    <!-- Seção Data -->

    <div class='nav-item' onclick=""openSection('data-section')"">

        <div class='section-title'>Data</div>

    </div>

    <!-- Seção Pontos -->

    <div class='nav-item' onclick=""openSection('pontos-section')"">

        <div class='section-title'>Pontos</div>

    </div>

    <!-- Seção Parâmetros -->

    <div class='nav-item' onclick=""openSection('parametros-section')"">

        <div class='section-title'>Parâmetros</div>

    </div>

    <!-- Conteúdo da seção Data -->

    <div class='side-panel' id='data-section'>

        <div class='side-panel-header'>

            <button class='back-button' onclick=""closeSection('data-section')"">← Voltar</button>

            <div class='section-title'>Selecione Data</div>

        </div>

        <div class='side-panel-content'>

            " & CONCATENATEX(

                DISTINCT('DADOS'[Data]),

                "<div class='nav-item' onclick=""applyFilter('Data', '" & 'DADOS'[Data] & "')"">" &

                'DADOS'[Data] &

                "</div>",

                ""

            ) & "

        </div>

        <button class='apply-button' onclick=""applyChanges()"">Aplicar Filtro</button>

    </div>

    <!-- Conteúdo da seção Pontos -->

    <div class='side-panel' id='pontos-section'>

        <div class='side-panel-header'>

            <button class='back-button' onclick=""closeSection('pontos-section')"">← Voltar</button>

            <div class='section-title'>Selecione Pontos</div>

        </div>

        <div class='side-panel-content'>

            " & CONCATENATEX(

                DISTINCT('DADOS'[Ponto]),

                "<div class='nav-item' onclick=""applyFilter('Ponto', '" & 'DADOS'[Ponto] & "')"">" &

                'DADOS'[Ponto] &

                "</div>",

                ""

            ) & "

        </div>

        <button class='apply-button' onclick=""applyChanges()"">Aplicar Filtro</button>

    </div>

    <!-- Conteúdo da seção Parâmetros -->

    <div class='side-panel' id='parametros-section'>

        <div class='side-panel-header'>

            <button class='back-button' onclick=""closeSection('parametros-section')"">← Voltar</button>

            <div class='section-title'>Selecione Parâmetros</div>

        </div>

        <div class='side-panel-content'>

            " & CONCATENATEX(

                DISTINCT('DADOS'[Parâmetro]),

                "<div class='nav-item' onclick=""applyFilter('Parâmetro', '" & 'DADOS'[Parâmetro] & "')"">" &

                'DADOS'[Parâmetro] &

                "</div>",

                ""

            ) & "

        </div>

        <button class='apply-button' onclick=""applyChanges()"">Aplicar Filtro</button>

    </div>

</div>

<style>

    .navbar {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        background-color: #2c3e50;

        padding: 20px;

        width: 250px;

        height: 100vh;

        position: fixed;

        top: 0;

        left: 0;

    }

    .user-profile {

        display: flex;

        flex-direction: column;

        align-items: center;

        margin-bottom: 20px;

        width: 100%;

    }

    .user-icon {

        width: 100px;

        height: 100px;

        border-radius: 50%;

        margin-bottom: 10px;

    }

    .user-name {

        color: white;

        font-family: Arial, sans-serif;

        font-size: 16px;

        text-align: center;

    }

    .nav-item {

        background-color: #34495e;

        color: white;

        font-family: Arial, sans-serif;

        font-size: 14px;

        padding: 10px 15px;

        margin: 10px 0;

        border-radius: 5px;

        cursor: pointer;

        text-align: center;

        width: 100%;

        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);

        transition: background-color 0.3s ease, transform 0.2s ease;

    }

    .nav-item:hover {

        background-color: #f39c12;

        transform: scale(1.05);

    }

    .section-title {

        font-size: 16px;

        font-weight: bold;

        margin-bottom: 10px;

    }

    .side-panel {

        display: none;

        position: fixed;

        top: 0;

        right: 0;

        background-color: #ecf0f1;

        width: 250px;

        height: 100%;

        padding: 20px;

        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);

        overflow-y: auto; /* Adiciona barra de rolagem vertical */

    }

    .side-panel-content {

        max-height: calc(100% - 100px); /* Ajusta a altura do conteúdo para permitir espaço para o botão */

        overflow-y: auto; /* Ativa a rolagem dentro do painel */

    }

    .side-panel-header {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    .back-button {

        background-color: #e74c3c;

        color: white;

        border: none;

        border-radius: 5px;

        padding: 5px 10px;

        cursor: pointer;

    }

    .back-button:hover {

        background-color: #c0392b;

    }

    .apply-button {

        margin-top: 20px;

        width: 100%;

        padding: 10px;

        background-color: #27ae60;

        color: white;

        border: none;

        border-radius: 5px;

        cursor: pointer;

    }

    .apply-button:hover {

        background-color: #1e8449;

    }

</style>

<script>

    function openSection(sectionId) {

        document.getElementById(sectionId).style.display = 'block';

    }

    function closeSection(sectionId) {

        document.getElementById(sectionId).style.display = 'none';

    }

    function applyFilter(category, value) {

        alert('Você selecionou ' + category + ': ' + value);

    }

    function applyChanges() {

        alert('Filtro aplicado!');

    }

</script>"

[FarhanJeelani · Accepted solution]

Hi @alicya-abdala  ,

Your code looks like you're trying to build a custom taskbar in Power BI with dynamic content that filters the data based on user selection. However, the issue you're describing is that the HTML rendered doesn't directly integrate with Power BI's filtering mechanism. This means the HTML you're generating is not actually connected to Power BI's built-in filtering system (which happens via the Power BI visuals and slicers).

Power BI and Custom HTML

Power BI itself doesn’t directly allow custom HTML elements to interact with its filtering mechanism unless you use the Power BI API, or Power BI embedded features. What you're trying to achieve with ApplyFilter and ApplyChanges won’t automatically affect the Power BI visuals unless they’re connected to the Power BI filtering system.

Using DAX to Pass Data

Instead of relying on HTML elements to trigger filters, you could use DAX and slicers to control the filters.

• Use DAX measures and Power BI slicers to control the data displayed in your charts.

 You can create a slicer for each of the categories (Data, Ponto, Parâmetro) in Power BI itself.

Modify HTML/JavaScript to Trigger Power BI Filters

// Assuming you have your Power BI embed object in a variable called `report` function applyPowerBIFilter(category, value) { const filter = { $schema : "http://powerbi.com/product/schema#basic", 
target : { table : 'DADOS', 
column : category }, 
operator : "In", 
values 
  : [value] };
report.setFilters([filter]).then(
  function() { console.log("Filter applied!");
}
).catch(
  function(error) { console.error("Error applying filter:", error);
}
);
}

Please mark this as solution if it helps you. Appreciate Kudos.