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

[satishr]

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? 

[v-viig]

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

[satishr]

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 · Accepted solution]

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