CODEWITHSUNDEEP
powerbipowerbi-embedded
Dan Bellinski
Dan Bellinski

Reputation: 13

Filter a report's visual at embed time rather than after initial embed - Power BI Embedded (JS)

Currently the configuration to embed a specific visual through the JS powerbi-client does not allow passing in filters. See "Embed a report visual" for the configuration supported. Note that you are able to pass in filters at embed time for a report. See "Embed a report". Not being able to filter a visual at embed time results in 2 hops (once to load the visual with default filters, then another to load with expected filters).

Feature Request: I'd love for the feature to be added to filter at embed time for visuals like it exists for reports.

The way I do this now is hide the visual, embed it, set filters when loaded, then show it when rendered.

this.visualReady = false;

let visual = this.powerbi.embed(
  embedElement,
  visualLoadConfig
) as pbi.Visual;

visual.on('loaded', async () => {
  await visual.setFilters([upcFilter, dateFilter]);
});

visual.on('rendered', async () => {
  this.visualReady = true;
});

Are there any better ways to do this in the mean time?

Upvotes: 1

Views: 987

Answers (1)

Pawan Karkal
Pawan Karkal

Reputation: 141

Currently, Visual embedding does not support configuration for adding filters at embed time i.e. phased embedding is not possible for visuals.

The approach you are following currently is the best way to update filters for visuals.

One minor correction would be that you don't need to hide the visual because it will be rendered only after filter is updated.

Please refer below snippet for embedding visual with filters:

const visual = powerbi.embed(PowerBIEmbed.visualContainer.get(0), visualConfig);

// Clear any other loaded handler events
visual.off("loaded");

// Triggers when a visual schema is successfully loaded
visual.on("loaded", function () {
    console.log("visual load successful");

    const basicFilter = {
        $schema: "http://powerbi.com/product/schema#basic",
        target: {
            table: "Dates",
            column: "Month"
        },
        operator: "In",
        values: ['Feb'],
        filterType: 1,
        requireSingleSelection: true
    }

    visual.setFilters([basicFilter]).then(res => {
        visual.getFilters().then(filters => {
            console.log(filters);
        });
    }).catch(error => {
        console.error(error);
    });
});

// Clear any other rendered handler events
visual.off("rendered");

// Triggers when a visual is successfully embedded in UI
visual.on("rendered", function () {
    console.log("visual render successful");
});

Visual embedding with filter applied: Visual embedding with filter applied

Visual embedding without filter applied: Visual embedding without filter applied

Upvotes: 2

Related Questions