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

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

siva_powerbi — Wed, 16 Dec 2020 09:54:29 GMT

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.

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

WZorn — Tue, 06 Jul 2021 18:47:59 GMT

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

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

siva_powerbi — Wed, 28 Jul 2021 08:17:06 GMT

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

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

WZorn — Wed, 28 Jul 2021 14:16:16 GMT

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!"); } }