Call a function in Custom Component

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

  body {
    margin: 0;
<script src="" crossorigin></script>
<script src="" crossorigin></script>
<script src=""></script>
<script src=""></script>

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

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

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
          onClick={() => triggerQuery(model.queryToTrigger)}
          Trigger {model.queryToTrigger}
          onClick={() =>
            modelUpdate({ displayText: "much custom, such flexibility. wow." })
          Update Model

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

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' }

    .then(function(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...?




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

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..?

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


Please, can you tell how can I do this?

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!