Embeded Tableau sheet won't update on url change

[PurpleMonkeyWrench]

I am trying to embed Tableau worksheets into my ReactJS application. I have a menu with a list of report names (in react) and when the menu item is clicked, it updates state which contains the report name. I decided to use the tableau-react npm package to complete this task.

When I first click on a menu item, it properly embeds the tableau report onto the page. When I click on another menu item (updating the state which is feeding the url) the tableau report refreshed, but continues to show the first report as if the url did not change. If I then click on a third menu item, the embed tableau report will refresh again, but this time it will show the second report item I clicked. Every subsequent menu item click refreshes the embed tableau report to the previous item clicked.

I am controlling state using Redux and in the Redux Dev Tools I've determined that everything with state is running correctly. Every menu item click properly updates state. I also put a console.log on the url that is being passed to the TableauReport url attribute, and that is correct also.

const Reports = props => {
  const { reportUrl } = props;
  return (
    reportUrl && <TableauReport url={reportUrl} />
  );
};

Menu Item Click       Tableau Report Shown
null                           null
Report 1                   Report 1
Report 2                   Report 1
Report 3                   Report 2
Report 4                   Report 3
Report 5                   Report 4

[coopermaruyama]

Hi, thanks for the detailed report. Unfortunately I no longer maintain this, mainly because I don’t have access to a proper tableau account anymore and have not worked with tableau in years. But I’ll try to help nonetheless.

First, can you check that the url is changing when going from Report 1 => Report 2? and post the url for each one here?

The thing that “triggers” the changing is here: https://github.com/coopermaruyama/tableau-react/blob/master/src/TableauReport.jsx#L48

I would try putting a breakpoint there and see if it’s calling that function the first time you go from report 1 => report 2.

Also, if I remember correctly, tableau has some kind of token that they return for each URL, and that token can only be used once. If you try to use the same token again, it might cause this kind of behavior. I would check that as well.

[PurpleMonkeyWrench]

This for the feedback!

Yes when first going from Report 1 => Report 2 the isReportChanged trigger is correctly set:

nextProps.url is also displaying the correct URL. However, when it calls this.initTableau() (because isReportChanged is true) inside the getUrl()function it uses this.props.url, which is still pointed to the previous url, not the new one.

That seems to be why it is always showing the previous url instead of the new one.

[PurpleMonkeyWrench]

I believe I found the issue and created a pull request to resolve it: Pull Request

The check to see if the URL changed does not pass the nextProps.url to the getUrl() function, it passes the current props. I updated the code to use the nextUrl if it exists.

[coopermaruyama]

PR is merged and new version is published to npm. Thanks!