show text at button click in power bi using typescript - Custom Script

[siva_powerbi]

I am trying to create a custom visual, requirement is to show the text in the visual on a Button click.

Created a project and added code for the button and on click event for the button, I am able to create the button but on click event is not triggered/not working.

"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import { html, select, selectAll, Selection } from 'd3';

import { VisualSettings } from "./settings";


export class Visual implements IVisual {
    private target: HTMLElement;
    private updateCount: number;
    private settings: VisualSettings;
    private textNode: Text;

    private svg: Selection<SVGElement, any, any, any>;

    

    private onclick1 = "<button onclick=\"myFunction()\">Click me</button>"
    +"<p id=\"demo\"></p><script>"
    +"function myFunction() {"
    +"  document.getElementById(\"demo\").innerHTML = \"Hello World\";"
    +"}"
    +"</script>";




    constructor(options: VisualConstructorOptions) {

        this.target = options.element;  //Working code for HTML

        
    }

    public update(options: VisualUpdateOptions) {

        this.target.innerHTML = this.onclick1;
    }
}

Beginner in the typescript and Power BI.

Hope to get some help.

[WZorn]

Any luck with this?  I'm trying the same thing.

[siva_powerbi]

No, left typerscript workk now working on power bi desktop, are you able to resovle this? if yes please help me with solution.

[WZorn]

I did.

This code just keeps appending text to the visual each time the button is clicked.

"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;

import * as d3 from "d3";

import { VisualSettings } from "./settings";

export class Visual implements IVisual {
    private root: d3.Selection<HTMLElement, {}, HTMLElement, any>;
    private button: d3.Selection<HTMLInputElement, {}, HTMLElement, any>;
    private settings: VisualSettings = new VisualSettings;

    constructor(options: VisualConstructorOptions) {
        this.root = d3.select(options.element);

        // Add Button Element
        this.button = this.root.append("input")
            .attr("type", "button")
            .attr("name", "mybutton")
            .attr("value", "Click Me")
            .on("click", this.clickedButton);

    }

    public update(options: VisualUpdateOptions) {
        
    }

    // Event handler for button click
    private clickedButton = () => {
        this.root.append("div")
            .text("Hello World!");
    }

}