tableau-react problem to show up full screen mode icon in tableau server or tableau public

Question

I can't get the full-screen icon from tableau server or tableau public to appear.

In fact, I utilised React for my front-end and the tableau-react plugin to incorporate tableau URLs from the server or public.

Here's a look at my code.

const options = {
                hideTabs: true,
                width: '100%',
                height: 1000,
                allowFullScreen: true
            };

const urlTableau  = 'http://public.tableau.com/views/CottonwoodPassAreaMap/WayPointsbetweenCottonwoodpassandCrabtreeMeadows?:embed=y&:display_count=yes';
this.setState({
    iframeTableau: <TableauReport
                    url={urlTableau}
                    options={options}
                   />
            });

Is there something wrong with my code?

Thank you very much.

Answer 1

The tableau-react documentation says that the supported props for options are:

const options = {
  height: 100,
  width: 100,
  hideTabs: true,
  // All other vizCreate options are supported here, too
  // They are listed here: https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm#vizcreateoptions_record
};

I can't find the allowFullScreen option on the VizCreateOptions Record, so I'm guessing you'd have to construct a distinct iframe that includes the TableauReport component, then make the iframe fullscreen.

Unlock the Power of Data Visualization with Our Tableau Course.