I have a google script which reads and writes between a google spreadsheet and a google form. It's basically a form to access a materials database.
When first accessing the form, it shows all the fields blank, a populated 'selector' listbox of material id's (CW_ID) and an option for "New" part in the selector listbox. If user stays on "New", the fields stay blank for user to populate them manually and appends it as a new item in the database. If user scrolls through the 'selector' listbox and selects a CW_ID, it will pull from the spreadsheet and populate the fields with data corresponding to the selected CW_ID, for the user to then edit (modify a detail about a part).
Because I am using a SQL structure for my database, I have a couple linked tables:
materials table (which holds most information about the part, including an ID for manufacturer [manufacturer_ID])
manufacturers table (which is linked to the materials.manufacturer_ID)
Right now, the form only uses the materials sheet to populate the fields, so in the field for 'manufacturer', it only shows the ID number. For user purposes, I want the script to check the manufacturer_ID shown in the materials sheet, go into manufacturers sheet, find a match and have the manufacturers listbox show it as the currently selected index. (Or just have the name of the manufacturer show up in the field)
This is part of my script so far:
(Scroll to bottom for "//****THIS IS THE PART I'M WORKING ON")
function doGet() {
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/something")
var materialsSheet = ss.getSheetByName('materials');
var manufacturersSheet = ss.getSheetByName('manufacturers');
var vendorsSheet = ss.getSheetByName('vendors');
var usersSheet = ss.getSheetByName('users');
var projectApp = UiApp.createApplication();
projectApp.setTitle("Materials Form");
var activeEmail = Session.getActiveUser().getEmail();
//I create the vertical panel.
var panel = projectApp.createVerticalPanel().setId('face');
//Here is where I actually create the drop down menu, and assign the function "goSelection" to be activated whenever a selection is made.
var selector = projectApp.createListBox(true);
selector.setName('selectionBox').setId('selectionBox').addItem('New');
var materialsData = materialsSheet.getDataRange().getValues();
//do until row is less than length of
for (var i=0; i < materialsData.length; i++){
if (materialsData [i][1] == "Email"){
//if row in Column B does not equal gmail, skip to i++
continue;
}
//add Column C (CW_ID) of current row to the selector list
selector.addItem(materialsData [i][2]);
}
selector.setSelectedIndex(0);
var selectHandler = projectApp.createServerHandler('goSelection');
selectHandler.addCallbackElement(panel);
selector.addChangeHandler(selectHandler);
//Here is where I create the drop down menu to show list of manufacturers from manufacturers sheet
var manufSelectorLabel = projectApp.createHTML("<br><b>Manufacturer</b><br>").setWidth('100%');
var manufSelector = projectApp.createListBox(true);
manufSelector.setName('manufSelectionBox').setId('manufSelectionBox').addItem('New');
var manufacturersData = manufacturersSheet.getDataRange().getValues();
//do until row is less than length of
for (var i=0; i < manufacturersData.length; i++){
if (manufacturersData [i][1] == "Email"){
//if row in Column B does not equal gmail, skip to i++
continue;
}
//add Column C (Manufacturers) of current row to the selector list
manufSelector.addItem(manufacturersData [i][3]);
}
manufSelector.setSelectedIndex(0);
var manufSelected = manufSelector.SelectedItem;'
//**I am unsure whether this should have it's own function
//var manufSelectHandler = projectApp.createServerChangeHandler('goManuf');
//manufSelectHandler.addCallbackElement(panel);
//manufSelector.addChangeHandler(manufSelectHandler);
var gmailLabel = projectApp.createHTML("<br><b>Gmail:</b><br>").setWidth('100%');
var gmailField = projectApp.createTextArea().setSize('100%', '25px');
gmailField.setName('gmailArea').setId('gmailArea');
gmailField.setText(activeEmail);
var savedLabel = projectApp.createLabel('Thank you for your submission.');
savedLabel.setVisible(false).setId('sLabel');
//At this point, I'm actually declaring the variables for all the fields and text for the actual form.
var selectorLabel = projectApp.createHTML("<br><b>Select CW_ID from list.</b>").setId('selectLabel');
var descriptionLabel = projectApp.createHTML("<br><b>Description</b><br>").setWidth('100%');
var descriptionField = projectApp.createTextArea().setSize('100%', '100px');
descriptionField.setName('descriptionArea').setId('descriptionArea');
var manufacturerLabel = projectApp.createHTML("<br><b>Manufacturer</b></br>").setWidth('100%');
var manufacturerField = projectApp.createTextArea().setSize('100%x', '25px');
manufacturerField.setName('manufacturerArea').setId('manufacturerArea');
var manufacturerListLabel = projectApp.createHTML("<br><b>ManufacturerList</b></br>").setWidth('100%');
var manufacturerListField = projectApp.createTextArea().setSize('100%x', '25px');
manufacturerListField.setName('manufacturerListArea').setId('manufacturerListArea');
var modelnumberLabel = projectApp.createHTML("<br><b>Model Number</b><br>").setWidth('100%');
var modelnumberField = projectApp.createTextArea().setSize('100%', '25px');
modelnumberField.setName('modelnumberArea').setId('modelnumberArea');
//Next, i create the save button and assign the function "saved" to be activated whenever the button is pressed.
var saveButton = projectApp.createButton('Save');
var saveHandler = projectApp.createServerHandler('saved');
saveHandler.addCallbackElement(panel);
saveButton.addClickHandler(saveHandler);
//Now that all the componentes of the form have been declared and set up, I'm going to assemble them on the panel.
panel.setSpacing(6);
panel.add(nameLabel);
panel.add(nameField);
panel.add(gmailLabel);
panel.add(gmailField);
panel.add(selectorLabel);
panel.add(selector);
panel.add(descriptionLabel);
panel.add(descriptionField);
panel.add(manufSelectorLabel);
panel.add(manufSelector);
panel.add(manufacturerLabel);
panel.add(manufacturerField);
panel.add(modelnumberLabel);
panel.add(modelnumberField);
panel.add(saveButton);
panel.add(savedLabel);
projectApp.add(panel);
return projectApp;
}
//This function looks to see what has been selected in the drop down menu, and then pulls the appropriate data from the spreadsheet to display in the fields.
function goSelection(e){
var activeEmail = Session.getActiveUser().getEmail();
var app = UiApp.getActiveApplication();
var gmailField = app.getElementById('gmailArea');
var nameField = app.getElementById('nameArea');
var chosen = e.parameter.selectionBox;
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/something")
var materialsSheet = ss.getSheetByName('materials');
var manufacturersSheet = ss.getSheetByName('manufacturers');
var vendorsSheet = ss.getSheetByName('vendors');
var materialsData = materialsSheet.getDataRange().getValues();
var manufacturersData = manufacturersSheet.getDataRange().getValues();
var vendorsData = vendorsSheet.getDataRange().getValues();
var panel = app.getElementById('face');
var standardpartField = app.getElementById('standardpartArea');
var descriptionField = app.getElementById('descriptionArea');
var manufacturerField = app.getElementById('manufacturerArea');
var manufacturerListField = app.getElementById('manufSelectionBox');
var modelnumberField = app.getElementById('modelnumberArea');
if (chosen != 'New') {
for (var i=1; i < materialsData.length; i++){
if (materialsData [i][1] == "Email"){
//if row in Column B does not equal gmail, skip to i++
continue;
}
if (materialsData [i][2] != chosen){
continue;
}
nameField.setText(materialsData [i][0]);
gmailField.setText(materialsData [i][1]);
standardpartField.setText(materialsData [i][3]);
descriptionField.setText(materialsData [i][4]);
//****THIS IS THE PART I'M WORKING ON
//set manufacturerField to manufacturer of current row
//loop through manufacturer sheet until row matches with manufacturersField
//when a match is found, selector box index to same row
manufacturerField.setText(materialsData [i][5]);
for (var i=1; i < manufacturersData.length; i++){
if (manufacturersData [i][1] == "Email"){
//if row in Column B does not equal Email, skip to i++
continue;
}
if (manufacturersData [i][2] != manufacturerField){
continue;
}
manufacturerListField.setSelectedIndex(i);
}
modelnumberField.setText(materialsData [i][6]);
}
}
This makes sense to me, but it doesn't work. I click on a part in the selector listbox, and all the info populates into the fields, as I want it to. However, the manufacturer listbox does not jump to the proper manufacturer (as populated in the manufacturer field), it just sits there and stays as is.
(See image to get an idea of what the form looks like)
http://oi61.tinypic.com/6h6tqp.jpg
Manufacturer listbox and field show up, but right now, only the manufacturer field changes to show the data when a part is selected)
Any help would be GREATLY appreciated! :)
Here is some HTML that can get you started with the HTML Service:
Input Form HTML
<div>
<div>
Name:
<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
</div>
<br/>
<div>
Gmail:
<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
</div>
<br/>
<div>Select_CW_ID_From List:</div>
<select name="CW_ID" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
</div>
<br/>
<div>Standard Part</div>
<input type="text"/>
<br/>
<br/>
<div>Description</div>
<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
</div>
<script>
function onSuccess(argReturnValue) {
alert('was successful ' + argReturnValue);
}
google.script.run.withSuccessHandler(onSuccess)
.nameOfFunctionInGS_File();
</script>
Download Notepad++: Notepad plus plus
And design your HTML in that. Then create an HTML file in your Apps Script project.
Your doGet() should just have the code that serves the HTML.
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('myHTML_File_Name_Here')
.evaluate() // evaluate MUST come before setting the NATIVE mode
.setTitle('Materials Form')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
};
Create another .gs file for dealing with the data. That's where all your code for writing data to the spreadsheet will go.
If you need to populate select boxes, you can do that with JavaScript in a script tag of the HTML.
With what I've given you, you should be able to create a Stand Alone Apps Script HTML Service app. Publish it, and run it. You probably did that with your current project.
Related
Multi select option list image
I Use a multi select option list and create a save button. write a query like that is INSERT and UPDATE same action occur on single save button.My sql query like this below,
UPDATE Demo
SET ApprovalPathName=#ApprovalPathName,
LevelID=#LevelID
WHERE ProjectID=#ProjectID
and Ordering=#Ordering
IF ##ROWCOUNT = 0
insert into Demo(ApprovalPathName,LevelID,Ordering,ProjectID)
VALUES(#ApprovalPathName,#LevelID,#Ordering,#ProjectID)
As the picture, 3 data insert on my Demo table like this,
Database demo table image
The problem I faced an example like that from selected multi option list if i deleted or unselect or remove the last value and save it to database then upper selected 2 value updated but last value which one i remove on frontend and previously store in on DB not deleted.
So, i want to write a query like that "only selected value updated if which one not used also remove from frontend multi select option but previously its inserted , it's will deleted"
Here is FrontEnd code with script
function fab_editgrppath() {
setTimeout(function () {
for (var i = 0; i < pathnameval.length; i++) {
//var fab_pathname = pathname;
//var path_name = fab_pathname[i];
var fab_pathnameval = pathnameval;
var LevelID = fab_pathnameval[i];
ordering = i + 1;
var obj = new Object();
obj.LevelID = LevelID;
obj.ordering = ordering;
obj.ProjectID = $('#projectid').val();
obj.ApprovalPathName = fabapprovalpathname;
obj.Mode = 'FABPATHEDITGRPLEVEL';
var DBSP = new DB_SP_CONNECT();
DBSP.ProcedureName = "POMS_POApprovalLevelProc";
DBSP.obj = obj;
DBSP.isasync = false;
var o = DBSP.call_DB_Procedure();
o = o.data;
notify('Saved successfully.', 'GREEN');
}
fabricationpathlevelset();
}, 200);
}
<div class="sm-3"><div class="form-group"><div class="row"><label for="selectTo">Selected</label></div><div class="row"><select name="selectTo" id="selectTo" size="5" class="form-control input-medium" multiple="multiple">#Html.Raw(ViewData["GetSelectedGrpOnFabPath"])</select></div></div></div><button type="button" class="btn btn-default w-100" onclick="fab_editgrppath();">Save</button>
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.
Ok this is a bit complicated. Basically I populate a select with an array. Then, I want to create another select, and populate it with the same array again. I believe that the populate function is not called properly when a new select is created, but I cannot find when to call it, to populate the created select.
1st: I query my db to get some member names, and use json_encode my resulting array, to create a json array.
$result_array = Array();
while($stmt->fetch()) {
$result_array[] = $name;
}
$json_array = json_encode($result_array);
then I echo that array to a javascript array, and populate a select tag with the result. All this happens on window load.
<script>
var members = <?php echo $json_array; ?>;
function populate()
{
var sel = document.getElementById('members');
var fragment = document.createDocumentFragment();
members.forEach(function(member, index) {
var opt = document.createElement('option');
opt.innerHTML = member;
opt.value = member;
fragment.appendChild(opt);
});
sel.appendChild(fragment);
}
window.onload = populate;
</script>
The html div containing the select:
<div id="Members">
<select id="members"></select>
</div>
<input type="button" value="+" onClick="addInput('Members'); populate();">
and then I use another script to create more divs
<script>
var counter = 1;
var limit = 3;
function addInput(divName)
{
if (counter == limit)
{
var message = document.getElementById("linkLimit");
message.innerHTML = "Maximum amount of links reached";
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "<select id='members'></select>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
However, the resulting selects are never actually populated. I believe that the populate function is not called properly, but I cannot find when to call it, to populate the created select.
Alternatively, for a static amount of select inputs, I tried doing
<div id="Members">
<select id="members" name="members"></select>
<select id="members1" name="members"></select>
<select id="members2" name="members"></select>
</div>
but again, only the first select is populated
By using a for loop and giving members, members1, members2 through an array, all three lists are populated, however, this is not so functional, since I can't know how many members the user will want to select
I am doing a HTML page with employee leave details. In that page, pending leave option having edit option. User may have edit that leave while its in PENDING. Once I click the edit button, the correspond row details will pass to update page. Leave type should be an combo box. So how to pass that combobox and make that variable as selected.
For example, When i click the edit button in Casual Leave category, the output should be
<select id="select_type">
<option value="Earned Leave">Earned Leave</option>
<option value="Casual Leave" selected>Casual Leave</option>
</select>
P.S: Need to pass the variable via javascript
So my javascript to pass the variable as below
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
var x = decodeURIComponent(GetUrlValue('ReqType'));
var y = decodeURIComponent(GetUrlValue('FromDate'));
var z = decodeURIComponent(GetUrlValue('ToDate'));
var z1 = decodeURIComponent(GetUrlValue('NoDays'));
So pass the value to the combo box text and make it as selected. Hope you got my point.
You can make it like this, if you have the option value
var yourSelectedValue = somevalue;
$('#select_type option[value='+yourSelectedValue +']').attr('selected','selected');
Or like this
$("#select_type").val(yourSelectedValue );
I want to display the all the department names in the Dept Table in a combo box.
I have a function which fetches all the Dept name.
How can I dynamically create combo box in runtime, using javaScript or jQuery.
HTML CODE
<select id="searchDepartments">
</select> <input type="button" value="Search" onClick="search();" />
JavaScript function
function getDepartments(){
EmployeeManagement.getDeptList(function(deptList/*contains n-(dept.id, dept.name)*/{
for(i = 0; i<deptList.length; i++){
How can I able to write a code that generates(adds) options to the list?
The process is to create an option node for each item in the list, and add it as a child of the select element.
In plain javascript:
var sel = document.getElementById('searchDepartments');
var opt = null;
for(i = 0; i<deptList.length; i++) {
opt = document.createElement('option');
opt.value = deptList[i].id;
opt.innerHTML = deptList[i].name;
sel.appendChild(opt);
}
There's a plugin that already does this, you may want to check it out. Another benefit of this plugin, is that it has autocomplete built in.
A drop-down combo box, or a select box
into which you can type text to narrow
down the visible result set. This code
is a compilation of the JQuery
Autocomplete plugin as well as other
JQuery plugins, and is still in the
alpha stage of development.
A plain and simple JavaScript script would look as follows:
function AddOption(comboBoxID, displayText, displayValue)
{
var optionItem = document.createElement("option");
optionItem.text = displayText;
optionItem.value = displayValue;
document.getElementById(comboBoxID).options.add(optionItem);
}
You can use the following generic function:
function addOption(text,value,cmbId) {
var newOption = new Option(text, value);
var lst = document.getElementById(cmbId);
if (lst) lst.options[lst.options.length] = newOption;
}
You can create a datalist new option in html5:
<input type="text" class="form-control" id="your_id" list="your_list"
placeholder="Status"/>
<datalist id="your_list">
</datalist>
and fill it with a jquery .append function:
for(var i=0, len=resultado.response['id'].length; i<len; i++)
{
list += '<option value="' +resultado.response['data'][i]+" ( "+resultado.response['id'][i]+" ) "+ '"></option>';
}
dataList.html(list);