React and StimulSoft

[dikan]

When will be published Ract/client side rendering example?

Best regards,

dikan

[Andrew]

Hello dikan,

We have plans to create an example. This is in our to-do list.

Hope this will be released soon.
Thank you.

[grbspltt]

This is how I am doing it, using TypeScript and Material-UI.
I have 3 reports available to select, default report loads automatically.

Code: Select all

import React, {PureComponent} from 'react'
import {withStyles} from 'material-ui/styles';
import {StyleRulesCallback} from 'material-ui';
import Paper from 'material-ui/Paper';
import Menu, {MenuItem} from 'material-ui/Menu';
import Button from 'material-ui/Button';
const win:any = window;
let Stimulsoft: any;

class ReportViewerContainer extends PureComponent<any, any> {
  private viewer: any;

  constructor(props: any) {
    super(props);
  }

  componentWillMount() {
    Stimulsoft = win.Stimulsoft;
    const CampusReport = new Stimulsoft.Report.StiReport(),
      CampusReportNoDollars = new Stimulsoft.Report.StiReport(),
      SummaryReport = new Stimulsoft.Report.StiReport();
    CampusReport.loadFile('/reports/CampusSubCatRpt.mrt');
    SummaryReport.loadFile('/reports/SubCatSumRpt.mrt');
    CampusReportNoDollars.loadFile('/reports/CampusSubCatRptNoDollars.mrt');
    this.setState({
      summaryReport: SummaryReport,
      campusReport: CampusReport,
      currentReport: SummaryReport,
      campusReportNoDollars: CampusReportNoDollars
    })
  }

  componentDidMount() {
    this.setupViewer();
  }

  setupViewer = () => {
    const options = new Stimulsoft.Viewer.StiViewerOptions();
    this.viewer = new Stimulsoft.Viewer.StiViewer(options, 'viewer', false);
    this.viewer.report = this.state.currentReport;
    this.viewer.renderHtml('viewer');
  };

  renderReport = () => {
    this.viewer.report = this.state.currentReport;
  };

  selectReport = (prop: string) => {
    return (e: any) => {
      e.preventDefault();
      if(this.state.currentReport === this.state[prop]){
        return Promise.resolve().then(this.closeMenu);
      }
      return this.closeMenu()
        .then(() => {
          return new Promise((resolve) => {
            this.setState({currentReport: this.state[prop]}, resolve)
          })
        })
        .then(this.renderReport)
    }
  };

  openMenu = (e: any) => {
    this.setState({anchorEl: e.currentTarget})
  };

  closeMenu = () => {
    return new Promise((resolve) => {
      this.setState({anchorEl: undefined}, resolve)
    })
  };

  render() {
    const {anchorEl} = this.state,
      selectCampusReport = this.selectReport('campusReport'),
      selectSummaryReport = this.selectReport('summaryReport'),
      selectCampusReportNoDollarsReport = this.selectReport('campusReportNoDollars');

    return (
      <Paper className={this.props.classes.root}>
        <Button
          variant="raised"
          onClick={this.openMenu}
          aria-owns={anchorEl ? 'report-menu' : undefined}
          aria-haspopup="true"
        >
          Select Report
        </Button>
        <Menu
          id="report-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.closeMenu}
        >
          <MenuItem
            onClick={selectSummaryReport}
          >
            Summary Report
          </MenuItem>
          <MenuItem
            onClick={selectCampusReport}
          >
            Campus Summary Report
          </MenuItem>
          <MenuItem
            onClick={selectCampusReportNoDollarsReport}
          >
            Campus Summary Report (No Dollars)
          </MenuItem>
        </Menu>
        <div id="viewer">&nbsp;</div>
      </Paper>
    );
  }
}

const styles: StyleRulesCallback<'root'> = (theme: any) => ({
  root: theme.mixins.gutters({
    margin: '1rem auto',
    padding: '0.5rem 0.75rem',
    maxWidth: '95vw'
  })
});

export default withStyles(styles)(ReportViewerContainer);

[Lech Kulikowski]

Hello,

Thank you for the provided sample.