I have coded a script with help from several stackoverflow examples but I get stuck when trying to go a bit further.
It seems very straightforward but I cannot seem to work it out.
So here it is:
I have coded an HTML script that initiates a dialogbox with some drop down menus. The data in the drop down menus is dynamic and taken from a range in a spreadsheet. I want for users to open the spreadsheet, run the script and choose the options from the drop down values. These drop down values will be pasted on the same spreadsheet.
The bit I got working is that the code sees the values that need to go in the drop down box, illustrates that and that there is a submit box.
However, I cannot seem to submit the values onto the spreadsheet. Please could anyone help me out or point me in the right direction?
test.gs
function openInputDialog1() {
var html = HtmlService.createHtmlOutputFromFile('Test').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add Item');
}
function getMenuListFromSheet() {
return SpreadsheetApp.getActive().getSheetByName('Part Names')
.getRange(1,5,6,1).getValues();
}
function getThicknessFromSheet(){
return SpreadsheetApp.getActive().getSheetByName('Part Names')
.getRange(1,5,6,1).getValues();
}
function itemadd(form) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Part Names');
var LastRow=sheet.getLastRow();
Logger.log(LastRow);
Logger.log(form);
sheet.getRange(LastRow+1,1,1,2).setValues(form);
return true;
}
Test.html
<!DOCTYPE html>
<html>
<p>List of parts:</p>
<select id="menu">
<option></option>
<option>Google Chrome</option>
<option>Firefox</option>
</select>
<select id="thickness">
<option></option>
<option>1</option>
<option>2</option>
</select>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<input type="submit" value="Submit" onclick="select()">
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showMenu)
.getMenuListFromSheet();
google.script.run.withSuccessHandler(showThickness)
.getThicknessFromSheet();
});
/**function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
**/
function showMenu(menuItems) {
var list = $('#menu');
list.find('option').remove(); // remove existing contents
for (var i = 0; i < menuItems.length; i++) {
list.append('<option>' + menuItems[i] + '</option>');
}
}
function showThickness(menuThickness) {
var list = $('#thickness');
list.find('option').remove(); // remove existing contents
for (var i = 0; i < menuThickness.length; i++) {
list.append('<option>' + menuThickness[i] + '</option>');
}
}
</script>
<script>
function select(){
var x = document.getElementById('menu').value;
var y = document.getElementById('thickness').value;
google.script.run
.itemadd(x,y)
google.script.host.close();
</script>
</html>
I know that I am somewhere not making the connection between the script and the HTML side but fail to understand where.
Thanks,
Tim
Here's the lacking bits from your code:
<input type="submit" value="Submit" onclick="sheetConnect()">
In your .HTML file:
function sheetConnect(){
var e = document.getElementById('menu'); //choices are Google Chrome and Firefox
var name = e.options[e.selectedIndex].value; //get whatever the user selected
google.script.run.writeData(name); //pass the value to Code.gs
}
In your Code.gs
function writeData(name){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Sheet1'); //whatever your sheet's name
var cell = sheet.getRange(1,8); //assign position to column H row 1
cell.setValue(name); // write selected data from Dropdown named 'menu'
}
result:
Use the knowledge here to complete your project :)
I haven't used gs before but from looking at other examples yours looks right, however, in the second line you have tml.Service instead of Html.Service, not sure if that will fix all your issues but that will break it.
Related
I'm trying to load images from the drop-down button generated based on the Google Sheet's Folder ID
Google Sheet
Out Put
What I'm Trying To ACHIEVE is: I want to load the images on the front end display which is in a google drive folder based on the drop-down list on the front end of Web app.
THE PROBLEM
I'm unable to add the Folder ID into the getPictures() function and also I'm having issues connecting the Folder ID based on the dropdown.
Code.gs
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('index');
var pictures = getPictures();
htmlOutput.pictures = pictures;
return htmlOutput.evaluate();
}
function getPictures()
{
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var idURL = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues();
var destination_id = '1GNBiddMQZTl3Ti_mKs9CUM541p-yaCnv'; // ID OF GOOGLE DRIVE DIRECTORY;
var destination = DriveApp.getFolderById(destination_id);
var files = destination.getFiles();
var file_array = [];
while (files.hasNext())
{
var file = files.next();
file_array.push(file.getId());
}
return file_array;
}
function getValuesFromSpreadsheet() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues(); // Retrieve values and send to Javascript
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="dropdown">
<button onclick="loadpics()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content"></div>
</div>
<h1>Display Pictures</h1>
<table>
<?for(var i = 0; i < pictures.length; i++) { ?>
<tr><td><img src="https://drive.google.com/uc?export=view&id=<?= pictures[i] ?>" style="width:400px;height:auto;" ></td></tr>
<? } ?>
</table>
</body>
</html>
<script>
function loadpics() {
google.script.run.withSuccessHandler(function(ar) {
let select = document.createElement("select");
select.id = "select1";
select.setAttribute("onchange", "selected()");
document.getElementById("myDropdown").appendChild(select);
ar.forEach(function(e, i) {
let option = document.createElement("option");
option.value = i;
option.text = e;
document.getElementById("select1").appendChild(option);
});
}).getValuesFromSpreadsheet();
};
function selected() {
const value = document.getElementById("select1").value;
console.log(value);
}
</script>
COPY OF GOOGLE SHEET - Click here
I'm not a coder, Could you please help me to achieve my task. Thank in advance.
You can refer to this sample code:
Code.gs
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('index');
var vehicle = getValuesFromSpreadsheet();
var pictures = getPictures("1"); //show 1st vehicle as default
htmlOutput.vehicle = vehicle;
htmlOutput.pictures = pictures;
return htmlOutput.evaluate();
}
//Get pictures based on the selected option
function getPictures(option)
{
var row = parseInt(option) + 1;
Logger.log("option: "+option+" row: "+row);
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var destination_id = sheet.getRange(row, 2).getDisplayValue();
var file_array = [];
Logger.log(destination_id);
try{
var destination = DriveApp.getFolderById(destination_id);
var files = destination.getFiles();
while (files.hasNext())
{
var file = files.next();
file_array.push(file.getId());
}
}catch(err){
Logger.log(err.message);
}
Logger.log(file_array.length);
return file_array;
}
function getValuesFromSpreadsheet() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().flat(); // Retrieve values and send to Javascript
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="dropdown" >
<div id="myDropdown" class="dropdown-content" style="width:200px;">
<b>Vehicle Menu: </b>
<select id="select1" onchange="selected()">
<?for(var i = 1; i < vehicle.length; i++) { ?>
<option value=<?= i ?>><?= vehicle[i] ?></option>
<? } ?>
</select>
</div>
</div>
<h1>Display Pictures</h1>
<div id="defaultPictures">
<table>
<?for(var i = 0; i < pictures.length; i++) { ?>
<tr><td><img src="https://drive.google.com/uc?export=view&id=<?= pictures[i] ?>" style="width:400px;height:auto;" ></td></tr>
<? } ?>
</table>
</div>
<div id="displayPictures"></div>
</body>
</html>
<script>
function selected() {
//Hide default pictures
var defaultDiv = document.getElementById("defaultPictures");
defaultDiv.style.display = "none";
const value = document.getElementById("select1").value;
console.log(value);
//Update table from the selected option
google.script.run.withSuccessHandler(function(ids) {
//Create a html table string based on the picture ids
let tblHtml = '<table>';
//Create table rows from the picture ids
ids.forEach(id => {
tblHtml += '<tr><td><img src="https://drive.google.com/uc?export=view&id='+id+'" style="width:400px;height:auto;" ></td></tr>';
});
tblHtml += '</table>';
//update div to include the table
console.log(tblHtml);
document.getElementById("displayPictures").innerHTML = tblHtml;
}).getPictures(value);
}
</script>
What it does?
I removed the dropdown button. Instead, I updated the dropdown options using vehicle variable which was initialized in doGet()
I created 2 div which displays your images. <div id="defaultPictures"> displays the table of images initialized using pictures variable set in doGet() while <div id="displayPictures"></div> will display the pictures of the selected option in the dropdown menu.
I modified getPictures() to add option argument which is the option value selected in your dropdown menu. Note that the option value is in zero index. ("Prado" value is 1 while "Prado 2" value is 2)
When initializing pictures variable in your html, I used "Prado" with option value 1 as a default pictures to display.
When a dropdown menu is selected, it will call selected() in your hmtl. Hide the defaultPictures div and create a new table based on the selected option.
Sample Output:
I have a list in sharepoint 2013 and created an html form and script which will insert data and upload a document into this list. Now for second level, i want to fetch and only view all these saved data which i created. I used jsom to fetch all the records
But problem is with attachment-
How to get attachment document into form or download it to local from this list. Not finding any good resource in google. Can any one please help me?.
You could use JSOM to get the attachement files.
Sample script:
<script type="text/javascript" src="/SiteAssets/jquery-3.4.1.js"></script>
<script type="text/javascript">
function getListItemAttachements() {
//replace the list and id dynamically
getAttachements("Test", 1);
}
function getAttachements(listName, itemID) {
var attachmentFiles;
var ctx = new SP.ClientContext.get_current();
var web = ctx.get_web();
var attachmentFolder = web.getFolderByServerRelativeUrl('Lists/' + listName + '/Attachments/' + itemID);
attachmentFiles = attachmentFolder.get_files();
ctx.load(attachmentFiles);
ctx.executeQueryAsync(function () {
for (var j = 0; j < attachmentFiles["$2_1"].length; j++) {
var file = attachmentFiles.itemAt(j);
console.log(file.get_name());
}
}, function (err) {
console.log(err);
});
}
</script>
<input id="Button1" onclick="getListItemAttachements()" type="button" value="button" />
I have this problem here
The problem has been solved, but my question is how can I get the second value from that, or the third one. The sheet will have many tables and at some point I will need a total for each table. Also, is there any solution to automatically find the the array number which contain date row for each table (instead defining this manually). Hope my explanation make sense.
Thank you!
Kind regards,
L.E. Test file
If I understood your question correctly, instead of breaking the loop when a match to "Total" is found do whatever is needed to be done within the loop like so...
var today = toDateFormat(new Date());
var todaysColumn =
values[5].map(toDateFormat).map(Number).indexOf(+today);
var emailDate = Utilities.formatDate(new Date(today),"GMT+1",
"dd/MM/yyyy");
for (var i=0; i<values.length; i++){
if (values[i][0]=='Total'){
nr = i;
Logger.log(nr);
var output = values[nr][todaysColumn];
// Do something with the output here I"m assuming you email it
}
}
The loop will keep going and find every "Total" and do the same thing. This answer assumes that the "Totals" are in the same column. You can get fancier with this if you only want certain tables to send and not others, but this should get you started.
I didn't quite understand the second part of your question...
"Also, is there any solution to automatically find the the array
number which contain date row for each table (instead defining this
manually). Hope my explanation make sense."
I'm guessing you want all the rows that contain "Total" in the specific column. You could instantiate a variable as an empty array like so, var totals = [];. Then instead of sending the email or whatever in the first loop you would push the row values to the array like so, totals.push(nr+1) . //adding 1 gives you the actual row number (rows count from 1 but arrays count from 0). You could then simply loop through the totals array and do whatever you wanted to do. Alternatively you could create an array of all the values instead of row numbers like totals.push(values[nr][todaysColumn]) and loop through that array. Lots of ways to solve this problem!
Ok based on our conversation below I've edited the "test" sheet and updated the code. Below are my edits
All edits have been made in your test sheet and verified working in Logger. Let me know if you have any questions.
Spreadsheet:
Added "Validation" Tab
Edited "Table" tab so the row with "Email Address" in Column A lines up with the desired lookup values (dates or categories)...this was only for the first two tables as all the others already had this criteria.
Code:
Create table/category selector...
In the editor go to File >> New >> HTMLfile
Name the file "inputHTML"
Copy and paste the following code into that file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form class="notice_form" autocomplete="off" onsubmit="formSubmit(this)" target="hidden_iframe">
<select id="tables" onchange="hideunhideCatagory(this.value)" required></select>
<p></p>
<select id="categories" style="display:none"></select>
<hr/>
<button class="submit" type="submit">Get Total</button>
</form>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// The code in this function runs when the page is loaded.
$(function() {
var tableRunner = google.script.run.withSuccessHandler(buildTableList);
var catagoryRunner = google.script.run.withSuccessHandler(buildCatagoryList);
tableRunner.getTables();
catagoryRunner.getCategories();
});
function buildTableList(tables) {
var list = $('#tables');
list.empty();
list.append('<option></option>');
for (var i = 0; i < tables.length; i++) {
if(tables[i]==''){break;}
list.append('<option>' + tables[i] + '</option>');
}
}
function buildCatagoryList(categories) {
var list = $('#categories');
list.empty();
list.append('<option></option>');
for (var i = 0; i < categories.length; i++) {
if(categories[i]==''){break;}
list.append('<option>' + categories[i] + '</option>');
}
}
function hideunhideCatagory(tableValue){
var catElem = document.getElementById("categories");
if(tableValue == "Total Calls By Date" || tableValue == "Total Appointments by Date"){
catElem.style.display = "none"
document.required = false;
}else{
catElem.style.display = "block"
document.required = true;
}
}
function formSubmit(argTheFormElement) {
var table = $("select[id=tables]").val(),
catagory = $("select[id=categories]").val();
console.log(table)
google.script.run
.withSuccessHandler(google.script.host.close)
.getTotal(table,catagory);
}
</script>
</body>
<div id="hiframe" style="display:block; visibility:hidden; float:right">
<iframe name="hidden_iframe" height="0px" width="0px" ></iframe>
</div>
</html>
Edits to Code.gs file
Replace code in Code.gs with this...
//This is a simple trigger that creates the menu item in your sheet
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Run Scripts Manually')
.addItem('Get Total','fncOpenMyDialog')
.addToUi();
}
//This function launches the dialog and is launched by the menu item
function fncOpenMyDialog() {
//Open a dialog
var htmlDlg = HtmlService.createHtmlOutputFromFile('inputHTML')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setWidth(200)
.setHeight(150);
SpreadsheetApp.getUi()
.showModalDialog(htmlDlg, 'Select table to get total for');
};
//main function called by clicking "Get Total" on the dialogue...variables are passed to this function from the formSubmit in the inputHTML javascript
function getTotal(table,catagory) {
function toDateFormat(date) {
try {return date.setHours(0,0,0,0);}
catch(e) {return;}
}
//get all values
var values = SpreadsheetApp
.openById("10pB0jDPG8HYolECQ3eg1lrOFjXQ6JRFwQ-llvdE2yuM")
.getSheetByName("Tables")
.getDataRange()
.getValues();
//declare/instantiate your variables
var tableHeaderRow, totalRow, tableFound = false;
//begin loop through column A in Tables Sheet
for (var i = 0; i<values.length; i++){
//test to see if values have already been found if so break the loop
if(tableFound == true){break;}
//check to see if value matches selected table
if (values[i][0]==table){
//start another loop immediately after the match row
for(var x=i+1; x<values.length; x++){
if(values[x][0] == "Email Address"){ //This header needs to consistantly denote the row that contains the headers
tableHeaderRow = x;
tableFound = true;
}else if(values[x][0] == "Total"){
totalRow = x;
break;
}
}
}
}
Logger.log("Header Row = "+tableHeaderRow)
Logger.log("Total Row = "+ totalRow)
var today = toDateFormat(new Date())
var columnToTotal;
if(catagory==''){
columnToTotal = values[tableHeaderRow].map(toDateFormat).map(Number).indexOf(+today);
}else{
columnToTotal = values[tableHeaderRow].indexOf(catagory);
}
var output = values[totalRow][columnToTotal];
Logger.log(output);
var emailDate = Utilities.formatDate(new Date(today),"GMT+1", "dd/MM/yyyy");
//here is where you would put your code to do something with the output
}
/** The functions below are used by the form to populate the selects **/
function getTables(){
var cFile = SpreadsheetApp.getActive();
var cSheet = cFile.getSheetByName('Validation');
var cSheetHeader = cSheet.getRange(1,1,cSheet.getLastRow(),cSheet.getLastColumn()).getValues().shift();
var tabelCol = (cSheetHeader.indexOf("Tables")+1);
var tables = cSheet.getRange(2,tabelCol,cSheet.getLastRow(),1).getValues();
return tables.filter(function (elem){
return elem != "";
});
}
function getCatagories(){
var cFile = SpreadsheetApp.getActive();
var cSheet = cFile.getSheetByName('Validation');
var cSheetHeader = cSheet.getRange(1,1,cSheet.getLastRow(),cSheet.getLastColumn()).getValues().shift();
var catagoriesCol = (cSheetHeader.indexOf("Catagory")+1);
var catagories = cSheet.getRange(2,catagoriesCol,cSheet.getLastRow(),1).getValues();
return catagories.filter(function (elem){
return elem != "";
});
}
Im starting to do some small functions and tweaks on websites with javascript, but whats really bothers me is that I dont know how to run the javascript again after a function has run?
For instance if I call a function onclick which adds a user to an array that is shown in my website, the new user wont be displayed until the page is refreshed?
How do I work around this?
EXAMPLE:
if (!localStorage.myStorage) {
// CREATE LOCALSTORAGE
}else{
myArray = JSON.parse(localStorage.myStorage);
for (var i = 0; i < myArray.length; i++) {
if(myArray[i].id === 1){
$(".firstIdContainer").append("<p>" + myArray[i].userName + "</p>");
}
if(aUserLogin[i].id === 2) {
$(".secondIdContainer").append("<p>" + myArray[i].userName + "</p>");
}
}
}
$(document).on("click", ".btnRegisterUser", function() {
// ADD NEW USER TO LOCALSTORAGE
}
How do i make sure my new user i register will be shown immediately through my for loop displaying users.
Like:
if(!localStorage.myStorage){
// CREATE LOCALSTORAGE
}
function doIt(){
var myArray = JSON.parse(localStorage.myStorage);
for(var i in myArray){
var apd = '<p>' + myArray[i].userName + '</p>';
if(myArray[i].id === 1){
$(".firstIdContainer").append(apd);
}
else if(aUserLogin[i].id === 2) {
$(".secondIdContainer").append(apd);
}
}
}
}
doIt();
$('.btnRegisterUser').click(doIt);
Try creating a contentUpdate function that resets whatever is getting displayed and creates it again based on new variables (this would go at the bottom of a function to add the user, for example). The reason that variable changes aren't reflected in the DOM is that the DOM has no abstraction for how it was made; it's output, and it won't change itself based on what its input has done after it was put in.
If you just want to insert a new row into a table you don't need to refresh the page.
jsfiddle
html:
<table id="usertable">
<tr><td>user 1</td></tr>
</table>
<input id="newuser"></input>
<input id="adduser" type="submit"></input>
js:
var button = document.getElementById('adduser');
button.onclick = function(event) {
var user = document.getElementById('newuser').value
//add the user to your array here
//add a table row
var table = document.getElementById('usertable');
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = user;
event.preventDefault();
}
I tried to build an application in which , there is one HTML page from which I get single input entry by using Submit button, and stores in the container(data structure) and dynamically show that list i.e., list of strings, on the same page
means whenever I click submit button, that entry will automatically
append on the existing list on the same page.
But in this task, firstly I try to catch that input in javascript file, and I am failing in the same. Can you tell me for this, which command will I use ?
Till now my work is :-
HTML FILE :-
<html>
<head>
<script type = "text/javascript" src = "operation_q_2.js"></script>
</head>
<body>
Enter String : <input type= "text" name = "name" id = "name_id"/>
<button type="button" onClick = "addString(this.input)">Submit</button>
</body>
</html>
JAVASCRIPT FILE:-
function addString(x) {
var val = x.name.value;
//var s = document.getElementById("name_id").getElementValue;//x.name.value;
alert(val);
}
EDITED
My New JAVASCRIPT FILE IS :-
var input = [];
function addString(x) {
var s = document.getElementById("name_id").value;//x.name.value;
input.push(input);
var size = input.length;
//alert(size);
printArray(size);
}
function printArray(size){
var div = document.createElement('div');
for (var i = 0 ; i < size; ++i) {
div.innerHTML += input[i] + "<br />";
}
document.body.appendChild(div);
//alert(size);
}
Here it stores the strings in the string, but unable to show on the web page.
See this fiddle: http://jsfiddle.net/MjyRt/
Javascript was almost right
function addString(x) {
var s = document.getElementById("name_id").value;//x.name.value;
alert(s);
}
Try to use jQuery (simpler)
function addString() {
var s = $('#name_id').val();//value of input;
$('#list').append(s+"<br/>");//list with entries
}
<div id='list'>
</div>