Forum Discussion

gotters's avatar
gotters
Resolver I
4 years ago

Events not firing in power bi angular component

As per the instructions I have setup event handlers and assigned to the component but they are not firing.

Specifically I need the "loaded" event to fire so that I can resize my container accordingly.

 

I have tried passing events directly into the component as well as the following code below, but nothing is firing.

 

 

this.reportObj.powerbi.embed(reportContainer, embedConfig);
const report = this.reportObj.getReport();
report.on('loaded', event => {
console.log('Report loaded', event.detail);
this.setContainerHeight();
});

 

 

Occasionally if I modify my screen to a small size the loaded event will fire?

Please advise what might be going wrong.

Thanks

Need Help

4 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable
    4 years ago

    HI gotters,

    I think this should be related to your setContainerHeight function, did this function defined by yourself? Can you please share some more detail about these?

    How to Get Your Question Answered Quickly  

    Here is the code snap from the embedded playground about change report layouts, you can take a look on it if helps:

    Power BI Playground - Developer Sandbox

     

    // Define default visual layout: visible in 400x300.
let defaultLayout = {
    width: 400,
    height: 250,
    displayState: {
        mode: models.VisualContainerDisplayMode.Hidden
    }
};

// Define page size as custom size: 1000x580.
let pageSize = {
    type: models.PageSizeType.Custom,
    width: 1000,
    height: 580
};

// Page layout: two visible visuals in fixed position.
let pageLayout = {
    defaultLayout: defaultLayout,
    visualsLayout: {
        "VisualContainer1": {
            x: 70,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        },
        "VisualContainer3": {
            x: 540,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        }
    }
};

let settings = {
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: pageSize,
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: {
            "ReportSection600dd9293d71ade01765": pageLayout
        }
    },
    panes: {
        filters: {
            visible: false
        },
        pageNavigation: {
            visible: false
        }
    }
}

// Update the settings by passing in the new settings you have configured.
try {
    await report.updateSettings(settings);
    console.log("Custom layout applied, to remove custom layout, reload the report using 'Reload' API.");
}
catch (error) {
    console.log(error);
}

     

    In addition, if you mean to change the embedded iframe size, I think you should change the iframe element style that you bind to the embedded container instead of internal contents.

    Regards,

    Xiaoxin Sheng

    • gotters's avatar
      gotters
      Resolver I
      4 years ago

      Thanks for the reply. It has nothing to do with my function. For testing I removed my function and just put a console.log - the events are just not firing. Is there any way I can track down what's happening to those events?

  • gotters's avatar
    gotters
    Resolver I
    4 years ago

    Thanks, have been through the docs you specified already. I was even trying to get the events to fire as per those docs and not relying on the component. But nothing is firing