Call a function in Custom Component

Queries and Resources
1

Hi - I have the framework of a custom component that will generate a PDF based on some HTML and CSS.

<style>
  body {
    margin: 0;
  }
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>


<div id="react"></div>

<script type="text/babel">
  const { Button, Card, CardContent } = window["material-ui"];

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <Card>
      <CardContent>
        <div>{model.displayText}</div>
        <Button
          color="primary"
          variant="outlined"
          onClick={() => triggerQuery(model.queryToTrigger)}
        >
          Trigger {model.queryToTrigger}
        </Button>
        <Button
          color="primary"
          variant="outlined"
          onClick={() =>
            modelUpdate({ displayText: "much custom, such flexibility. wow." })
          }
        >
          Update Model
        </Button>
      </CardContent>
    </Card>
  );

  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>

I need to call the following function from a button click (essentially replacing the current code for the onClick event)

 function pdprint() {
   var opt = {
      margin:       0.5,
      filename:     'myfile.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  };

  window.html2pdf().set(opt)
    .from(document.getElementById("react"))
    .toPdf()
    .output('bloburl')
    .then(function(pdfas) {  window.open(pdfas) } );
 }

but I can't for the life of me work out the correct syntax to call the function, or placement of the function in the code. Is anyone able to help please...?

Thanks

Adam

2

Hello,

Is the button within your component or a Retool Button?
In the latter case, you can change a property of the component' model from the button click and listen within your component that change to trigger whatever you want.

Hope this help.

1 Like
3

Hi there. Thanks for the reply. Currently the button is in the custom component. Out of interest, if the button were a Retool button, do you know how I could 'listen' for the changes in the model..?

4

For anyone else looing at this, I finally figured it out! Very simply the onClick event needs to be
onClick={pdprint}

5

Hello

Please, can you tell how can I do this?

6

You can set a query to run automatically when inputs change. That way, if one of its inputs is the custom component model it will act as a listener. That being said, it's also possible to trigger queries from inside your custom component using triggerQuery, here's anexample without React, and here's an example with it!