What's the best way to transfer information from a spreadsheet to an HTML file using Google Apps Script?

I am attempting to transfer data from my current SpreadSheet to an HTML file created with Google App Script. Any guidance on this would be greatly appreciated as I am feeling a bit lost.

Html

<body>
    <!--3.x snippet-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!--2.x snippet-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!--1.x snippet-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Source -->
    <!-- Google Hosted Libraries: https://developers.google.com/speed/libraries#jquery -->
  <script>
    window.writeData = function() {
    var userInformation = document.getElementById('form');
    google.script.run.registerUser(userInformation);
  };
  </script>
  <blockquote class="trello-card">
    <a href="" id="myLink">Trello Card</a>
  </blockquote>
  <script src="https://p.trellocdn.com/embed.min.js"></script>
  <script>
    google.script.run.withSuccessHandler(myname => {
    var elem = document.getElementById('myLink');
    elem.href += myname;
    console.log('This is myname:' + myname);
    }).getCardById();
  </script>
</body>

Function that should return the information of the sheet

function getCardById(){
  var app = SpreadsheetApp;
  var activeSp = app.getActiveSpreadsheet();
  var activeSheet = activeSp.getActiveSheet();
  var linkCol = activeSheet.getRange("B2").getValue();
  //Logger.log(' LINKCOL:' + linkCol);
  return linkCol;
}

Function that show the html

function seeCard() {
 var templateFileId = '1upA3JHioEyxLScebasmsmwXW-SxsiKaPRznKLCKFYhw';
 var sheetName = 'Trello sheet';
 SpreadsheetApp.openById(templateFileId).copy(sheetName);
 var excel =  SpreadsheetApp.create("Probando un html interno a ver ")
 var html = HtmlService.createHtmlOutputFromFile('index') //index is the name of your HTML file
  .setTitle('Trello card')
  .setWidth(300);
   SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
  .showSidebar(html);

}

Video of what is happening right now

video of the problem

*Picture in the console *

Answer №1

  • Would you like to assign the value from getCardById() to the variable named myname using Google Apps Script and Javascript?

If I understand correctly, how about making the following modification:

Unfortunately, when using google.script.run, it does not return any values. Therefore, in this scenario, you can utilize withSuccessHandler instead. Once you make the required modifications to your script, adjust it as shown below:

From:

var elem = document.getElementById('myLink'),
var myname = google.script.run.getCardById();
elem.href +=  myname ;

To:

google.script.run.withSuccessHandler(myname => {
  var elem = document.getElementById('myLink');
  elem.href = myname;
}).getCardById();

Reference:

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

Activate a button utilizing jQuery keyboard functionality

Here is what I have accomplished so far: http://jsfiddle.net/qEKfg/ I have created two buttons that activate on click and resemble keyboard keys. My goal is to make them animate only when the corresponding keys (CTRL and ...

What is the best way to change the sorting of an array in state when it is clicked on

Developed several functions to sort movies by rating, stock, and title upon clicking. One thing I'm attempting to achieve is the ability to toggle between sorting movie titles in ASC order on one click and DESC on the second click. To accomplish this, ...

There is an issue showing up in the console: $(…).datepicker is not defined as a function

I am new to using HTML with JavaScript. I attempted to implement a datepicker, but unfortunately, it is not working as expected. The error message I am receiving is '$(...).datepicker is not a function' in the console. I am utilizing multiple f ...

Developing a nested JSON structure

I'm struggling with a seemingly simple task of creating a JSON object. Despite my efforts, I can't seem to find the right information to guide me through it. Here is what I have so far: var myJsonObject = new Object(); myJsonObject.context.appli ...

Sending arguments to $http get using Angular UI Modal

Whenever a user clicks an icon in my list of details, I want a modal to open and display more data on that specific facet. This functionality is implemented using Angular UI's Bootstrap Directives. Below is the current implementation of my controller ...

Fascinating problem regarding JavaScript object literals

Below is a code snippet you can try: var myObject = {"COL_SEQ":16,"SERVICE_CD":0.000000,"SERVICE_ID":0.000000,"COL_NAME":"","COL_OPTION":"nosort nofilter","COL_CLASS":"REMOVE_PATIENT","COL_TYPE":"","COL_LABEL":"","COL_OPTION":""}; alert(myObject.COL_SEQ) ...

What is the best way to retrieve the value or text from a dropdown menu that has been added to a table row using JQuery?

Within my dynamic table, users can click an "add" button to generate a new row in the table using JQuery. One of the columns in each new row includes a dropdown box with predefined values. How can I retrieve the selected value from this dynamically created ...

Is Fullpage.js functioning only on local servers?

I have decided to create a personal website showcasing my portfolio using the fullpage.js library. Everything seems to be working fine during development, but once I upload the site to my github.io or another public domain via FTP, I encounter GET errors t ...

Struggling with passing attributes to an AngularJS directive? You might be encountering the frustrating issue of receiving undefined values for

Currently, I am working on a directive that has four parameters being passed to it, all of which are bound to the directive scope. The problem I am facing is that despite the data existing and being loaded, the directive is receiving all values as undefin ...

Glitch in transmitting server data to client in MERN stack development

I am currently developing a MERN web application and I've encountered a bug in which the data retrieved from the server is not matching what is expected when making a GET request on the client side. Below is the controller function on the server for ...

Stopping the mouse from scrolling

I am facing an issue on my page where scrolling a textbox to the bottom causes the entire document to scroll as well. How can I prevent mouse scrolling on the document but still allow scrolling within the textbox when the mouse is over it? It's import ...

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...

Waiting for the code to execute once the filtering process is completed in Next.js using Javascript

I'm seeking a way to ensure that my code waits for the completion of my filter function before proceeding. The issue arises because my filter function, which incorporates another function called useLocalCompare, causes a delay in execution. This delay ...

Implement Ajax for Savings with Notification Integration in Rails

I have successfully implemented the :remote => true in the _form.html.erb, and now I am trying to figure out how to display a notice after the user saves the information on the page. Here is an excerpt from my documents_controller.rb: def create @do ...

Select2.js Dropdown List with Case Sensitivity

Currently making use of select2.js version 4.0.3 Situation: Imagine the dropdown list contains the following options: JavaScript javascript Javascript javaScript So, when a user types in java, all options are displayed (case is n ...

The functionality of $render ceased to operate effectively with the release of angular 1.2.2, particularly in relation

Yesterday, I upgraded from angular 1.0.8 to angular 1.2.2 and encountered a problem where the $render function in the directive below is no longer firing, despite fixing other issues that arose. Has anyone else experienced this issue before? ...

Error: Unable to access unknown properties (reading 'extend')

Struggling to integrate the Vuetify library into my current Vue 3 project, encountering complications. An error message popped up post-compilation: vuetify.js?ce5b:42021 Uncaught TypeError: Cannot read properties of undefined (reading 'extend') ...

Separate a string by individual words and identify/insert line breaks

For the purpose of animating headings word by word, I am attempting to divide a string by spaces. However, my CMS outputs line breaks as \n within the string. const text = "Aenean non odio erat.\n Suspendisse vestibulum vulputate nulla et moll ...

Prevent clicking here

I'm attempting to only prevent the click event on the current item with a certain class. $(document).on('click', '.item', function() { $(".item").removeClass('is-expanded'); $(this).addClass('is-expanded'); ...

HTML Button without Connection to Javascript

When attempting an HTML integration with GAS, the code provided seems to be generating a blank form upon clicking "Add" instead of functioning as expected: //GLOBALS let ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); var lastRow = ss.getLa ...