custom visual write back

jesuslogmein — Fri, 18 Jul 2025 07:17:24 GMT

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!!!

Re: custom visual write back

BeaBF — Tue, 22 Jul 2025 15:13:09 GMT

@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!

topic custom visual write back in Custom Visuals Development Discussion

custom visual write back

Re: custom visual write back