Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
satishr
Helper III
Helper III

Field order change issue when using options.dataViews[0].table.rows in my custom visual

Hi guys,

I have created a simple custom visual widget where I'm using options.dataViews[0].table.rows to get data. The visual takes 3 fields as input - Actual, Target and Category. It works fine when I input fields one by one to the widget but breaks if I input the data in different order even though I'm dragging the fields into correct input positions. It also breaks if I change the fields after creating the visual on the report. I think the issue is because I'm using row[0], row[1].... to get the data. Is there a way to get data as row[actual], row[target].. or can I solve this problem in any other way? 

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

Please use this code snippet to parse values from table mapping:

 

    export interface ColumnGroup {
        [columnName: string]: number | Date | string;
    }

    function getColumnGroupByRole(
        columns: DataViewMetadataColumn[],
        row: DataViewTableRow
    😞 ColumnGroup {
        const columnGroup: ColumnGroup = {};

        row.forEach((value: any, valueIndex: number) => {
            const column: DataViewMetadataColumn = columns[valueIndex];

            Object.keys(columns[valueIndex].roles)
                .forEach((roleName: string) => {
                    columnGroup[roleName] = value;
                });
        });

        return columnGroup;
    }

    function parseData(dataView: DataView) {
        const data: any[] = [];

        dataView.table.rows.forEach((row: DataViewTableRow) => {
            const columns = getColumnGroupByRole(dataView.metadata.columns, row);

            data.push({
                Indicator: +columns["Indicator"],
                Target: +columns["Target"],
                Date: columns["Date"]
                    ? columns["Date"].toString()
                    : null
            });
        });

        return data;
    }

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

3 REPLIES 3
v-viig
Community Champion
Community Champion

Hello @satishr,

 

You're able to get value index in the row by getting index from dataView.metadata.columns.

Each column has the roles object that indicates the role of this column (the roles contains column name).

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hi @v-viig, I'm using the below code to fetch data. Can you let me know how to use roles object here? Sorry, I'm new to JSON structures.

 

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
resultData.push({
Indicator: +row[0],
Target: +row[1],
Date: row[2].toString(),
});

}
v-viig
Community Champion
Community Champion

Please use this code snippet to parse values from table mapping:

 

    export interface ColumnGroup {
        [columnName: string]: number | Date | string;
    }

    function getColumnGroupByRole(
        columns: DataViewMetadataColumn[],
        row: DataViewTableRow
    😞 ColumnGroup {
        const columnGroup: ColumnGroup = {};

        row.forEach((value: any, valueIndex: number) => {
            const column: DataViewMetadataColumn = columns[valueIndex];

            Object.keys(columns[valueIndex].roles)
                .forEach((roleName: string) => {
                    columnGroup[roleName] = value;
                });
        });

        return columnGroup;
    }

    function parseData(dataView: DataView) {
        const data: any[] = [];

        dataView.table.rows.forEach((row: DataViewTableRow) => {
            const columns = getColumnGroupByRole(dataView.metadata.columns, row);

            data.push({
                Indicator: +columns["Indicator"],
                Target: +columns["Target"],
                Date: columns["Date"]
                    ? columns["Date"].toString()
                    : null
            });
        });

        return data;
    }

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.