Create Application using Google Apps Script

The given code is written in Google Apps Script. It has three functions, namely doGet(), include(filename), and sub(vl).

The doGet() function returns an HTML template created from the 'index' file. It sets the title of the template to 'SGS-L Tracker' and adds a meta tag to set the viewport to the width of the device and initial scale to 1. It also allows all websites to frame the template.

The include(filename) function returns the content of an HTML file.

The sub(vl) function takes a parameter vl and uses it to search for a value in the first column of the 'Sheet1' sheet of the active spreadsheet. It creates a table with the values in the matching row and returns the HTML code for that table.

This is an HTML code snippet that contains a form for inputting a UNID and viewing the status associated with it. The form is centered on the page and includes an image header, a subheader, a container for the input form and a container for displaying the result.

The form includes an input field for the UNID, with an associated label and a placeholder. There is also a button for submitting the form, which triggers the JavaScript function view_status() when clicked.

The view_status() function retrieves the value of the UNID input field and displays a loading message in the result container. It then calls a Google Apps Script function sub() with the UNID value as an argument, using the google.script.run method. If the sub() function succeeds, the res() function is called with the result value as an argument, which is then displayed in the result container. If the sub() function fails, the res() function is called with an empty argument, and a "No record!" message is displayed in the result container.

The HTML code also includes a meta tag for setting the viewport width and initial scale, and two link tags for importing CSS stylesheets from external sources. The include('css') statement is used to include additional CSS code that is shown in next snippet.

<!DOCTYPE html> <html> <head> <base target="_top"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <?!= include('css'); ?> </head> <body> <center><header> <div id="imgheader"> <img src="https://i.postimg.cc/FRqpWNmd/K12-Generic-Form-Banner-preview.png"width="60%"> </div> </header> <div id="subheader"> </div> <div id="cont"> <p> Input your UNID and click the button to view your status.</p> <label>UNID : </label> <input type="text" id="UNID" onkeydown="if(event.keyCode == 13){document.getElementById('view').click()}" placeholder="e.x. 2016b-111111"> <button onclick="view_status()" id="view">View Status </button> </div> <div id="result" style="display: block;"> </div> </center> <script> function view_status(){ var vl = document.getElementById('UNID').value; if(vl!=''){ var lo = '<i class="fa fa-circle-o-notch fa-spin" style="font-size:12px"></i> Fetching...'; document.getElementById("result").innerHTML = lo; google.script.run.withFailureHandler(res) .withSuccessHandler(res) .sub(vl);}else{document.getElementById("result").innerHTML='Please enter UNID.'}} function res(v){ if(v===''){ var re = 'No record!';}else{var re = v;} document.getElementById("result").innerHTML = re;} </script> </body> </html>

This is a CSS code block, which is used to style the HTML elements on a webpage. The code includes various styling rules for different elements, such as font styles, background colors, padding, border, and more. These styles are applied to elements with specific IDs or class names, such as "cont", "view", "subLabel", "td", etc. This particular code block includes styles for tables, buttons, and labels with different background colors and font weights. The code also includes a rule for hiding an element with an ID of "result".

CodyLab

Create Application using Google Apps Script

Post a Comment

School Management Software || Manage Classes

Create School Management System || Student list

How to create a template for AppsScript project

Online school result using google sheet and apps script

Admission form for School Management System || Apps script project