Send a parameter from the web application and trigger a pop-up dialog box

Need help with passing a search term from a Google web app to display results. Facing issues with a blank screen upon submission. Looking to have the form show results when submitted. The main code functions correctly within the logger, now focusing on UI and form functionality.

Any assistance is welcomed!

Here is the current code:

CODE:

function SearchFiles() {
//Replace 'mysearchinput' with your search term
var searchterm ="'mysearchinput'";
var searchFor ="title contains " + searchterm;
var owneris ="and '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3841574d4a5d555951547841574d4a5c5755595156165b5755">[email protected]</a>' in Owners";
var names =[];
var fileIds=[];
var files = DriveApp.searchFiles(searchFor + owneris);
while (files.hasNext()) {
  var file = files.next();
  var fileId = file.getId();// To get FileId of the file
  fileIds.push(fileId);
  var name = file.getName();
  names.push(name);

}

for (var i=0;i<names.length;i++){
Logger.log(names[i]);
Logger.log("https://drive.google.com/uc?export=download&id=" + fileIds[i]);

}

}

function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}

function processForm(formObject) {
Logger.log('I was called!');
 // Display search term results here.
}

HTML:

 <!DOCTYPE html>
 <html>
 <head>
 <base target="_top">
      <script>
    function handleFormSubmit(formObject) {
    google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
  }
    function onFailure(error) {
    var div = document.getElementById('output');
    div.innerHTML = "ERROR: " + error.message;
  }
 </script>
 </head>
 <body>
 Hello, World!
 <form id="myForm" onsubmit="handleFormSubmit(this)">
  <input type="text" name="search">
  <input type="submit" value="Submit" />

</form>
<input type="button" value="Close"
    onclick="google.script.host.close()" />

SEARCH FUNCTION:

function SearchFiles() {
  Logger.log('I Searched Files');
  //Please enter your search term in the place of Letter
  var searchterm ="'Whatevertextisinthesearchbox'";
  var searchFor ="title contains " + searchterm;
  var owneris ="and 'Youremail@yourdomain' in Owners";
  var names =[];
  var fileIds=[];
  var files = DriveApp.searchFiles(searchFor + owneris);
  while (files.hasNext()) {
    var file = files.next();
    var fileId = file.getId();// To get FileId of the file
    fileIds.push(fileId);
    var name = file.getName();
    names.push(name);

  }

  for (var i=0;i<names.length;i++){
    var filesreturned = {
      name:names[i],
      urls:"https://drive.google.com/uc?export=download&id=" + fileIds[i]
     
    }
     Logger.log(filesreturned.name + " - " + filesreturned.urls);
     return(filesreturned);
  }

}

Answer №1

If you're looking to display a simple "hello world" message on button click, here is the code for that. Additionally, I've included a snippet to demonstrate how data can be passed between JavaScript and AppScript.

Index.html file

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function displayMessage()
    {
    google.script.run.withSuccessHandler(helloWorld).parseDataFromAppscript();
    }

    function helloWorld(stringText)
    {
    document.writeln(stringText);    
    }
    </script>
  </head>
  <body>
    <input type="button" value="submitButton" name="submitButton" onclick="displayMessage()"/>    
  </body>
</html>

Code.gs file

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');
  return template.evaluate()
      .setTitle('Hello World')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function parseDataFromAppscript()
{
  return "Hello World!";
}

To run this, go to publish -> deploy as web app -> update. And then click latest code.

If you need clarification on any part, feel free to ask. Assuming you already have familiarity with HTML, JavaScript, and the google.script.run method. :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for including dependencies from a globally installed npm package into a local package

I've noticed that although I have installed a few npm packages globally, none of them are showing up in any of my package.json files. What is the recommended npm command to automatically add these dependencies to all of my package.json files? ...

Initiate a jQuery modal dialogue box

As an apprentice with no prior experience working with JavaScript, I encountered a problem with my function that calls a popup. The function works fine on the first button, but fails to work on all subsequent buttons. Since the application keeps adding b ...

Connecting subscribe functions in Meteor React Native

I've been working on a react native app using meteor and the library react-native-meteor. I've run into an issue where I need to make a series of calls one after the other, such as signing in, subscribing to data, and so on. In my actual code, i ...

Incorporate personalized feedback into a datatable with server-side processing

Trying to implement server-side processing for a datatable loaded from an AJAX response using this specific example The server response being received is as follows: {"msg":null,"code":null,"status":null,"result":[{"aNumber":"3224193861","bNumber":"32159 ...

Struggling to store pushed data accurately into an array using node.js

) Currently, I am tackling a challenging node.js express custom API project. The issue arises when attempting to push data... This is the snippet of my code: module.exports = function(config, steamClient, csgo, database, teamspeakClient, router) { var a ...

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Implementing an Angular template to read .CSV files and generate a table involves creating two separate files: one for the header and another for the table content. For the header CSV file: header.csv https://i.stack.imgur.com/ojMo6.png For the table da ...

The 3-way data binding in angularFire does not update a function

My issue involves a firebaseObject (MyFirebaseService.getCurrentUser()) being bound to $scope.user. Once successfully bound, I iterate through the object to check if it contains an "associatedCourseId" equal to a specific value ($stateParams.id). If it doe ...

Adding a countdown timer plugin from jQuery into a Blogger template

Currently, I am utilizing the 'simple' template on Blogger to build my blog. My goal is to incorporate a countdown timer into the design. After conducting some research, it appears that the most efficient method (that also allows for customizatio ...

Transitioning from AngularJS to Angular 2: Exploring Alternatives to $rootScope.$on

Our journey with the AngularJS project has begun on the path towards the modern Angular. The ngMigration utility advised me to eliminate all dependencies on $rootScope since Angular does not have a concept similar to $rootScope. While this is straightforw ...

When using Sequelize.or, only the first result is returned instead of returning all results

Currently, I am integrating SequelizeJS(MySql) with Passportjs for authentication. When I try the following code: User.find(db.Sequelize.or({ 'username': username }, { 'email': req.body.email }) ) .then((user) => {consol ...

What is the process of incorporating a JS engine into an ASP.NET Core MVC React application?

An error will be displayed by the upcoming service. reference missing services.RegisterJsEngineSwitcher(settings => settings.DefaultEngineName = V8JsEngine.EngineName) .AddV8(); ...

Navigating nested JSON objects using D3 - A guide

I have a problem in my REACT application where I am trying to implement Mike Bostock's Multi-Series Line Chart using D3 v4. I am reading JSON response with axios and passing it to a component using react-faux-dom, but even though the object seems corr ...

"Troubleshooting: Issues with the ng-hide directive in AngularJS

I am facing an issue with hiding a column in my table using ng-hide. The goal is to hide the column before the user logs in and then show it after they have logged in. However, I found that after applying the ng-hide property, the entire table gets hidden ...

Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute wit ...

Error in Node.js: Route.get() is expecting callback functions, but received an [object Undefined]

Hello, I understand that this question has been asked on Stack Overflow before, but after going through all the answers, I still can't figure out what's wrong with my code. This is the main content of my server.js file: var dbUri = process.env ...

The value from the textbox is not being received by the JavaScript and PHP

I'm encountering an issue with my codes where they are not properly passing the value of the verification code from the textbox to JavaScript and then to PHP. I need assistance in resolving this issue. Below is the snippet of code: HTML: /* HTML c ...

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script ...

Adjust the template within a directive to dynamically include an additional directive

Challenge Create a custom directive that dynamically adds the ng-bind attribute, allowing for the use of ng-bind, ng-bind-html, or ng-bind-html-unsafe without needing to manually add it to the template definition throughout. Illustrative Example http://j ...

Sending an object from Rails to Javascript

My MapsController is def show @outlet=OUtlet.all render 'maps/map' end In the view page map.html.erb, I iterate through each outlet to display their latitude and longitude: <% @outlet.each do |product| %> <%= product.latitu ...

Encountering an unusual issue while implementing collision detection with THREE.Raycaster in version r68

Up until now, I've successfully utilized the THREE.Raycaster in my game engine for testing collisions across various elements. It has been reliable and effective. However, a puzzling issue has recently arisen that has left me stumped. Despite believi ...