CODEWITHSUNDEEP
javascripthtmlcssgoogle-apps-script
kanu priya
kanu priya

Reputation: 108

How can I call another HTML page from another html page in google appscript

I have created two pages in my project named as "Input.html" and "output.html" wherein on click submit button in input.html, the output will print in output.html

however I do not have idea that how can I call another page from one page

code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Input')
      .evaluate().setTitle("GL StyleGuide").setFaviconUrl("https://fonts.ab24dp.png");
}

Have a text area in Input page and a submit button on click of which I want my output to print on output.html page. Modified : Sample html for Input.html is as follows

<div>
  <label id="label">Please Enter CSS</label>
      <textarea id="input-textarea"></textarea>
      
      <?var url = ScriptApp.getService().getUrl();?><a href='<?=url?>?v=form'><input type='button' id="submit" name='button' onclick="addRow()" value='Get Style Guide'></a>      
</div>

Upvotes: 0

Views: 519

Answers (1)

Amit Singh
Amit Singh

Reputation: 188

So one approach which I am using in one of my web apps is that I have a <div id = "app"></div> in my page where I want to load another HTML.

Then I have this function to evaluate the view in my code.gs

function loadPartialHTML_(params) {
  var htmlSrv = HtmlService.createTemplateFromFile(params);
  var html = htmlSrv.evaluate().getContent();
  return html;
}

Then in my main Html, I have this function which takes myView Html and populates it in defined div.

function loadView(options){ //loadView Function to Access Server side functions with options being an object of Parameter


var id = typeof options.id === "undefined" ? "app" : options.id; //checking if Id of Element is undefined then "app" will be used else parameter passed

var cb = typeof options.callback === "undefined" ? function(){} : options.callback; //if undefined then a blank function else function called

google.script.run.withFailureHandler(function (e){
    displayToast("errorNotification",e.message);
    loadingEnd();
}).withSuccessHandler(function(html){ //accessing server side function which will be supplied in object with "func:" which will return HTML

document.getElementById(id).innerHTML = html; //this is a call back funtion which gets html from server side and setting defined element to that return

typeof options.params === "undefined" ? cb() : cb(options.params); //if parameters were not supplied thn callback funtion with parameters else with parameters
})[options.func]();
}

myView HTML would be an HTML file only with elements, no header, body, etc.

You can use an event handler to load the view after the event happens. Also, this is not my work I have learned this from a great Youtube channel here the link for this strategy in case you got stuck somewhere : https://www.youtube.com/watch?v=6zFowiTNhqI&t=1476s

Upvotes: 1

Related Questions