custom visual write back

[jesuslogmein]

Hi I am trying to create a custom visual , my ts script is this:

import powerbi from "powerbi-visuals-api";

import IVisual = powerbi.extensibility.visual.IVisual;

import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;

import IVisualHost = powerbi.extensibility.visual.IVisualHost;

import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;

export class Visual implements IVisual {

    private target: HTMLElement;

    private host: IVisualHost;

    constructor(options: VisualConstructorOptions) {

        this.target = options.element;

        this.host = options.host;

        // Crear un botón para enviar el filtro "OK"

        this.target.innerHTML = `<button id="btnSendOk">Validacion</button>`;

        const btn = this.target.querySelector("#btnSendOk") as HTMLButtonElement;

        btn.addEventListener("click", () => this.sendOkToModel());

    }

    // Método para enviar el filtro al modelo

    sendOkToModel() {

        const filter = {

            $schema: "http://powerbi.com/product/schema#basic",

            target: {

                table: "tb_llamadas",  // <-- Cambia esto según el nombre real de tu tabla

                column: "transcription_items.transcription_time"  // <-- Cambia esto a la columna deseada

            },

            operator: "In",

            values: ["OK"]

        };

        this.host.applyJsonFilter(

            filter,

            "general",      // objectName

            "merge",        // propertyName (corregido: ahora es un string, no un enum)

            undefined       // identities (opcional)

        );

        console.log("Filtro 'OK' aplicado");

    }

    update(options: VisualUpdateOptions) {

        // Aquí podrías actualizar visualización basada en datos si lo necesitas

    }

}

but it fails me, the only thing I want is that the user when he clicks sends OK to the semantic model of the pbi.

help!!!

[BeaBF]

@jesuslogmein Hi! Try with:

import powerbi from "powerbi-visuals-api";
import IVisual = powerbi.extensibility.visual.IVisual;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import { FilterAction, FilterType, IBasicFilter } from "powerbi-models";

export class Visual implements IVisual {
private target: HTMLElement;
private host: IVisualHost;

constructor(options: VisualConstructorOptions) {
this.target = options.element;
this.host = options.host;

// Add a button to send "OK" filter
this.target.innerHTML = `<button id="btnSendOk">Validación</button>`;

const btn = this.target.querySelector("#btnSendOk") as HTMLButtonElement;
btn.addEventListener("click", () => this.sendOkToModel());
}

sendOkToModel() {
const filter: IBasicFilter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "tb_llamadas",
column: "transcription_items.transcription_time"
},
operator: "In",
values: ["OK"],
filterType: FilterType.Basic
};

this.host.applyJsonFilter(
filter,
"general", // objectName — can be any string
"filter", // propertyName — must be a string
FilterAction.merge // This is the correct enum
);

console.log("Filtro 'OK' aplicado");
}

update(options: VisualUpdateOptions) {
// Not used for this button-only visual
}
}

BBF

💡 Did I answer your question? Mark my post as a solution!

👍 Kudos are appreciated

🔥 Proud to be a Super User!