Best Practice for Server --> Client via Scriptlets, onSelectionChange

[semireg]

If I add a property to a template in ui.js such as:

  const template = HtmlService.createTemplateFromFile('sidebar');
  template.uuid = 'abc123';
  const html = template.evaluate();
  html.setTitle('My Sidebar');
  SpreadsheetApp.getUi().showSidebar(html);

How do I access "uuid" in React via Scriptlets?

I've tried modifying sidebar/index.html

<script>
      window.uuid = JSON.parse(<?= uuid ?>);
      console.log(`window.uuid:${window.uuid}`);
</script>

But I'm not seeing anything. It's probably obvious... 😄

On another note... is there any way to push data from server to client when onSelectionChange is called?

[jmatthewpryor]

@semireg did you ever work out how to solve this?

On another note... is there any way to push data from server to client when onSelectionChange is called?

[jmatthewpryor]

Hi @enuchi - can you make any suggestions about how to cause updates to a sidebar UI when the user changes selection and an onSelectionChange() server side SimpleTrigger is called?

[enuchi]

Not sure. You'll have to get creative because I doubt there's an official way to do this.

You could try writing to the properties service from the trigger and polling changes from the UI?

[jmatthewpryor]

Thanks @enuchi - how would you suggest implementing the polling on the client side?

[enuchi]

Something like setInterval(() => {serverFunctions.checkIfUpdated.then(...)}, 3000)

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

[jmatthewpryor]

I've got polling working fine, and it calls back a serverFunction to get the active sheet & row, but I can't see how to use the PropertiesService from the client code?

Or would that just be to hold the "updated state" in the server code and then on interval the client would call that back & grab any updated state (if it was updated) - calling via a server function?

[enuchi]

Correct

[jmatthewpryor]

thanks
FWIW this node package worked a treat for the polling/interval
https://www.npmjs.com/package/@use-it/interval

[shermansiu]

I found a way to load variables from templates:

In index.html, you can add this:

  <!-- Add any external scripts and stylesheets here -->
  <script>
      <? const myVar = foo(); ?>  /* This calls the backend function */
      globalThis.myVar = <?!= JSON.stringify(myVar); ?>;
  </script>

In your React file, you then define this at the top:

// eslint-disable-next-line @typescript-eslint/no-namespace
declare namespace globalThis {
  const myVar: MyType;
}

You can then use globalThis.myVar wherever you need. (FYI: This also answers #76)

---

Note that this breaks the local development environment though, so we'll need to patch it by creating a copy of index.html called dev.html that spoofs these variables:

  <!-- Add any external scripts and stylesheets here -->
  <script>
      globalThis.myVar = 42;
  </script>

In vite.config.ts, make the following changes:

const clientEntrypoints = [
  {
    name: 'CLIENT - Dialog Demo',
    filename: 'dialog-demo', // we'll add the .html suffix to these
    template: 'dialog-demo/index.html',
+   devTemplate: 'dialog-demo/dev.html',
  },

and in the buildConfig function in the same file:

          contents
            .toString()
            .replace(/__PORT__/g, String(PORT))
-           .replace(/__FILE_NAME__/g, entrypoint.template),
+           .replace(/__FILE_NAME__/g, entrypoint.devTemplate),

You can also use import.meta.env.PROD throughout your React frontend code to determine whether you can call the Google Apps Script backend or not. (As of the time of writing, you need to add "vite/client" to compilerOptions.types in tsconfig.json to get the types for import.meta.env to load)