On a published (as a Web Page) Google spreadsheet:
I would not like anyone seeing four columns of a spreadsheet with sensitive data. I want these four columns just for personal use.
Solutions using IMPORTRANGE function are not suitable as a solution. That's because I create a new spreadsheet every month, with a lot of data in it, and I simply copy the four columns onto the new sheet every month. These columns also perform some calculations from the data on the same sheet.
I tried hiding columns, this way. But it is a bit uncomfortable for me.
PS. This is not the same question as this one
Well since they don't need to edit anything that makes it a lot easier.
Here's the code for displaying a table on a webapp. You can choose to make it editable or not and you can leave any columns off that you wish.
var SSID='';
var sheetName='';
function onOpen()
{
SpreadsheetApp.getUi().createMenu('HTML Spreadsheet')
.addItem('Run Spreadsheet in Dialog', 'htmlSpreadsheet')
.addToUi();
}
function htmlSpreadsheet(mode,edit){
var mode=mode||'dialog';
var edit=edit||true;
var br='<br />';
var s='';
var hdrRows=1;
var ss=SpreadsheetApp.openById(SSID);
var sht=ss.getSheetByName(sheetName);
var rng=sht.getDataRange();
var rngA=rng.getValues();
;
switch(edit){
case true:
s+='<table>'
for(var i=0;i<rngA.length;i++){
s+='<tr>';
for(var j=0;j<rngA[i].length;j++){
if(i<hdrRows){
s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}else{
s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="10" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
}
s+='</tr>';
}
s+='</table>';
break;
case false:
s+='<table style="border: 1px solid black;">'
for(var i=0;i<rngA.length;i++){
s+='<tr>';
for(var j=0;j<rngA[i].length;j++){
if(i<hdrRows){
s+='<th style="border: 1px solid black;">' + rngA[i][j] + '</th>';
}else{
s+='<td style="border: 1px solid black;">' + rngA[i][j] + '</th>';
}
}
s+='</tr>';
}
s+='</table>';
break;
}
//s+='<div id="success"></div>';
s+='</body></html>';
switch (mode){
case 'dialog':
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
userInterface.append(s);
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Spreadsheet Data for ' + ss.getName() + ' Sheet: ' + sht.getName());
break;
case 'web':
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
return userInterface.append(s).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
}
function updateSpreadsheet(i,j,value)
{
var ss=SpreadsheetApp.openById(SSID);
var sht=ss.getSheetByName(sheetName);
var rng=sht.getDataRange();
var rngA=rng.getValues();
rngA[i][j]=value;
rng.setValues(rngA);
var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
return data;
}
function doGet()
{
var output=htmlSpreadsheet('web');
return output;
}
Here's the htmlss.html page:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
});
function updateSS(i,j)
{
var str='#txt' + String(i) + String(j);
var value=$(str).val();
$(str).css('background-color','#ffff00');
google.script.run
.withSuccessHandler(successHandler)
.updateSpreadsheet(i,j,value)
}
function successHandler(data)
{
$('#success').text(data.message);
$('#txt' + data.ridx + data.cidx).css('background-color','#ffffff');
}
console.log('My Code');
</script>
<style>
th{text-align:left}
</style>
</head>
<body>
<div id="success"></div>
Related
This is how I am sending whatsapp message via jQuery
var ques = "I";
var a = "am";
var b = "having";
var c = "a good";
var d = "time";
$(document).on("click", '.whatsapp', function() {
var whatsappMessage = ques + "\r\n\r\n" + a + "\r\n" + b + "\r\n" + c + "\r\n" + d;
var whatsapp_url = "whatsapp://send?text=" + whatsappMessage;
window.location.href = whatsapp_url;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showques" style="margin-left: 10px;font-size: 32px;">
</div>
<div style="width:300px;padding: 20px;background-color:#5755d9;">
<a class="whatsapp" style="font-size: 40px;color:white; text-decoration: none;">Whatsapp</a>
</div>
output = I \r\n\r\n am \r\n\r\n having \r\n\r\n a good \r\n\r\n time
I want an output like this:
I
am
having
a good
time
Add the following line in the code and it will work
whatsappMessage = window.encodeURIComponent(whatsappMessage);
$(document).on("click", '.whatsapp', function() {
var whatsappMessage = ques + "\r\n\r\n" + a + "\r\n" + b + "\r\n" + c + "\r\n" + d;
if( isMobile.any() ) {
whatsappMessage = window.encodeURIComponent(whatsappMessage);
var whatsapp_url = "whatsapp://send?text=" + whatsappMessage;
window.location.href = whatsapp_url;
} else {
alert("Please share this in mobile device");
}
});
I've created this script to send the none empty rows of a sheet as an email. So far it sends the email, but it places all the found rows in a single continuous line in the email body.
I've tried placing a line break <br/> in various places in the HTML part of the script but no luck so far.
function sendSheetDataViaEmail() {
var SSID = SpreadsheetApp.openById('1dfgdfgdf').getSheetByName('sheet1');
var lastRow = SSID.getLastRow();
var cell = SSID.getRange(12, 1,lastRow-3,9).getDisplayValues();
var data2D = cell.filter(function(item) {//filter by user Id and by spliting month and year
return item[0] != "" // if not empty
});
Array.prototype.transpose = function() { var a = this; return Object.keys(a[0]).map(function (c) {
return a.map(function (r) { return r[c]; }); }); }
//transpose the array, because getValues() returns an array of rows
data2D = data2D.transpose();
// data2D.splice(1,1); // removes the second column... count starts at 0
//if now you need an array or rows again, just transpose again
data2D = data2D.transpose();
var L = data2D.length;
var html = "";
html = "<table id='loadListOfFaturasDeHojeTable' class='order-table table dark3Dtable'> <thead><tr>
<th '>F. ID 🔃</th><th>Trans ID</th> <th>C. ID</th> <th >C. NOME</th> <th >CODDIGO</th> <th >NU DE
SERIE</th> <th >VALOR</th><th >DATA</th> </tr> </thead> <tbody>";
for (var i=0;i<L;i++) {
var thisRow = data2D[i];
var rowHTML = "";
rowHTML = "<tr>";
var rowHTML0 = '<td style="color: red;">'+ thisRow[0] + '</td>'
var rowHTML1 = '<td >'+ thisRow[1] + '</td>'
var rowHTML2 = '<td >'+ thisRow[2] + '</td>'
var rowHTML3 = '<td >'+ thisRow[3] + '</td>'
var rowHTML4 = '<td >'+ thisRow[4] + '</td>'
var rowHTML5 = '<td >'+ thisRow[5] + '</td>'
var rowHTML6 = '<td >'+ thisRow[6] + '</td>'
var rowHTML7 = '<td >'+ thisRow[7] + '</td>'
var rowHTML8 = '<td ">'+ thisRow[8] + '</td>'
rowHTML = rowHTML0 +rowHTML1+rowHTML3 + rowHTML4 + rowHTML5 + rowHTML6 + rowHTML7 + rowHTML8 +
"</tr><br/>";
html = html + rowHTML ;
}
// Logger.log('html: ' + html)
html = html + "</table>";
var settings = {
mailTo: SSID.getRange('J3')//email address
.getValue(),
subject: SSID.getRange('J4')
.getValue(),
body: html,
}
MailApp.sendEmail(settings.mailTo, settings.subject,"" , {
htmlBody: settings.body,
});
}
Try it this way:
function sendSheetDataViaEmail() {
var ss=SpreadsheetApp.openById('ssid');
var sh=ss.getSheetByName('sheet1');
var lastRow=sh.getLastRow();
var vA=sh.getRange(12, 1,sh.getLastRow()-11,9).getDisplayValues().filter(function(item){return item[0]});
var html="";
html='<table id="loadListOfFaturasDeHojeTable" class="order-table table dark3Dtable"><tr><th>F.ID 🔃</th><th>TransID</th><th>C.ID</th><th>C.NOME</th><th>CODDIGO</th><th>NUDESERIE</th><th>VALOR</th><th>DATA</th></tr>';
for(var i=0;i<vA.length;i++) {
html+='<tr><td style="color:red;">'+ thisRow[0] + '</td><td >'+ thisRow[1] + '</td><td >'+ thisRow[2] + '</td><td >'+ thisRow[3] + '</td>';
html+='<td >'+ thisRow[4] + '</td><td >'+ thisRow[5] + '</td><td >'+ thisRow[6] + '</td><td >'+ thisRow[7] + '</td>'<td ">'+ thisRow[8] + '</td>';
}
MailApp.sendEmail(sh.getRange('J3').getValue(),sh.getRange('J4').getValue() ,"",{htmlBody:html});
}
The script doesn't throw any errors, but rarely completely works - i.e. complete successfully with all of the expected data in the destination tab. The results breakdown is generally:
no results in the destination sheet - this happens ~50-75% of the time
all of the results in the destination sheet, except in cell A1 - ~25% of the time
100% completely works - ~15-25% of the time
code snippet of the batchupdate() call
var data = [
{
range: (ss.getSheetName() + "!A1:AQ" + valueArray.length)
,values: valueArray
}
];
const resource = {
valueInputOption: "RAW"
,data: data
};
Logger.log("request = " + JSON.stringify(resource)
+ "\n" + "valueArray = " + valueArray.length
);
Logger.log(" Sheets.Spreadsheets.Values.batchUpdate(params, batchUpdateValuesRequestBody) ");
var response = Sheets.Spreadsheets.Values.batchUpdate(resource, spreadsheetId);
Logger.log("response = " + response.toString());
and the response
response = {
"totalUpdatedRows": 37776,
"responses": [{
"updatedCells": 1482389,
"updatedRange": "BatchUpdateDestination!A1:AP37776",
"updatedColumns": 42,
"spreadsheetId": "adahsdassadasdsadaasdasdasdasdasdasdasdasdas",
"updatedRows": 37776
}
],
"spreadsheetId": "adahsdassadasdsadaasdasdasdasdasdasdasdasdas",
"totalUpdatedCells": 1482389,
"totalUpdatedSheets": 1,
"totalUpdatedColumns": 42
}
Its obviously a very large dataset, but I've pruned the destination spreadsheet to ensure there is ample room for the data, and from earlier testing, I believe that a specific size error would be returned if that was the blocker.
How can I troubleshoot, or better yet, prevent these incomplete executions? is there any way to inspect the batch jobs that these requests initiate?
Answering my own question...
After toiling with this a little more, I couldn't figure out any way to troublshooting or inspect the odd, seemingly successfully batchUpdate() jobs. Thus, I resorted to batching the batchUpdate() calls into batches of 15000. This seems to work consistently, though maybe a bit slower:
// This is the very large 2D array that is populated elsewhere
var valueArray = [];
var maxRows = valueArray.length;
var maxCols = valueArray[0].length;
var batchSize = 15000;
var lastBatchSize = 1;
for (var currentRowCount = 1; currentRowCount <= maxRows; ++currentRowCount) {
if( currentRowCount % batchSize == 0
|| currentRowCount == maxRows
)
{
Logger.log("get new valuesToSet");
valuesToSet = valueArray.slice(lastBatchSize - 1, currentRowCount -1);
var data = [
{
range: (ss.getSheetName() + "!A" + lastBatchSize + ":AQ" + (lastBatchSize + valuesToSet.length))
,values: valuesToSet
}
];
const resource = {
valueInputOption: "RAW"
,data: data
};
Logger.log("request = " + JSON.stringify(resource).slice(1, 100)
+ "\n" + "valuesToSet.length = " + valuesToSet.length
);
try {
var checkValues = null;
var continueToNextBatch = false;
for (var i = 1; i <= 3; ++i) {
Logger.log("try # = " + i
+ "\n" + " continueToNextBatch = " + continueToNextBatch
+ "\n" + " make the batchUpdate() request, then sleep for 5 seconds, then check if there are values in the target range."
+ "\n" + " if no values, then wait 5 seconds, check again."
+ "\n" + " if still not values after 3 tries, then resubmit the batchUpdate() requestion and recheck values"
+ "\n" + "range to check = " + "A" + lastBatchSize + ":AQ" + lastBatchSize
);
Logger.log(" Sheets.Spreadsheets.Values.batchUpdate(params, batchUpdateValuesRequestBody) ");
var response = Sheets.Spreadsheets.Values.batchUpdate(resource, spreadsheetId);
Logger.log("response = " + response.toString());
/// loop and check for data in newly written range
for (var checks = 1; checks <= 3; ++checks) {
Utilities.sleep(5000);
var checkValues = ss.getRange(("A" + lastBatchSize + ":AQ" + lastBatchSize)).getValues();
Logger.log("new cell populated - checks # = " + checks
+ "\n" + "range to check = " + "A" + lastBatchSize + ":AQ" + lastBatchSize
+ "\n" + "checkValues.length = " + checkValues.length
+ "\n" + "checkValues = " + checkValues
);
if(checkValues.length > 1)
{
Logger.log("checkValues.length > 1, so continue to next batch"
+ "\n" + "range to check = " + "A" + lastBatchSize + ":AQ" + lastBatchSize
+ "\n" + "checkValues.length = " + checkValues.length
+ "\n" + "checkValues = " + checkValues
);
continueToNextBatch = true;
continue;
}
else
{
Logger.log("checkValues.length is still not > 1, so try the request again"
+ "\n" + "range to check = " + "A" + lastBatchSize + ":AQ" + lastBatchSize
);
}
}
if(continueToNextBatch)
{
continue;
}
}
}
catch (e) {
console.error("range.setValues(valuesToSet) - yielded an error: " + e
+ "\n" + "valuesToSet = " + valuesToSet.length
+ "\n" + "maxRows = " + maxRows
+ "\n" + "maxCols = " + maxCols
+ "\n" + "currentRowCount = " + currentRowCount
+ "\n" + "current range row start (lastBatchSize) = " + lastBatchSize
+ "\n" + "current range row end (j - lastBatchSize) = " + (currentRowCount - lastBatchSize)
);
}
lastBatchSize = currentRowCount;
}
}
Basically here is what I'm doing:
Storing a person profile in a MYSQL Database
Creating a google spreadsheet add-on with a sidebar
giving to the user the possibility to search profiles through the DB in the add-on
giving to the user the possibility to display the datas of the profile in the Sidebar in the add-on
So Imagine you want to search John but the input you've entered in the searchbar is the letter J. The result of this query will be Jack , Johnatan, Jules, Joe and John as they all have a J. All this names will appear as link for you to click on in order to have more datas displayed (age, picture, fullname, description...). Only problem is that the only way I've managed to achieve is by making a SQL query after each keyup in my HTML input then create X numbers (in this case 5) of hidden classes with the infos, that I can show by clicking on a created link.
So this can easily work for 5 results, but imagine there's 100 of them and you only want to see one of them. Sounds crazy to create 100 hidden divs with all the infos to finally show only one.
here is an example code
code.gs
function onOpen(e) {
SpreadsheetApp.getUi().createAddonMenu()
.addItem('Start', 'showSidebar')
.addToUi();
}
function onInstall(e) {
onOpen(e);
}
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('UI_HTML');
SpreadsheetApp.getUi().showSidebar(ui);
}
//My function to search for profiles (returns an array with each lines found)
function searchProfile(entry){
var address = 'sql3.freemysqlhosting.net';
var user = 'user';
var userPwd = 'password';
var db = 'sql12345678910';
var instanceUrl = 'jdbc:mysql://' + address;
var dbUrl = instanceUrl + '/' + db;
var conn = Jdbc.getConnection(dbUrl, user, userPwd);
var stmt = conn.createStatement();
var ret = [];
var res = stmt.executeQuery('SELECT * FROM item WHERE name = "' + entry + '"'
+ ' OR fullname LIKE CONCAT("%", "' + entry + '", "%")'
+ ' OR description LIKE CONCAT("%", "' + entry + '", "%")');
var numCol = res.getMetaData().getColumnCount();
var i = 0;
var j = 0;
while (res.next())
{
j = 0;
if (!ret[i])
ret[i] = [];
while (j < numCol)
{
ret[i][j]= res.getString(j + 1);
j++;
}
i++;
}
return (ret);
}
UI_HTML.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<p>Search Profile</p>
<input type="text" id="searchProfile" onkeyup="searchProfileHTML()" placeholder="Search for ...">
<div id="results" ></div>
</div>
<script>
function searchProfileHTML()
{
var x = document.getElementById("searchProfile").value;
google.script.run
.withSuccessHandler(createLinks)
.searchProfile(x);
function createLinks(result)
{
$('.links').remove();
if (!x)
return (0);
$('#results').append('<ul></ul>');
$('#results ul').addClass('links');
result.forEach(function(el){
//My Link to show/hide my Div
$('.links').append('<li><a id="' + el[0] + '-link" href="#">' + el[0] + '</a><div id="' + el[0] + '" class ="hide" ></div></li>');
//My div with all the infos (hidden by default)
$('#' + el[0]).append(""
+ '<img src="' + el[14] + '" height="100" width="100">'
+ "<div>"
+ "<ul>"
+ "<li>Name: "+ el[0] + "</li>"
+ "<li>Full name: "+ el[1] + "</li>"
+ "<li>Description : "+ el[2] + "</li>"
+ "<li>email: "+ el[3] + "</li>"
+ "</ul>"
+ "</div>");
$('#' + el[0] + '-link').on("click", function(){
$('#' + el[0]).toggleClass("hide show");
})
});
}
}
</script>
Anyone has an idea how I can make this more lite?
I am trying to display the "students" data in a table with their SRN, firstName, surName and allocated group. I am also trying to display their tutorial group from the "groups" data based on students SRN.
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Student groups</title>
<link rel="stylesheet" type="text/css" href="app.css">
<script type="text/javascript" src="displayStudents.js"></script>
<script type="text/javascript">
var studentsListJSON ;
function getStudentsJSON() {
makeRequest('http://homepages.herts.ac.uk/~comqgrs/ads/moduleGroups.php?moduleCode=6com9051');
}
function makeRequest(url) {
console.log("Making Request to..." + url);
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
console.log('Giving up. Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = processContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function processContents() {
console.log("Call back to process contence: state = " + httpRequest.readyState + "; status = " + httpRequest.status);
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
console.log("request returned, processing data... \n" + httpRequest.responseText);
studentsListJSON = JSON.parse(httpRequest.responseText);
displayStudents();
} else {
console.log('There was a problem with the request.');
}
}
}
</script>
</head>
<body>
<h1>Student Groups for 6COM9051: More Web Scripting</h1>
<h2>Selected Students</h2>
<p>Lets go ... display the Students!</p>
<div id="studentsList"></div>
</body>
</html>
This is my JS file:
function displayStudents() {
var studentsListHTML = '<table id="studentsTable"><thead><tr><th>SRN</th><th>Firstname</th><th>Lastname</th><th>Allocated Group</th></tr></thead>'
for (var studentsName = '"students"' in studentsListJSON) {
var students = studentsListJSON[studentsName];
var studentHTML = '<tr><td>' + students.SRN + '</td><td>' + students.firstName + '</td><td>' + students.lastName + '</td><td>' + students.allocatedGroup + '</td></tr>';
studentsListHTML += studentHTML;
}
studentsListHTML += '</table>';
document.getElementById('studentsList').innerHTML=studentsListHTML;
}
I need to have the data in a table as the user opens the page on a browser and have a search bar so that the user can search for any of the data displayed in the table.
Try changing the displayStudents() method to :
function displayStudents() {
var studentsListHTML = '<table id="studentsTable"><thead><tr><th>SRN</th><th>Firstname</th><th>Lastname</th><th>Allocated Group</th></tr></thead>'
for (var studentSRN in studentsListJSON.students) {
var student = studentsListJSON.students[studentSRN];
var studentHTML = '<tr><td>' + studentSRN + '</td><td>' + student.firstName + '</td><td>' + student.lastName + '</td><td>' + student.allocatedGroup + '</td></tr>';
studentsListHTML += studentHTML;
}
studentsListHTML += '</table>';
document.getElementById('studentsList').innerHTML=studentsListHTML;
}
Note the line (line 5) - var student = studentsListJSON.students[studentSRN];
You need to use the studenSRN as a key to access the corresponding Student in the studentsListJSON.students dictionary.