How to load functions based on the page title of an HTML page created and shown using showModalDialog()?

user_11832197 0
Viewed 37

I'm creating a web page, whose title may change depending on which button the user clicks. When the page loads its HTML part, I'd like to run a function of 2 depending on the pageTitle passed.

I'm not sure why this is not working the way it and I'd appreciate a helping hand:

Function to display the page

function showPoPage(poPage, pageTitle) {
  const template = HtmlService.createTemplateFromFile(poPage);
  const html = template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  html.setWidth(1400).setHeight(800)
  SpreadsheetApp.getUi().showModalDialog(html, pageTitle);
}

The script piece which doesn't seem to be running correctly

...(embeded into the HTML)
<script>
const pageTitle = document.getElementByClassName('modal-dialog-title-text').innerText;
console.log('Page Title found on top: ' + pageTitle)// Nothing shows in the logs
if (pageTitle == 'Edit PO') {
  loadPODataToEdit();
} else if (pageTitle === 'Fabric-Colombia PO') {
  loadOrderPosFromSS();
  loadUnit();
}
</script>

The error in the console

Uncaught TypeError: document.getElementByClassName is not a function

I'm not sure what the rules are for running this script containing such criteria and behavior.

Thank you!

google-apps-script
1 Answers

From your showing script, it seems that you are using HTML template. I thought that this might be able to be used for achieving your goal. When this is reflected in your script, how about the following modification?

Google Apps Script side:

function showPoPage(poPage, pageTitle) {
  const template = HtmlService.createTemplateFromFile(poPage);
  template.title = pageTitle; // <--- Added
  const html = template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  html.setWidth(1400).setHeight(800)
  SpreadsheetApp.getUi().showModalDialog(html, pageTitle);
}

HTML side:

...(embeded into the HTML)
<script>
const pageTitle = "<?!= title ?>"; // <--- Modified
console.log('Page Title found on top: ' + pageTitle)// Nothing shows in the logs
if (pageTitle == 'Edit PO') {
  loadPODataToEdit();
} else if (pageTitle === 'Fabric-Colombia PO') {
  loadOrderPosFromSS();
  loadUnit();
}
</script>
  • By this modification, you can run the functions by the value of pageTitle.
user_71086530
Related