Binding data at runtime with React

Binding data at runtime with React

Posted by: hfeldman on 28 January 2020, 10:31 am EST

• 

  hfeldman

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 January 2020, 10:31 am EST

  Hi,
  
  I understand there is a way to bind data for ActiveReportsJS at runtime but I’m unsure as to how to pass this data in using my React component. Also, considering the data doesn’t come in until runtime, how may I set up these required fields in a table without specified datasets?

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

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 28 January 2020, 8:27 pm EST

  Hello,

  Currently, I have not find any way to add the datasource at runtime. Hence, I have escalated the issue to our development team (ARJ-1733)and will inform you once I get any information from them.
  
  Thanks,
  
  Mohit

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 2 February 2020, 10:34 pm EST

  Hello,

  Could you please share the complete use case of your scenario so that I can provide the same to the development team to achieve your requirements.

  Thanks
  
  Mohit

• 

  hfeldman

  • Post Options:
  • Link
    Copy

  Posted 3 February 2020, 4:09 pm EST

  Suppose I have some JSON in my React App. I am wondering how I would be able to dynamically pass that into the ReportJS Viewer, hence, populating report tables without a set data source.
  
  I was hoping this is similar to passing in Parameters although I am then unsure to how the table would know to use the data.

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

• 

  hfeldman

  • Post Options:
  • Link
    Copy

  Posted 3 February 2020, 4:10 pm EST - Updated 30 September 2022, 6:39 am EST

  

  1016×782 12.8 KB

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 4 February 2020, 8:55 pm EST

  Hello,

  Request to please confirm that only the contact of data will change and structure will remain the same at runtime ? or the whole structure will change at runtime?

  Thanks,
  
  Mohit

• 

  hfeldman

  • Post Options:
  • Link
    Copy

  Posted 5 February 2020, 10:17 am EST

  Yes, only the content will be dynamically changed, The structure itself will be static and can be hard coded in the designer.

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 6 February 2020, 12:49 am EST

  Hello,

  Thanks for the explanation. We are working on this and let you know once we found a solution for this.

  Thanks,
  
  Mohit

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 6 February 2020, 7:57 pm EST

  Hello,

  You can achieve the same using the following way:

  While creating the report:
  
  1:Add report parameter with Name=“Data” and Type=“string”
  
  2: Set DataSource connection string to

  ="jsondata=" & Parameters!Data.Value
  
  

  then update render method:

  
  render() {
    const data = [
      { Name: 'Bob', Age: '15', },
      { Name: 'Wendy', Age: '28', },
      { Name: 'Spud', Age: '49', },
    ]; 
  
    const parameters = {
      TestParam: ['Hello World'],
      Data: [JSON.stringify(data)],
    };
  
     return (
      <div className="App" style={{ height: '1000px' }} >
        <Viewer report={{ Uri: "TestTimesheet.rdlx-json", Params: parameters }} />
      </div>  );}
  
  

  how may I set up these required fields in a table without specified datasets?
  
  You can do one thing, create datasource and dataset with valid data and bind the table with the dataset.
  
  After that, you can just replace connection string in the connection string with following one:

  
  ="jsondata=" & Parameters!Data.Value
  

  Hope it helps.

  Thanks,
  
  Mohit

• 

  hfeldman

  • Post Options:
  • Link
    Copy

  Posted 10 February 2020, 10:48 am EST

  Thank you, this method is working wonderfully.