How to Build a Multiple Pages in Google Apps Script Web App with Navigation Tutorial

| September 3, 2023 | Other | 2 Comments

In this comprehensive tutorial Multiple Pages in Google Apps Script Web App, you’ll discover how to harness the power of Google Apps Script to create a dynamic web application. We’ll guide you through the process of building a user-friendly web app featuring a common header with a navigation bar and menus. The magic happens when you click on a menu item, seamlessly loading different HTML pages. Elevate your web development skills and boost your website’s this engaging tutorial!

Multiple Pages in Google Apps Script Web App

जब भी आप कोई Web App बनाते हैं तो हमे एक से अधिक पेज को हमारे Home Page से Connect करना होते हैं , उसके लिए आप Apps Script मे इस Concept का उपयोग कर सकते हैं। इस Example मे हमने एक Home Page पर 3 अन्य Pages को Connect करने का Logic आपको बताया हैं।

1. Common Header (header.html)

इस एक Common Page हैं जीतने भी Pages आप Link करने वाले हैं उन्मे जो भी Common Code हो वह आपको इस Page मे लिखना हैं ताकि आपके सभी Pages एक जैसे दिखाई दे । इस page मे हमने Bootstrap और jQuery को Add किया हैं । साथ मे कुछ Common CSS भी लिखी हैं ।

Multiple Pages Apps Script Web App
<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>

  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">  

  <style>
    body {
      background-color:  rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%);
    }

    .mycolor {
      background-color: #3a67b1;//#6d3b89;
    }

    .color {
      color: #3a67b1; //#6d3b89;
    }

  </style>

  <script> </script>
</head>

<nav class="navbar navbar-expand-lg mycolor px-2" >
  <h3 class=" text-white">Imagination</h3>
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active text-white"  href="<?= myURL(); ?>">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link  text-white"  href="<?= myURL(); ?>?page=mypage1">Page1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link  text-white"  href="<?= myURL(); ?>?page=mypage2">Page2</a>
        </li>
          <li class="nav-item">
          <a class="nav-link  text-white"  href="<?= myURL(); ?>?page=mypage3">Page3</a>
        </li>
  </ul>
</nav>
  • myURL() : यहा से हमने Apps Script के के Function को Call किया हैं। जिससे की Page की URL Return होती है।
  • page=mypage1: यहा से हमने page parameter मे page का नाम pass किया हैं जिससे की हम Apps Script मे उपयोग कर HTML page को display करवाएंगे।

2. Home Page (mail.html)

हमारे हमारी Application का Home Page हैं जब भी आप Successfully Login करेंगे तो सबसे पहले इस Page पर आएंगे। 

<!DOCTYPE html>
<html>

<body onload="">
  <?!=includeHeader();?>
  <br><br><br><br><br><br>
  <center><h1>Welcome to Home Page</h1></center>
</body>

</html>
  • <?!=includeHeader();?> : इस लाइन का उपयोग कर हमने जो पहले header.html बनाया था उसको लिंक किया हैं ऐसा करने से हमे Code कम लिखना होता हैं और साथ मे जब भी हम कोई Changes करते हैं तो व एक साथ सभी pages पर भी हो जाता है।

3. Page 1 (mypage1.html)

निम्न सभी Pages केवल Example के लिए ही दिए हैं ऐसे आप कितने ही Pages बना सकते हैं। इसमे भी हमने Common Header को Include किया हैं। 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
      <?!=includeHeader();?>
 
       <br><br><br><br><br><br>
       <center><h1>Welcome to Page 1</h1></center>
  </body>
</html>

4. Page 2 (mypage2.html)

निम्न सभी Pages केवल Example के लिए ही दिए हैं ऐसे आप कितने ही Pages बना सकते हैं। इसमे भी हमने Common Header को Include किया हैं। 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
      <?!=includeHeader();?>
       <br><br><br><br><br><br>
       <center><h1>Welcome to Page 2</h1></center>
  </body>
</html>

5. Page 3 (mypage3.html)

निम्न सभी Pages केवल Example के लिए ही दिए हैं ऐसे आप कितने ही Pages बना सकते हैं। इसमे भी हमने Common Header को Include किया हैं। 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
      <?!=includeHeader();?>
       <br><br><br><br><br><br>
        <center><h1>Welcome to Page 3</h1><center>
  </body>
</html>

6. Apps Script Code (Code.gs)

अब यहाँ से Server Side Code की शुरुआत होती हैं। इसमे हमने मुख्य रूप से केवल 3 Function का ही उपयोग किया हैं। doGet(), includeHeader(), myURL() , साथ मे जो Session से Related Code था उसे Comment किया हुवा हैं उसके लिए आपको मे एक अलग से Article मे Secure Login ओर Logout की Coding Provide कर दूंगा। 

function doGet(e)
{
   //var output = HtmlService.createTemplateFromFile('login');
   //var sess = getSession();
   //if (sess.loggedIn) {

      let page = e.parameter.page;         //01
      if (page == null) page = "main";     //02
      var output = HtmlService.createTemplateFromFile(page); //03
  //}
  return output.evaluate();  //04
}

function includeHeader()   //05
{
   return HtmlService.createTemplateFromFile("header.html").evaluate().getContent();
}

function myURL()  //06
{
  return ScriptApp.getService().getUrl();
}
  • 01: यहा पर हमने parameter मे से page वाले Attribute को page Variable मे Get किया हैं ।
  • 02: यदि page variable मे कोई भी वैल्यू नहीं हुई तो यह main page को open करे इसलिए null के case मे page मे main को set कर दिया हैं।
  • 03: जो भी page का नाम हमारे द्वारा pass किया जाएगा उसके html को HtmlService.createTemplateFromFile इस Code के माध्यम से एक output variable मे सेट कर दिया जाएगा।
  • 04: अब जो भी हमने Output Html बनाया हैं उसे Evaluate कर हम Return कर देंगे ताकि वह Screen पर Display होने लगे।
  • 05: यहा पर हमने includeHeader() Function बनाया हैं । जो की header.html मे जो HTML Code लिखा हैं उसे Evaluate कर उसके Content को Return कर देगा।
  • 06: यहा पर हमने myURL() Function बनाया हैं जो की Current URL को return करता हैं ताकि हम URL का उपयोग कर फिर से Page को Call कर सके ।

Summary of Multiple Pages in Google Apps Script Web App

इस Multiple Pages in Google Apps Script Web App Article मे हमने आज यह सीखा की किस तरह से हम एक ही Application मे अलग अलग HTML pages को link कर सकते हैं।

आशा हैं मुझे आपको किस तरह से Multiple Pages Web app Apps Script मे बना सकते हैं बहुत ही अच्छे से समझ मे आ गया होगा। इस Article से Related कोई भी Issue हो या कोई Doubt हो तो आप मुझे निःसंकोच Comment कर सकते हैं। यह Article कैसा लगा ? बताना न भूले , मिलते हैं next Article मे , Thanks for Reading ।

हमारे अन्य आर्टिकल

Related Posts

2 Comments
  1. Mehedi Hasan Reply

    Your Code Successfully Run, Thanks and Congratulations for your valuable Post.

Add a Comment

Your email address will not be published. Required fields are marked *