Get certified for free when you join Fabric Data Days 2026 and dive into Fabric, Power BI, SQL, AI, and other essential data skills.
Join nowData Days is here! Join us now for 60+ days of learning, challenges, and connection. Learn more
module powerbi.visuals {
export class MyHelloWorld implements IVisual {
public static capabilities: VisualCapabilities = { };
private hostContainer: JQuery;
private table: JQuery;
public init(options: VisualInitOptions): void {
this.hostContainer = options.element;
this.hostContainer.append(
"<table id='MyTableVisual'>" +
"<thead><tr>" +
"<th>Column</th>" +
"<th>isMeasure</th>" +
"<th>QueryName</th>" +
"<th>GroupName</th>" +
"</tr></thead>" +
"<tbody></tbody>" +
"</table>"
);
}
public update(options: VisualUpdateOptions) {
var dataViews = options.dataViews;
if (!dataViews) return;
$("#MyTableVisual tbody").empty();
var columns = dataViews[0].metadata.columns;
for (var i = 0; i < columns.length; i++)
{
var newHtml = [];
newHtml.push("<tr>")
newHtml.push("<td>" + columns[i].displayName + "</td>")
newHtml.push("<td>" + columns[i].isMeasure + "</td>")
newHtml.push("<td>" + columns[i].queryName + "</td>")
newHtml.push("<td>" + columns[i].groupName + "</td>")
newHtml.push("</tr>")
$("#MyTableVisual").append(newHtml.join())
}
}
}
}I am trying to play with visuals, and I am 1 step behind "Hello, World!". I thought I would output the metadata... but the results are totally not what I expect. eg: if I use the "FileStorage" dataset, I get...
Column isMeasure QueryName GroupName
| Date | undefined | Date | undefined |
| Sales | true | bmw | BMW |
| Sales | true | alfa | Alfa Romeo |
which doens't seem to map that well to :
am I missing something here? or does my code just suck? 🙂
Don't miss out on Data Days, June 15 through August 7. Learn Fabric, Power BI, SQL, AI and more.
Check out the May 2026 Power BI update to learn about new features.