reactjswebnpmopenmrs

Rendering a services in a ReactJS component


I'm trying to rendering an external service in an ReactJS component. I'm working in an OWA for OpenMRS.

This is the React app, this is a component. When I push in some button this should render the next form in the same that component.

enter image description here

As you can see in the URL, the form is not an HTML page, also an service. In some post I read for render html files, this not the case. How can I work with that in my component?

enter image description here


Solution

  • I read the docs and found an OpenMRS feature that allows render any OpenMRS page in some panel.

    This is the code and pic for I wanted to do

    ...
    ...
    import OpenMRSView from './openmrsView';
    ...
    ...
    renderForm(url_report) {
        let url = `http://${this.state.server}/` + url_report
        console.log(url);
        this.setState({"url": url});
    }
    
    render() {
        ....
        ....
        ....
        if(this.state.seguro=="reportes"){
            return(
                <div>
                    <Button id="button_reportes" className="menu_button" style={ styles.button } onClick={() => this.renderForm(JASPER_REG_RAPIDO_ADMISIONES)}>
                    Reporte Registro Rapido
                    </Button>
                    <Button id="button_reportes" className="menu_button" style={ styles.button } onClick={() => this.renderForm(JASPER_ROTULO_ADMISIONES)}>
                    Reporte Rotulo
                    </Button>
                    <Button id="button_reportes" className="menu_button" style={ styles.button } onClick={() => this.renderForm(JASPER_GARANTIA_ADMISIONES)}>
                    Reporte Garantia
                    </Button>
                    <Button id="button_reportes" className="menu_button" style={ styles.button } onClick={() => this.renderForm(JASPER_HOJA_INGRESO_ADMISIONES)}>
                    Reporte Hoja de Ingreso
                    </Button>
                    <Button id="button_reportes" className="menu_button" style={ styles.button } onClick={this.aInicio}>
                    Atras
                    </Button>
                    <Panel bsStyle="info" theme="chemical">
                        <Panel.Body>
                            <OpenMRSView url={this.state.url}/>
                        </Panel.Body>
                    </Panel>
                </div>
            )
        }
    
    }
    

    enter image description here