Posts made by talJoffeExelate

I actually tried using jsreport.render and couldn't get it to work. but this code works great thanks!
It is likely though that I will have requirements for larger data so I might need the async option but I'll check first how it works with render.

Thanks!

Hi,

I'm trying to embed a report in React (that's the framework we use in my firm).
I created a simple React app like so:

import React from 'react';
import jsreport from 'jsreport-browser-client-dist'
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            report: "",
            reportScript: ""
        }
    }

    componentWillMount() {
        jsreport.serverUrl = 'http://localhost:5488';
        let reportRequest = {template: {shortid: 'HJH11D83ce'}}
        // let temp = "this is temp"
        jsreport.renderAsync(reportRequest)
            .then(res => {
                let htmlResponse = res.toString()
                let extractedScript = /<script>[\s\S]*<\/script>/g.exec(htmlResponse);
                // console.log('html is: ',htmlResponse)
                // console.log('script is: ',extractedScript)
                this.setState({report: htmlResponse})
                this.setState({reportScript: extractedScript})
            })
    }

    render() {
        let test = this.state.report
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h2>Welcome to React</h2>
                </div>
                <div id="reportPlaceholder">
                    <p>there should be a report here...</p>
                    <div dangerouslySetInnerHTML={{__html: test}}/>

                </div>
            </div>
        );
    }

    componentDidUpdate() {
        // this runs the contents in script tag on a window/global scope
        let scriptToRun = this.state.reportScript[0]
        if (scriptToRun !== undefined) {
            // let cleanScript = scriptToRun.replace('<script>', '').replace('</script>','')
            let scriptLines = scriptToRun.split("\n")
            scriptLines.pop()
            scriptLines.shift()
            let cleanScript = scriptLines.join("\n")
            console.log('running script ',cleanScript)
            window.eval(cleanScript)
        }

    }
}

export default App;

it works. but the script running felt a little hacky... (I tried embedding the orders template which has script to populate a chart on a canvas)

Is there a better way to do this?

Hi all,

I'm not very strong in Front-end so sorry if this question is trivial..
I got the idea how to create a report using jsreport and desplaying it in UI (like this example: https://playground.jsreport.net/studio/workspace/SkDFywLpe/3).

My question is, is there a way I can make the table more interactive - sort columns, hide columns, re-arrange columns, paginate table etc...

it is possible that this is more of a javascript question but probably someone here already tried to solve this..

thanks