The GAS and Bootstrap web form is able to search for and display data in a table format. However, it lacks the functionality to display clickable links or hyperlinks directly from the spreadsheet

Check out this awesome web application

https://script.google.com/macros/s/AKfycbyEHj5qtIeCZh4rR6FutBLQ3N9NihreaTv7BFj4_saOfNWJUG0Tn2OtvzQs4zASYHnNiA/exec

I'm looking for help to display links or hyperlinks that some cells contain. Any suggestions?

I created this web form by following a tutorial, but I'm still learning and finding it challenging to understand all the code. If this task is too advanced for a beginner like me, I totally get it.

Here's a snippet of the code:

      function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}


/* PROCESS FORM */
function processForm(formObject){  
  var result = "";
  if(formObject.searchtext){//Execute if form passes search text
      result = search(formObject.searchtext);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS 
function search(searchtext){
  var spreadsheetId   = '1xsSrUT8jYm9dT_Mfi2UTy4BHjcD7TQVVtgsB1x1wgTE'; //** CHANGE !!!
  var dataRage        = 'Data!A2:Y';                                    //** CHANGE !!!
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
  var ar = [];
  
  data.forEach(function(f) {
    if (~f.indexOf(searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

And here's another excerpt from the code:

Index HTML file

<!DOCTYPE html>
<html>
... (code continues)
</html>

If you want to see sample data, click on the link below:

https://i.sstatic.net/UForg.png

For a preview of the photoshopped output, you can view it here.

Answer №1

Your objective appears to be the following:

  • You are looking to transform the images from Sample Data to Photoshopped output mentioned in your query.
  • The column "K" contains hyperlinks, and you aim to integrate these hyperlinks into the HTML side.

Key Modifications:

  • Upon reviewing your script, it seems that Sheets.Spreadsheets.Values.get is being utilized. Unfortunately, direct retrieval of hyperlinks is not supported in this scenario.
  • In such a situation, I suggest implementing the following approach:
    1. Extract values from the column "K" and retrieve the URLs using getRichTextValues.
    2. Create an array for transmitting data back to the JavaScript side.

Once you incorporate the aforementioned points into your script, it will look like this:

Revised Script:

To implement the necessary changes in the Google Apps Script section, kindly adjust the function search as follows:

function search(searchtext) {
  var spreadsheetId   = '1xsSrUT8jYm9dT_Mfi2UTy4BHjcD7TQVVtgsB1x1wgTE'; //** CHANGE !!!
  var dataRage        = 'Data!A2:Y';                                    //** CHANGE !!!

  // 1. Retrieve values from the column "K" and extract the URLs using getRichTextValues.
  var ss = SpreadsheetApp.openById(spreadsheetId);
  var [sheetName, a1Notation] = dataRage.split("!");
  var sheet = ss.getSheetByName(sheetName);
  var lastRow = sheet.getLastRow();
  var range = sheet.getRange(a1Notation + lastRow);
  var richTextValues = range.offset(0, 10, lastRow, 1).getRichTextValues().map(([k]) => {
    var url = k.getLinkUrl();
    var text = k.getText();
    return url ? `<a href="${url}">${text}</a>` : text;
  });

  // 2. Create an array for transmitting data to the JavaScript side.
  var values = range.getDisplayValues().reduce((ar, r, i) => {
    if (r.includes(searchtext)) {
      r[10] = richTextValues[i];
      ar.push(r);
    }
    return ar;
  }, []);
  return values;
}

Note:

  • Upon modifying the Google Apps Script, ensure to redeploy it as a new version. This allows the updated script to take effect on Web Apps. Please exercise caution in this process.
  • For further details, refer to the report on "Redeploying Web Apps without Changing URL of Web Apps for New IDE".
  • The suggested modified script is based on your sample input and output images. If your actual scenario varies from this, the script may not be directly applicable. Please bear this in mind.

References:

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

Attempting to modify the array content using useState, but unfortunately, it is not functioning as expected

Starting out with react.js and trying to update an array's content using useState upon clicking a send-button, but it's not working as expected. Struggling with adding date and number in the row. Check image here Here's what I'm aiming ...

Enhance and Modify feature using Javascript

I'm facing two issues with my product information form. Firstly, after I submit the data, I want the input fields to be cleared automatically. Secondly, the edit function doesn't seem to work at all. I'm quite stuck on how to resolve these p ...

The target for ajaxSubmit is being duplicated instead of being replaced

I encountered a problem with the code below: $('#refresh').click(function () { alert($('.report-container').length); $('.report-container').each(function () { var accordian = this; var url = $(this) ...

Leveraging google transliteration within a Flex environment

Here is an illustration of how the Google transliteration feature can be utilized in specific HTML textboxes. I am looking to incorporate this same functionality for a Flex application. Is there a method through which this can be achieved? <html> ...

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

Having some trouble setting up a web app with TypeScript and jspm & system.js for module loading. Progress is slow. After installing jspm and adding jQuery: jspm install jquery And the initial setup: <script src="jspm_packages/system.js"></scri ...

What is the process for determining the default character length in a <p> tag based on its height and width?

I'm trying to determine the default length for the <p> tag in HTML. It should be displayed based on the height and width of the <p> tag. For example: Consider the following code snippet, <p style="height:300px;width:200px;"> </ ...

Guide on activating an event when a slider image is updated using jquery

I am working on a project that includes a slider. I have been trying to trigger an event when the slider image changes, but so far using the classChange Event has not been successful. Here is the link to my code: [1] https://codepen.io/anon/pen/gzLYaO ...

Utilizing IISNode and/or nodemon for efficient node.js development on Windows platform

For my node.js application running on Windows, I currently utilize IISNode both locally during development and on production hosting. Would incorporating nodemon (or a comparable module that monitors file changes and restarts node.exe when necessary) pro ...

The hover effect does not carry over to duplicated HTML

I successfully added a node, but I forgot to include the hover function of the node in my application. The hover function is not necessary, and I need it to work with ie8 compatibility. Here's my HTML: <div id="appendCell" style="color:green; colo ...

The Material-UI DataGrid feature allows for the display of column sums, with the sum dynamically updating based on applied filters

I am struggling with calculating the sum of values in the Total Amount column of my Material-UI DataGrid. How can I achieve this and ensure that the sum is also updated when a filter is triggered? Any guidance on how to sum the entire Total Amount column ...

Executing a callback function when a window confirmation is triggered during the onbeforeunload event

Currently, I need to implement a feature where a confirmation window pops up when the user tries to close the page. The code snippet for this functionality is included below: window.onbeforeunload=function(){ if(...) { return "Are you sure you want to ...

Extract the text and value from an asp.net treeview by utilizing jQuery or JavaScript

On my website, I am using a TreeView controller. I have disabled node selection by setting SelectAction = TreeNodeSelectAction.None as I have the checkbox option enabled. However, this causes an error when trying to access the .href property of the node. T ...

Unlock the Power of EmailJS with Vue.js 2 and TypeScript

I couldn't find a similar issue online, so here's my problem. I'm trying to create a form for receiving contact from an app using Vue.js 2 and TypeScript. Here is my code: <form ref="form" class="form-data" @submit.pr ...

Click to dynamically toggle classes with jQuery

I am trying to apply a class called 'select' when I click on a paragraph tag. However, the code I have written doesn't seem to be working. Can someone please provide some suggestions? Here is the code: <style type="text/css"> #el ...

The function to navigate, 'navTo', is not defined and so it cannot be read

I am trying to create a navigation button in my SAPUI5 application deployed on Fiori _onPageNavButtonPress: function () { var oHistory = History.getInstance(); var sPreviousHash = oHistory.getPreviousHash(); if (sPreviousHash !== ...

Ensure that only one menu with a specific class is open at any given time

My goal is to ensure that both menus cannot be open simultaneously. The desired behavior is as follows: When one menu is already open and you click on another, the first one should automatically close. For a better understanding of what I am trying to achi ...

WebGL annotations failing to display on the webpage

I'm currently working on displaying a 3D model using Three.js in a web browser and looking to incorporate annotations like the ones shown in this Sketchfab model: Interactive 3D Test. I came across a helpful guide at this link, but I'm facing iss ...

Enhancing bar chart presentation with text in d3

Looking to enhance my bar chart by adding text tooltips that appear when hovering over each bar. While I am a beginner with d3, I've been struggling to implement this feature effectively. Despite trying various methods gleaned from online resources, t ...

Implement AJAX in order to circumvent fees from Google Maps and display maps exclusively upon user interaction by clicking a designated button

Starting July 16, 2018, the Google Maps API is no longer completely free. After July 16, 2018, in order to continue utilizing the Google Maps Platform APIs, you must activate billing for each of your projects. (https://developers.google.com/maps/documentat ...

Align three divs vertically within one div, all floated to achieve the desired layout

Can someone help me align three divs vertically within a container div? The challenge is that all three divs inside the container are floated - one on the right, one in the center, and one on the left to create a navbar. I've seen the navbars in Boot ...