Forum Discussion

jesuslogmein's avatar
jesuslogmein
Icon for Helper I rankHelper I
1 year ago

custom visual write back

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

1 Reply

  • BeaBF's avatar
    BeaBF
    Icon for Super User rankSuper User

    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!