Passing Parameters for React Viewer

Posted by: hfeldman on 13 January 2020, 10:39 am EST

  • Posted 13 January 2020, 10:39 am EST

    Hi,
    I'm trying to implement the viewer for my ReactJS front end. However, I'm completely unsure as to how parameters are meant to be passed in when creating the report? I've tried adding it through 'reportParams' similar to the pureJS demo but this clearly does not work.

    Thanks,
    Harrison


    import React from 'react';
    import { Viewer } from '@grapecity/activereports-react';
    import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';
    import '@grapecity/activereports/styles/ar-js-viewer.css';

    class Portal extends React.Component {
    _viewer = Viewer;

    render() {
    const parameters = [
    { Name: 'TestParam', Value: ['Hello World']}
    ];

    return (
    <div className="demo-app" style={{ height: '1000px'}} >
    <Viewer
    report={{ Uri: "Test_Report.rdlx-json", ReportParams: parameters}}
    sidebarVisible={true} toolbarVisible zoom='100%'
    reportParams={parameters}
    />
    </div>
    );
    }
    }
    export default Portal;
  • Marked as Answer

    Replied 14 January 2020, 2:01 am EST

    Hello,

    Please use the following line of code:



    import React from 'react';
    import './App.css';
    import '@grapecity/activereports/styles/ar-js-viewer.css';
    import { Viewer } from '@grapecity/activereports-react';

    class App extends React.Component {
    _viewer = Viewer;

    render() {
    const parameters = { TestParam:['Hello World']};
    return (<div className="demo-app" style={{ height: '1000px'}} >
    <Viewer
    report={{ Uri: "test.rdlx-json", Params:parameters }}
    sidebarVisible={true} toolbarVisible zoom='100%'
    />
    </div>);
    }
    }

    export default App;



    Hope it helps.

    Thanks,
    Mohit
  • Replied 14 January 2020, 10:31 am EST

    Thanks Mohit,
    This works perfectly
  • Replied 27 January 2022, 12:18 am EST

    I am trying pass the ID of a record to pull data back. It is successful from the designer, when hard coded in the datasource parameters (or dataset). But when sent from react client, I have no success. I have left the parameter, and removed the parameter from the designer and saved the json...

    const parameters = { ncrReportId: 14 };
    <Viewer report={{ Uri: 'ncrReport.rdlx-json', Params: parameters }} />

    To be clear... I wish to pass the parameter that is to be a QueryParameter... not filter the returning dataset.

    Any help would be appreciated.

    Also, can I pass in header (Authorization). I won't need should we implement in our app, just would be helpful in the POC.

    Thanks
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels