Error: Property 'createSelectionIdBuilder' does not exist on type 'IVisualHost'.

[dunkyboy]

I'm receiving this error:

"Property 'createSelectionIdBuilder' does not exist on type 'IVisualHost'."

I'm attempting to create a custom visual on a table. This is following the Microsoft documentation here.https://docs.microsoft.com/en-us/power-bi/developer/visuals/selection-api 

I'm using API version: 3.8.0

The error causing code is at:

const selectionId: ISelectionId = this.host.createSelectionIdBuilder()
   .withTable(dataView.table, rowIndex)
   .createSelectionId();

My code is as follows:

"use strict";

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 IVisualHost = powerbi.extensibility.IVisualHost;
import ISelectionManager = powerbi.extensibility.ISelectionManager;

import ISelectionIdBuilder = powerbi.extensibility.ISelectionIdBuilder;
import ISelectionId = powerbi.visuals.ISelectionId;

import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import DataViewTableRow = powerbi.DataViewTableRow;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import * as d3select from 'd3-selection'

import { VisualSettings } from "./settings";
export class Visual implements IVisual {
    private host: IVisualHost;
    private target: HTMLElement;
    private selectionManager: ISelectionManager;
    private container: d3.Selection<any, any, any, any>;
    private settings: VisualSettings;

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.host = options.host;
       
        this.container = d3select.select(options.element)
            .append('table');
        this.selectionManager = options.host.createSelectionManager();
    }

    public update(options: VisualUpdateOptions) {
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
        console.log('Visual update', options);
        this.container.selectAll('*').remove();

        let dataViews = options.dataViews;

        //
        const dataView = options.dataViews[0];
        dataView.table.rows.forEach((row: DataViewTableRow, rowIndex: number) => {

        });

        let table = dataViews[0].table;

        let tHead = this.container
            .append('tr');

        table.columns.forEach(
            (col) => {
                tHead.append('th').text(col.displayName);
            },
            
        );
        tHead.append('th').text('Test')


        table.rows.forEach(
            (row: DataViewTableRow, rowIndex: number) => {
                let tRow = this.container
                    .append('tr');
                row.forEach(

                    (col) => {
                        tRow.append('td')
                            .text(col.toString());
                    },


                )
                // this.target.appendChild(rowDiv);
                const selectionId: ISelectionId = this.host.createSelectionIdBuilder()
                    .withTable(dataView.table, rowIndex)
                    .createSelectionId();
                // tRow.append('td').text(this.container.select('a').text);
                // tRow.append('td').text('ttt');
            }
        );

    }

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

[dm-p · Accepted solution]

Glad to hear it! Could I please trouble you to mark that post as the solution so that other community users can find it more quickly in future?

Many thanks,

Daniel

[dm-p]

Hi @dunkyboy,

The error is on line 8 - you're importing an IVisualHost with no methods exposed in its typings. IIRC this is here for backwards compatibility with a previous version of the SDK, and the documentation may be slightly out of date.

If you change the line as follows to include the correct interface, it will work:

import IVisualHost = powerbi.extensibility.visual.IVisualHost;

This will now expose the correct interface to your property and the createSelectionIdBuilder() method will be available (I've tested your code with this and it works fine for me).

Good luck!

Daniel

[FranciscoFiuza]

Thanks for your answer, that was exacly what i was looking for!

[dunkyboy]

Oh wow. Thanks.

That was it.

D