Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
Hi,
I created a Custom POwer BI Visual which needs to have a textarea and will going to post data to my server.
I am able to create the html elements and data posting to my web server. My issue is when I try to get the data from my textarea. It value i define on the constructor doesnt change even I change the actual value from the actual textarea. How can I pull the data? below is my script.
"use strict";
import * as $ from "jquery";
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 EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
//import "wysihtml";
import { VisualSettings } from "./settings";
enum HttpVerbs {
GET, POST, PUT, DELETE
}
export class Visual implements IVisual {
private target: HTMLElement;
private myTextArea: HTMLElement;
private updateCount: number;
private settings: VisualSettings;
private textNode: Text;
private textboxValue: Text;
public textVal:String;
private textValue:Text;
public dView:DataView;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
this.updateCount = 0;
if (document) {
this.myTextArea = document.createElement('textarea');
this.myTextArea.textContent= "hello";
const new_p: HTMLElement = document.createElement("p");
new_p.appendChild(document.createTextNode("Update test load 3 count:"));
const new_em: HTMLElement = document.createElement("em");
new_em.id = "uniqueval";
this.textNode = document.createTextNode(this.updateCount.toString());
new_em.appendChild(this.textNode);
new_p.appendChild(new_em);
//this.target.appendChild(parser.parseFromString(htmlstring,"text/html"));
this.target.appendChild(new_p);
this.target.append(this.myTextArea)
this.target.appendChild(document.createRange().createContextualFragment("<Br><textarea id=\"editor\" rows=\"4\" cols=\"50\">jemojemo</textarea><Br><br><input type=\"button\" value=\"Clickarrble\" id=\"coolbutton\"></input>"));
this.target.appendChild(document.createRange().createContextualFragment("<div id=\"newValue\"></div>"));
}
var ddd = $("#coolbutton");
let btn = document.getElementById("coolbutton");
this.myTextArea.addEventListener("keypress", (e:Event) => this.textChanged(this.myTextArea.innerText));
btn.addEventListener("click", (e:Event) => this.getTrainingName(4,this.target,this.textNode.textContent));
//var editor = new w
////var editor = new wysihtml5.Editor('editor', {
// toolbar: 'toolbar',
// parserRules: wysihtml5ParserRules
//});
}
textChanged(str:string){
console.log("text Updated to:" + str);
document.getElementById("editor").textContent = this.myTextArea.textContent;
}
getTrainingName(n:number, el: HTMLElement,data:string){
// button click handler
console.log("calling API");
this.callWebApi("http:/localhost:3000/powerbi", HttpVerbs.POST, data, function (res){
//el.appendChild(document.createRange().createContextualFragment("<Br><br><br><h1>New String</h1><Br><br>" + res));
let divcon = document.getElementById("newValue");
divcon.innerHTML = res;
});
}
public update(options: VisualUpdateOptions) {
console.log('Visual update', options);
let dataView: DataView = options.dataViews[0];
this.dView = options.dataViews[0];
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
if (this.textNode) {
this.textNode.textContent = JSON.stringify(options.dataViews[0].categorical.values[0].values.toString()).toString();
}
//this.target.innerHTML =
// JSON.stringify(options.dataViews[0].metadata.columns);
}
private static parseSettings(dataView: DataView): VisualSettings {
return <VisualSettings>VisualSettings.parse(dataView);
}
/**
* This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
* objects and properties you want to expose to the users in the property pane.
*
*/
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
private callWebApi(url: string, verb:HttpVerbs, data: string, callback) : void
{
let xhr = new XMLHttpRequest();
xhr.onload = function () {
let data = JSON.parse(xhr.responseText);
callback(JSON.stringify(data));
}
xhr.onerror = function () {
callback("error on requesting data");
}
let httpVerb: string;
switch(verb){
case HttpVerbs.GET:
httpVerb = "GET";
break;
case HttpVerbs.POST:
httpVerb = "POST";
break;
case HttpVerbs.DELETE:
httpVerb = "DELETE";
break;
case HttpVerbs.PUT:
httpVerb = "PUT";
break;
}
xhr.open(httpVerb,url);
xhr.setRequestHeader("Content-type","application/json");
var txtValue = this.myTextArea.innerText;
if(data == null){
xhr.send("{\"test\":1}");
}else{
xhr.send("["+data+",\""+ txtValue +"\"]");
}
}
}
up
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
12 | |
2 | |
2 | |
1 | |
1 |
User | Count |
---|---|
20 | |
3 | |
2 | |
2 | |
2 |