Listbox Selection to Textbox - listbox

Question

I have a ListBox that is populated from a spreadsheet filled with teacher's names and phone extensions. I want to be able to select a teacher's name and have it populate the textbox with the teacher's phone extension automatically. I have found several ways to do it via C++ but none using Google Apps Script...
//Create a panel which holds all the form elelemnts
var vrtMainPanel = app.createVerticalPanel().setId('vrtMainPanel');
//Create Spreadsheet Source
var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dFF0dVZXb3I1Yjlpbzg3SXFIaklEcUE');
var spTeacherList = spSheet.getSheetByName('TeacherList');
var spSubjectList = spSheet.getSheetByName('SubjectList');
var spPeriodList = spSheet.getSheetByName('PeriodList');
var spCountList = spSheet.getSheetByName('CountList');
//Create the form elements
var hdlExt = app.createServerHandler('getExt').addCallbackElement(vrtMainPanel);
var hdlTeacherName = app.createServerHandler('getTeacherName').addCallbackElement(vrtMainPanel);
var lbxTeacherName = app.createListBox().setId('lbxTeacherName').setName('lbxTeacherName').addChangeHandler(hdlExt).addChangeHandler(hdlTeacherName);
var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
lstTeacherNames.sort();
for (var l = 0; l < lstTeacherNames.length; l++) {
lbxTeacherName.addItem(lstTeacherNames[l],l);
}
var lblTeacherName = app.createLabel('Teacher Name:');
var txtTeacherName = app.createTextBox().setName('txtTeacherName').setId('txtTeacherName').setVisible(false);
var lblExt = app.createLabel('Ext:');
var txtExt = app.createTextBox().setName('txtExt').setId('txtExt');
//Set DateBox to Tomorrow's Date
var tomorrow =new Date(new Date(new Date().setHours(0,0,0,0)).setDate(new Date().getDate() + 1));// set hours, min, sec & milliSec to 0 and day=day+1
Logger.log(tomorrow);
var lblDate = app.createLabel('Date of Test:');
var boxDate = app.createDateBox().setId('boxDate').setName('boxDate').setFormat(UiApp.DateTimeFormat.DATE_SHORT).setValue(tomorrow);
var lbxSubject = app.createListBox().setId('lbxSubject').setName('lbxSubject');
var lstSubjects = spSubjectList.getRange(1,1,spSubjectList.getLastRow(),1).getValues();
lstSubjects.sort();
for (var l = 0; l < lstSubjects.length; l++) {
lbxSubject.addItem(lstSubjects[l]);
}
var lbxPeriod = app.createListBox().setId('lbxPeriod').setName('lbxPeriod');
var lstPeriods = spPeriodList.getRange(1,1,spPeriodList.getLastRow(),1).getValues();
lstPeriods.sort();
for (var l = 0; l < lstPeriods.length; l++) {
lbxPeriod.addItem(lstPeriods[l]);
}
var lblStudentNum = app.createLabel('Number of Students:');
var lbxStudentNum = app.createListBox().setId('lbxStudentNum').setName('lbxStudentNum');
var lstStudentNums = spCountList.getRange(1,1,spCountList.getLastRow(),1).getValues();
lstStudentNums.sort();
for (var l = 0; l < lstStudentNums.length; l++) {
lbxStudentNum.addItem(lstStudentNums[l]);
}
var txtSourceGrp = app.createTextBox().setName('txtSourceGrp').setVisible(false);
var txtTypeGrp = app.createTextBox().setName('txtTypeGrp').setVisible(false);
var txtElementsID = app.createTextBox().setName('txtElementsID').setText('Elements Test ID').setVisible(false);
var txtQuiaLink = app.createTextBox().setName('txtQuiaLink').setText('Quia Test Link').setVisible(false);
var txtQuiaPass = app.createTextBox().setName('txtQuiaPass').setText('Quia Test Passphrase').setVisible(false);
//Create Source Radio Button Group
var radHCopy = app.createRadioButton('group1', 'Hard-Copy').setFormValue('Hard-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Hard-Copy'));
var radECopy = app.createRadioButton('group1', 'Electronic-Copy').setFormValue('Electronic-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Electronic-Copy'));
//Create Type Radio Button Group
var radTExam = app.createRadioButton('group2', 'Teacher-Made Exam').setFormValue('Teacher-Made Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Teacher-Made Exam'));
var radEExam = app.createRadioButton('group2', 'Elements Exam').setFormValue('Elements Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Elements Exam'));
var radQExam = app.createRadioButton('group2', 'Quia Exam').setFormValue('Quia Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Quia Exam'));
var btnCreate = app.createButton('Create Event');
//Client Handlers for textBoxes
var showTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(true);
var hideTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(false);
radEExam.addClickHandler(showTxtElementHandler);
radTExam.addClickHandler(hideTxtElementHandler);
radQExam.addClickHandler(hideTxtElementHandler);
var showTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(true);
var hideTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(false);
radQExam.addClickHandler(showTxtQuiaLinkHandler);
radTExam.addClickHandler(hideTxtQuiaLinkHandler);
radEExam.addClickHandler(hideTxtQuiaLinkHandler);
var showTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(true);
var hideTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(false);
radQExam.addClickHandler(showTxtQuiaPassHandler);
radTExam.addClickHandler(hideTxtQuiaPassHandler);
radEExam.addClickHandler(hideTxtQuiaPassHandler);
//Create handler which will execute 'createEvents(e)' on clicking the button
var evtHandler = app.createServerClickHandler('createEvents');
evtHandler.addCallbackElement(vrtMainPanel);
//Add this handler to the button
btnCreate.addClickHandler(evtHandler);
//Add all the elemnts to the panel
var formGrid = app.createGrid(12,3).setCellPadding(3);
vrtMainPanel.add(formGrid);
formGrid
.setWidget(0,0,lbxTeacherName)
.setWidget(0,1,txtExt)
.setWidget(0,2,txtTeacherName)
.setWidget(1,0,lbxPeriod)
.setWidget(1,1,lbxSubject)
.setWidget(2,0,lblDate)
.setWidget(2,1,boxDate)
.setWidget(3,0,lblStudentNum)
.setWidget(3,1,lbxStudentNum)
.setWidget(4,0,radHCopy)
.setWidget(4,1,radECopy)
.setWidget(5,0,radTExam)
.setWidget(6,0,radEExam)
.setWidget(6,1,txtElementsID)
.setWidget(7,0,radQExam)
.setWidget(7,1,txtQuiaLink)
.setWidget(8,1,txtQuiaPass)
.setWidget(9,0,txtSourceGrp)
.setWidget(9,1,txtTypeGrp)
.setWidget(10,0,btnCreate)
//Add this panel to the application
app.add(vrtMainPanel);
//Return the application
return app;
}
function getExt(e){
var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dFF0dVZXb3I1Yjlpbzg3SXFIaklEcUE');
var spTeacherList = spSheet.getSheetByName('TeacherList');
var lstTeacherNames = spTeacherList.getRange(1,2,spTeacherList.getLastRow(),1).getValues();
var app = UiApp.getActiveApplication();
var txtExt = app.getElementById('txtExt');
txtExt.setText(lstTeacherNames[Number(e.parameter.lbxTeacherName)][0]);// we get the value in the 2D array returned by getValues()
return app;
}
function getTeacherName(e){
var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dFF0dVZXb3I1Yjlpbzg3SXFIaklEcUE');
var spTeacherList = spSheet.getSheetByName('TeacherList');
var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
var app = UiApp.getActiveApplication();
var txtTeacherName = app.getElementById('txtTeacherName');
txtTeacherName.setText(lstTeacherNames[e.parameter.lbxTeacherName][0]);// we get the value in the 2D array returned by getValues()
return app;
}
// CREATE EVENT FUNCTION
function createEvents(e){
//Get the active application
var app = UiApp.getActiveApplication();
try{
//Get the entries
var ssTeacher = e.parameter.txtTeacherName;
var ssExt = e.parameter.txtExt;
var ssSubject = e.parameter.lbxSubject;
var ssPeriod = e.parameter.lbxPeriod;
var ssStudentNum = e.parameter.lbxStudentNum;
var ssSource = e.parameter.txtSourceGrp;
var ssType = e.parameter.txtTypeGrp;
var ssElementsID = e.parameter.txtElementsID;
var ssQuiaLink = e.parameter.txtQuiaLink;
var ssQuiaPass = e.parameter.txtQuiaPass;
var eventDate = e.parameter.boxDate;
var eventCalSubject = ssPeriod + ": " + ssTeacher + " (" + ssStudentNum + ")";
var eventCalDetails = "Extension: " + ssExt + "\n" +
"Subject: " + ssSubject + "\n\n" +
"Source: " + ssSource + "\n" +
"Type: " + ssType + "\n" +
"Elements ID: " + ssElementsID + "\n" +
"Quia Test Link: " + ssQuiaLink + "\n" +
"Quia Passphrase: " + ssQuiaPass;
//Get the calendar
var cal = CalendarApp.getCalendarById('davie.k12.nc.us_d2mv2eb8aspuant1vb5j6r3sis#group.calendar.google.com');//Change the calendar id
//Create the events
var newID = cal.createAllDayEvent(eventCalSubject, eventDate, {description:eventCalDetails}).getId();
//Log the entries in a spreadsheet
var sheet = SpreadsheetApp.openById('0Aur3owCpuUY-dGJIOGZ1LXhqT2FNMGVXSGNJazFnUmc').getActiveSheet();//Change the spreadhseet key to yours
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 13).setValues([[new Date(),eventDate,ssTeacher,ssExt,ssSubject,ssPeriod,ssSource,ssType,ssElementsID,ssQuiaLink,ssQuiaPass,ssStudentNum,newID]]);
return app;
//Show the confirmation message
app.add(app.createLabel('Kurzweil Calendar Event created successfully...'));
//Make the form panel invisible
app.getElementById('vertMainPanel').setVisible(false);
return app;
}
//If an error occurs, show it on the panel
catch(e){
app.add(app.createLabel('Error occured: '+ e));
return app;
}
}

Answer 1

As mentioned in my first comment you have to create a server Handler to get that but your script would need a few minor modifications :
The listBox must be modified to return a numeric index instead of a name, this will simplify the process of getting the right data on the spreadsheet (when addItem(arg1,arg2) has 2 arguments the first one is shown while the second is returned to the handler function >> you'll have to modify your other handler functions in consequence, use the same principle I used in the getPhone(e) function)
the Labels that you created where not visible so I changed the grid values
The way you get data in this new version right from the spreadsheet is really a good idea, I regret I didn't think about it myself ;-)
keep in mind that values returned by e.parameter.varName are strings, that's why I used Number(e.parameter.lbxTeacherName) to get the value in the spreadsheet data.
I assumed that the phone extensions where in column B on the teacher data sheet... if not modify accordingly in the getPhone handler function.
(edit : I changed the "tomorrow" definition to skip string manipulation but it's a detail)
Here is the full modified code :
function doGet() {
var app = UiApp.createApplication().setTitle('DHS: Kurzweil Calendar');
//Create a panel which holds all the form elelemnts
var vrtMainPanel = app.createVerticalPanel().setId('vrtMainPanel');
//Create Spreadsheet Source
var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dFF0dVZXb3I1Yjlpbzg3SXFIaklEcUE');
var spTeacherList = spSheet.getSheetByName('TeacherList');
var spSubjectList = spSheet.getSheetByName('SubjectList');
var spPeriodList = spSheet.getSheetByName('PeriodList');
var spCountList = spSheet.getSheetByName('CountList');
//Create the form elements
var lblTeacherName = app.createLabel('Teacher Name:');
var teacherNameHandler = app.createServerHandler('getPhone').addCallbackElement(vrtMainPanel);
var lbxTeacherName = app.createListBox().setId('lbxTeacherName').setName('lbxTeacherName').addChangeHandler(teacherNameHandler);
var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
lstTeacherNames.sort();
for (var l = 0; l < lstTeacherNames.length; l++) {
lbxTeacherName.addItem(lstTeacherNames[l],l);
}
var lblExt = app.createLabel('Ext:');
var txtExt = app.createTextBox().setName('txtExt').setId('txtExt');
//Set DateBox to Tomorrow's Date
var tomorrow =new Date(new Date(new Date().setHours(0,0,0,0)).setDate(new Date().getDate() + 1));// set hours, min, sec & milliSec to 0 and day=day+1
Logger.log(tomorrow);
var lblDate = app.createLabel('Date:');
var boxDate = app.createDateBox().setId('boxDate').setName('boxDate').setFormat(UiApp.DateTimeFormat.DATE_SHORT).setValue(tomorrow);
var lbxSubject = app.createListBox().setId('lbxSubject').setName('lbxSubject');
var lstSubjects = spSubjectList.getRange(1,1,spSubjectList.getLastRow(),1).getValues();
lstSubjects.sort();
for (var l = 0; l < lstSubjects.length; l++) {
lbxSubject.addItem(lstSubjects[l]);
}
var lbxPeriod = app.createListBox().setId('lbxPeriod').setName('lbxPeriod');
var lstPeriods = spPeriodList.getRange(1,1,spPeriodList.getLastRow(),1).getValues();
lstPeriods.sort();
for (var l = 0; l < lstPeriods.length; l++) {
lbxPeriod.addItem(lstPeriods[l]);
}
var lblStudentNum = app.createLabel('Number of Students:');
var lbxStudentNum = app.createListBox().setId('lbxStudentNum').setName('lbxStudentNum');
var lstStudentNums = spCountList.getRange(1,1,spCountList.getLastRow(),1).getValues();
lstStudentNums.sort();
for (var l = 0; l < lstStudentNums.length; l++) {
lbxStudentNum.addItem(lstStudentNums[l]);
}
var txtSourceGrp = app.createTextBox().setName('txtSourceGrp').setVisible(false);
var txtTypeGrp = app.createTextBox().setName('txtTypeGrp').setVisible(false);
var txtElementsID = app.createTextBox().setName('txtElementsID').setText('Elements Test ID').setVisible(false);
var txtQuiaLink = app.createTextBox().setName('txtQuiaLink').setText('Quia Test Link').setVisible(false);
var txtQuiaPass = app.createTextBox().setName('txtQuiaPass').setText('Quia Test Passphrase').setVisible(false);
//Create Source Radio Button Group
var radHCopy = app.createRadioButton('group1', 'Hard-Copy').setFormValue('Hard-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Hard-Copy'));
var radECopy = app.createRadioButton('group1', 'Electronic-Copy').setFormValue('Electronic-Copy').addClickHandler(app.createClientHandler().forTargets(txtSourceGrp).setText('Electronic-Copy'));
//Create Type Radio Button Group
var radTExam = app.createRadioButton('group2', 'Teacher-Made Exam').setFormValue('Teacher-Made Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Teacher-Made Exam'));
var radEExam = app.createRadioButton('group2', 'Elements Exam').setFormValue('Elements Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Elements Exam'));
var radQExam = app.createRadioButton('group2', 'Quia Exam').setFormValue('Quia Exam').addClickHandler(app.createClientHandler().forTargets(txtTypeGrp).setText('Quia Exam'));
var btnCreate = app.createButton('Create Event');
//Client Handlers for textBoxes
var showTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(true);
var hideTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(false);
radEExam.addClickHandler(showTxtElementHandler);
radTExam.addClickHandler(hideTxtElementHandler);
radQExam.addClickHandler(hideTxtElementHandler);
var showTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(true);
var hideTxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(false);
radQExam.addClickHandler(showTxtQuiaLinkHandler);
radTExam.addClickHandler(hideTxtQuiaLinkHandler);
radEExam.addClickHandler(hideTxtQuiaLinkHandler);
var showTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(true);
var hideTxtQuiaPassHandler = app.createClientHandler().forTargets(txtQuiaPass).setVisible(false);
radQExam.addClickHandler(showTxtQuiaPassHandler);
radTExam.addClickHandler(hideTxtQuiaPassHandler);
radEExam.addClickHandler(hideTxtQuiaPassHandler);
//Create handler which will execute 'createEvents(e)' on clicking the button
var evtHandler = app.createServerClickHandler('createEvents');
evtHandler.addCallbackElement(vrtMainPanel);
//Add this handler to the button
btnCreate.addClickHandler(evtHandler);
//Add all the elemnts to the panel
var formGrid = app.createGrid(12,2).setCellPadding(3);
vrtMainPanel.add(formGrid);
formGrid
.setWidget(0,0,lblTeacherName)
.setWidget(1,0,lbxTeacherName)
.setWidget(0,1,lblExt)
.setWidget(1,1,txtExt)
.setWidget(2,0,lbxPeriod)
.setWidget(2,1,lbxSubject)
.setWidget(3,0,lblDate)
.setWidget(3,1,boxDate)
.setWidget(4,0,lblStudentNum)
.setWidget(4,1,lbxStudentNum)
.setWidget(5,0,radHCopy)
.setWidget(5,1,radECopy)
.setWidget(6,0,radTExam)
.setWidget(7,0,radEExam)
.setWidget(7,1,txtElementsID)
.setWidget(8,0,radQExam)
.setWidget(8,1,txtQuiaLink)
.setWidget(9,1,txtQuiaPass)
.setWidget(10,0,txtSourceGrp)
.setWidget(10,1,txtTypeGrp)
.setWidget(11,0,btnCreate)
//Add this panel to the application
app.add(vrtMainPanel);
//Return the application
return app;
}
function getPhone(e){
var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dFF0dVZXb3I1Yjlpbzg3SXFIaklEcUE');
var spTeacherList = spSheet.getSheetByName('TeacherList');
var lstTeacherNames = spTeacherList.getRange(1,2,spTeacherList.getLastRow(),1).getValues();
var app = UiApp.getActiveApplication();
var txtExt = app.getElementById('txtExt');
txtExt.setText(lstTeacherNames[Number(e.parameter.lbxTeacherName)][0]);// we get the value in the 2D array returned by getValues()
return app;
}
EDIT : following your last comment.
Although the method you used to retrieve the teacher's name is excellent (and I guess indeed that I'd have chosen the same approach ) there is another way to achieve it which is less obvious but much more efficient in terms of "number of code lines" .
The trick it to store the teacher name as a TAG on the extension phone number and to retrieve it from there in the createEvent() handler.
The code needs only a very minor modification (get 2 columns of data from the SS and assign a value to the tag+get that value - see comments in code) so I won't reproduce the whole thing, just the relevant part below :
function getPhone(e){
var spSheet = SpreadsheetApp.openById('0AnqSFd3iikE3dEtBQndOYVNEbFVWcDlyQmFoaUV3a1E');
var spTeacherList = spSheet.getSheetByName('TeacherList');
var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),2).getValues();// get 2 columns instead of only one
Logger.log(lstTeacherNames);
var app = UiApp.getActiveApplication();
var txtExt = app.getElementById('txtExt');
txtExt.setText(lstTeacherNames[Number(e.parameter.lbxTeacherName)][1]);// set the phone number
txtExt.setTag(lstTeacherNames[Number(e.parameter.lbxTeacherName)][0]);// set teacher's name in the TAG
return app;
}
function createEvents(e){
//Get the active application
var app = UiApp.getActiveApplication();
//Get the entries
var ssTeacher = e.parameter.txtExt_tag;
Logger.log('teacher = '+ssTeacher)
...