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

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

satishr — Mon, 12 Feb 2018 07:14:26 GMT

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?

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

v-viig — Mon, 12 Feb 2018 08:10:18 GMT

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

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

satishr — Mon, 12 Feb 2018 10:05:01 GMT

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(),
});

}

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

v-viig — Mon, 12 Feb 2018 10:45:12 GMT

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