Open infowindow with sidebar on Google Fusion Table - google-fusion-tables

For the life of me, I can't get this map to open infowindows on the sidebar link clicks: http://web.redding.com/static/redd/asphalt/prod/xmas-lights-2014-complex.html
Here's the fusion table: https://www.google.com/fusiontables/DataSource?docid=1WrvKdTypAmZozAIVeOw4vBX2g1hPInyVyuqn8GUM
Which looks like this (CSV):
Location,Description,Photo,Winner,Name
"1101 Twin View Boulevard, Redding CA",Redding's finest media organization with decades of experience & class.,http://mediaassets.redding.com/photo/2014/03/15/youthcamp17b-01_3471502_ver1.0.jpg,,The Record Searchlight
"1500 Court Street, Redding CA",Shasta Courthouse,,,
"777 Cypress Avenue, Redding CA",City Hall,,,
All I want to do is be able to click on the links in the sidebar and have the associated infowindow open on the map.
I'm new to javascript so I wouldn't be surprised if there's something obvious I'm overlooking.
Code from the linked page:
function createSidebar() {
//set the query using the parameter
var query = new google.visualization.Query(queryText);
var queryText = encodeURIComponent("SELECT 'Name','Description' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(getData);
}
function myFTclick(row) {
var Name = FTresponse.getDataTable().getValue(row,0);
var Description = FTresponse.getDataTable().getValue(row,1);
var Location = FTresponse.getDataTable().getValue(row,2);
var Photo = FTresponse.getDataTable().getValue(row,5);
var Winner = FTresponse.getDataTable().getValue(row,7);
var position = new google.maps.LatLng(lat, lng);
// Set up and create the infowindow
if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
var content = '<div class="FT_infowindow">' + name;
if (Description) content += '<br>'+Description;
if (Location) content += '<br>'+Location;
if (Photo) content += '<br>'+Photo;
if (extraContent) content += "<br>["+extraContent+"]";
content += '<br>'+'zoom in';
content += '</div>';
infoWindow.setOptions({
content: content,
pixelOffset: null,
position: position
});
// Infowindow-opening event handler
infoWindow.open(map);
}
var FTresponse = null;
//define callback function, this is called when the results are returned
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
//concatenate the results into a string, you can build a table here
fusiontabledata = "<table><tr>";
fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>";
fusiontabledata += "</tr><tr>";
for(i = 0; i < numRows; i++) {
fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 1) + "</a></td>";
fusiontabledata += "</tr><tr>";
}
fusiontabledata += "</table>"
//display the results on the page
document.getElementById('sidebar').innerHTML = fusiontabledata;
}

You have a javascript error in your code, look at the javascript console: Uncaught Error: Invalid column index 2. Should be an integer in the range [0-1].
Your query only includes two columns from the table:
var queryText = encodeURIComponent("SELECT 'Name','Description' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX");
Which means you can't get any columns beyond 0 and 1, so this will not work:
function myFTclick(row) {
var Name = FTresponse.getDataTable().getValue(row,0);
var Description = FTresponse.getDataTable().getValue(row,1);
var Location = FTresponse.getDataTable().getValue(row,2);
var Photo = FTresponse.getDataTable().getValue(row,5);
var Winner = FTresponse.getDataTable().getValue(row,7);
You need to include those in your query:
var queryText = encodeURIComponent("SELECT 'Name','Description','Location','Photo','Winner' FROM 1uQLxgNdNR_etBFP8O_0YNDA38PqyZB3NidIJfsgX");
Then access them in that order:
function myFTclick(row) {
var Name = FTresponse.getDataTable().getValue(row,0);
var Description = FTresponse.getDataTable().getValue(row,1);
var Location = FTresponse.getDataTable().getValue(row,2);
var Photo = FTresponse.getDataTable().getValue(row,3);
var Winner = FTresponse.getDataTable().getValue(row,4);

Related

Building Multiple Tooltips From Db

I am converting my present map scripts from Google to Leaflet. I have a map with 5 layers, each with multiple locations that are stored in a Db table. I have two routines in the process. The first gathers the data from the Db and builds an XML file that is passed to the second. The second then parses the XML file and build individual L.marker content as follows:
for (var i = 0; i < numMarkers; i++) {
var mkrType = markers[i].getAttribute("type");
var mkrName = markers[i].getAttribute("name");
var mkrLat = markers[i].getAttribute("lat");
var mkrLon = markers[i].getAttribute("lon");
var mkrIcon = "files_images/mis_images/icon_tri_green.png"; break;
var mkrText = "<b>" + mkrName + "</b><br>Lat: " + mkrLat + " Lon: " + mkrLon;
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(cemeteries);
}
The script produces (Uncaught TypeError: t.addLayer is not a function) on the last line of the for loop (L.marker).
I figure the fault is that the loop/L.marker is within a function. If so, what and how do I pass what is need to make the code work.
TIA for any assistance
jdadwilson
My bad... Cemeteries was defined, I did not provide all of the function. Here it is...
function init_all_map(lyrActive) { 'use strict';
var cemeteries = L.layerGroup(),
churches = L.layerGroup(),
markers = L.layerGroup(),
schools = L.layerGroup(),
towns = L.layerGroup();
var overlays = { "Cemeteries": cemeteries, "Churches": churches, "Markers": markers, "Schools": schools, "Towns": towns };
var mbAttr = 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' + 'Imagery © Mapbox',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
msGeo = window.SERVER_PATH + 'files_geojson/geopoly_holmes.json';
var streets = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'),
county = new L.GeoJSON.AJAX(window.SERVER_PATH + "files_geojson/geopoly_holmes.json", {style: {color: "DarkGray", weight: 2, fillColor: ""}} );
var baseLayers = {"Streets": streets, "County": county};
var map = L.map('map_canvas_lg', {center: [CO_CENTER_LAT, CO_CENTER_LON], zoomControl: true, zoom: 10, minZoom: 8, maxZoom: 14,
layers: [streets, county, cemeteries, churches, markers, schools, towns]});
var lyrName = ["cemeteries", "churches", "markers", "schools", "towns"];
var lyrType = ["cem", "chu", "mkr", "sch", "twn"];
var numLays = lyrType.length;
var xmlType,
thisLayer,
newIcon;
for ( i=0; i<numLays; i++ ) {
//console.log("Layer: " + lyrType[i]);
thisLayer = lyrName[i];
console.log("thisLayer: " + thisLayer);
switch(lyrType[i]) {
case "cem":
xmlType = window.SERVER_PATH + "files_xml/xml_cemeteries.php";
newIcon = window.SERVER_PATH + "files_images/mis_images/icon_tri_green.png";
break;
//
// Other cases removed for brevity
//
} // End of switch
var mkrIcon = L.icon({ iconUrl: newIcon,shadowUrl: '',iconSize: [13,13],shadowSize: [0,0],iconAnchor: [7,13],shadowAnchor: [0,0],popupAnchor: [0,0]});
var xmlData = downloadUrl(xmlType, function(data) {
var xml = xmlParse(data);
var markers = xml.getElementsByTagName("marker");
var numMarkers = markers.length;
for (var j = 0; j < numMarkers; j++) {
var mkrType = markers[j].getAttribute("type");
var mkrName = markers[j].getAttribute("name");
var mkrLat = markers[j].getAttribute("lat");
var mkrLon = markers[j].getAttribute("lon");
var mkrText = "<b>" + mkrName + "</b><br>Lat: " + mkrLat + " Lon: " + mkrLon;
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(**lyrName[i]**);
} // End of Marker (j) loop
}); // End of downloadUrl
lyrName[i] = L.layerGroup().addTo(map);
} // End of layer (i) loop
L.control.layers(overlays).addTo(map);
window.dispatchEvent(new Event('resize'));
}
This line...
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(**lyrName[i]**);
throws the following error...
TypeError: Cannot read property 'addLayer' of undefined
If I change lyrName[i] to cemeteries the layer fills as desired.
Again TIA for any assistance.
jdadwilson
Your Layer cemeteries is not defined.
You can create a LayerGroup / FeatureGroup (is the same but with more function) with var cemeteries= L.featureGroup().addTo(map). Add this Line before your loop.
And then your code should work and the markers displayed on the map
Update
You are adding the marker to a string and not to the layer object. (I don't know what **lyrName[i]** are make, but it is not working...)
Try:
var lyrName = ["cemeteries", "churches", "markers", "schools", "towns"];
var lyrObjs = [cemeteries, churches, markers, schools, towns];
var lyrType = ["cem", "chu", "mkr", "sch", "twn"];
//...
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(lyrObjs[i]);

How to find the SearchImpressionShare for a particular keyword?

One could easily find the average position for a keyword using getAveragePositon() method but the same is not available for SearchImpressionShare.
EDIT
I tried to get the SearchImpressionShare by querying the data but that gives me inconsistent data.
function main() {
var keywordId = 297285633818;
var last14dayStatsQuery = "SELECT Id, SearchTopImpressionShare FROM KEYWORDS_PERFORMANCE_REPORT WHERE Id = "+keywordId+" DURING LAST_14_DAYS"
var last14dayReport = AdWordsApp.report(last14dayStatsQuery);
var last14dayRows = last14dayReport.rows();
var last14dayRow = last14dayRows.next();
Logger.log('Keyword: ' + last14dayRow['Id'] + ' SearchTopIS: ' + last14dayRow['SearchTopImpressionShare']);
}
For example, below are the two outputs I received after running the same code twice.
Output 1:
10/16/2019 10:47:29 AM Keyword: 297285633818 SearchTopIS: 0.0
Output 2:
10/16/2019 10:47:45 AM Keyword: 297285633818 SearchTopIS: 0.17
Keywords performance report provides you those data https://developers.google.com/adwords/api/docs/appendix/reports/keywords-performance-report#searchimpressionshare
sample use:
function main () {
var query = "SELECT SearchImpressionShare, Criteria FROM KEYWORDS_PERFORMANCE_REPORT WHERE Clicks > 15 DURING YESTERDAY"
var report = AdWordsApp.report(query)
var rows = report.rows()
while (rows.hasNext()) {
var row = rows.next()
Logger.log('Keyrword %s, Impressions Share %s', row['Criteria'], row['SearchImpressionShare'])
}
}
update:
please note that if you have the same keyword within several ad group you'll get aslo several rows in report, each row for each adgroup. for the whole list of keywords use the following approach:
function main() {
var keywordId = 350608245287;
var last14dayStatsQuery = "SELECT Id, SearchTopImpressionShare FROM KEYWORDS_PERFORMANCE_REPORT WHERE Id = "+keywordId+" DURING LAST_14_DAYS"
var last14dayReport = AdWordsApp.report(last14dayStatsQuery);
var last14dayRows = last14dayReport.rows();
while (last14dayRows.hasNext()) {
var last14dayRow = last14dayRows.next();
Logger.log('Keyword: ' + last14dayRow['Id'] + ' SearchTopIS: ' + last14dayRow['SearchTopImpressionShare']);
}
}
You might find it useful to add ad group parameters to your query such as AdGroupName, AdGroupId.

Binding row value to odata model SAP UI5

I have a table with 2 columns - one where user can input a value to return and other column is a checkbox. If a user enters a value in the item row, I make the checkbox checked. If value is greater than 0 then only the checkbox is selected. My issue is with the below code, if I input a value on the 3 rd row, that checkbox is selected but alongside even the first row's checkbox is selected. I think the issue is in the stmt: tableModel.setProperty("/ItemSet/results/0/ReturnItemFlag", "X"); Because I am giving "0" the first row is also getting the value. How to I point to the correct result number.
Controller.js
qtyChange: function(oEvent) {
var a = oEvent.getSource();
var input = a.getValue()
var row = oEvent.getSource().getParent().getParent();
var index = row.getIndex();
var oTable = vc.getView().byId("takeStockHistoryDetailTable");
var selectedRowPath = oTable.getContextByIndex(index).getPath();
var tableModel = vc.getView().getModel(TAKE_STOCK_ORDER_DETAIL);
var selectedPart = tableModel.getObject(selectedRowPath);
var QtyOnHand = selectedPart.QtyOnHand;
var UnitP = selectedPart.UnitPrice;
var f = parseInt(input);
var g = parseInt(QtyOnHand);
var h = parseFloat(UnitP);
if (f > g) {
sap.m.MessageToast.show("Return quantity is more than available quantity");
a.setValue("");
} else if (f === 0 || input === "") {
selectedPart.ReturnItemFlag = 'Y';
tableModel.setProperty("/ItemSet/results/0/ReturnItemFlag", "Y");
} else {
selectedPart.ReturnItemFlag = 'X';
selectedPart.QtyToReturn = input;
var sub = input * h;
// debugger;
var sub1 = sub.toString();
selectedPart.Subtotal = sub1;
tableModel.setProperty("/ItemSet/results/0/ReturnItemFlag", "X");
tableModel.setProperty("/ItemSet/results/0/Subtotal", sub1);
}
},
This is possibly a very complicated way of working with table items.
Here is how you should work with bindingContexts.
on listItemPress Event of the table(list)
qtyChange: function(oEvent){
var oColumnListItem = oEvent.getSource().getParent();
var sPath = oColumnListItem.getBindingContextPath("yourModelName");
OR
var sPath = oColumnListItem.getBindingContext("yourModelName").getPath();
var sReturnItemFlagPath = sPath + "/ReturnItemFlag";
tableModel.setProperty(sReturnItemFlagPath,"newValue");
}
Let me know if this helps!

How to exclude workbooks of a Sheet when converting to PDF via script

function convertSpreadsheetToPdfNonIncremental(spreadsheetId, sheetName, pdfName) {
var spreadsheet = spreadsheetId ? SpreadsheetApp.openById(spreadsheetId) : SpreadsheetApp.getActiveSpreadsheet();
spreadsheetId = spreadsheetId ? spreadsheetId : spreadsheet.getId()
var sheetId = sheetName ? spreadsheet.getSheetByName(sheetName).getSheetId() : null;
var pdfName = pdfName ? pdfName : spreadsheet.getName();
var parents = DriveApp.getFileById(spreadsheetId).getParents();
var folder = parents.hasNext() ? parents.next() : DriveApp.getRootFolder();
var url_base = spreadsheet.getUrl().replace(/edit$/,'');
var url_ext = 'export?exportFormat=pdf&format=pdf' //export as pdf
// Print either the entire Spreadsheet or the specified sheet if optSheetId is provided
+ (sheetId ? ('&gid=' + sheetId) : ('&id=' + spreadsheetId))
+ '&gid=1012506648'
+ '&id=11NMFpk15pZ12RdXUsFRN8onueG9mhZqV57xLz_YoQY8'
// following parameters are optional...
+ '&size=letter' // paper size
+ '&portrait=false' // orientation, false for landscape
+ '&scale=4' //1= Normal 100% / 2= Fit to width / 3= Fit to height / 4= Fit to Page
+ '&sheetnames=false&printtitle=false&pagenumbers=false' //hide optional headers and footers
+ '&gridlines=false' // hide gridlines
+ '&fzr=false'; // do not repeat row headers (frozen rows) on each page
var options = {
headers: {
'Authorization': 'Bearer ' + ScriptApp.getOAuthToken(),
}
}
var response = UrlFetchApp.fetch(url_base + url_ext, options);
var file=DriveApp.getFileById('11NMFpk15pZ12RdXUsFRN8onueG9mhZqV57xLz_YoQY8');
var range = SpreadsheetApp.getActive().getRange('B3:C7');
var first = range.getCell(1, 1);
var last = range.getCell(5,2);
var pdfName = first.getValue() + ' Timesheet for Payroll Beginning ' + last.getDisplayValue();
var blob = response.getBlob().setName(pdfName +'.pdf');
folder.createFile(blob);
}
function convertSpreadsheetToPdfIncremental(spreadsheetId, sheetName, pdfName) {
var spreadsheet = spreadsheetId ? SpreadsheetApp.openById(spreadsheetId) : SpreadsheetApp.getActiveSpreadsheet();
spreadsheetId = spreadsheetId ? spreadsheetId : spreadsheet.getId()
var sheetId = sheetName ? spreadsheet.getSheetByName(sheetName).getSheetId() : null;
var pdfName = pdfName ? pdfName : spreadsheet.getName();
var parents = DriveApp.getFileById(spreadsheetId).getParents();
var folder = parents.hasNext() ? parents.next() : DriveApp.getRootFolder();
var url_base = spreadsheet.getUrl().replace(/edit$/,'');
var url_ext = 'export?exportFormat=pdf&format=pdf' //export as pdf
// Print either the entire Spreadsheet or the specified sheet if optSheetId1 is provided
+ (sheetId ? ('&gid=' + sheetId) : ('&id=' + spreadsheetId))
// following parameters are optional...
+ '&size=letter' // paper size
+ '&portrait=false' // orientation, false for landscape
+ '&scale=4' //1= Normal 100% / 2= Fit to width / 3= Fit to height / 4= Fit to Page
+ '&sheetnames=false&printtitle=false&pagenumbers=false' //hide optional headers and footers
+ '&gridlines=false' // hide gridlines
+ '&fzr=false'; // do not repeat row headers (frozen rows) on each page
var options = {
headers: {
'Authorization': 'Bearer ' + ScriptApp.getOAuthToken(),
}
}
var response = UrlFetchApp.fetch(url_base + url_ext, options);
var file=DriveApp.getFileById('11NMFpk15pZ12RdXUsFRN8onueG9mhZqV57xLz_YoQY8');
var range = SpreadsheetApp.getActive().getRange('B3:C7');
var first = range.getCell(1, 1);
var last = range.getCell(5,2);
var pdfName = first.getValue() + ' Timesheet for Payroll Beginning ' + last.getDisplayValue();
var blob = response.getBlob().setName(pdfName +'.pdf');
folder.createFile(blob);
}
I have found, and been able to figure out the script, to convert either one workbook or all workbooks to PDF but can not find instruction/tips on how to convert more than one but no all, or exclude, workbooks when converting to PDF.
I have a Google Sheets spreadsheet that I want to convert all workbooks but one to PDF via script, and do not have the option of hiding the workbook that I don't want to convert.
Help please!

Show/hide TextBox based on status of RadioButton

I would like to show "txtElementID" when the radSource4 button is clicked and "txtQuiaLink" and "txtQuiaPass" when the radSource5 button is clicked. How do I go about doing that... I am a little new to Google Apps Script and trying to learn some basics. Thanks
//Create the GUI form
function doGet() {
var app = UiApp.createApplication().setTitle('DHS: Kurzweil Calendar');
//Create a panel which holds all the form elelemnts
var vertMainPanel = app.createVerticalPanel().setId('vertMainPanel');
//Create the form elelemnts
var lblTeacherName = app.createLabel('Teacher Name:');
var txtTeacherName = app.createTextBox().setName('txtTeacherName');
var lblExt = app.createLabel('Ext:');
var txtExt = app.createTextBox().setName('txtExt');
var lblDate = app.createLabel('Date:');
var boxDate = app.createDateBox().setId('boxDate').setName('boxDate').setFormat(UiApp.DateTimeFormat.DATE_SHORT);
var lbxSubject = app.createListBox().setId('lbxSubject').setName('lbxSubject');
var lstSubjItems = ['-- Select One --','Algebra I (OCS)','Algebra II','Algebra II (Honors)','Agriscience Applications','Agriscience Applications (OCS)','Anatomy and Physiology','Anatomy and Physiology (Honors)','Animal Science','American Sign Language II','Apparel I','Art History (AP)','Advanced Functions and Modeling','Automotive Computer System Diagnostics','Automotive Brakes','Automotive Service','Automotive Service (OCS)', 'Benchmarks','Bible History','Biology','Biology (AP)','Biology (Honors)','Biology (OCS)','Biomedical Technology','Biotechnology and Agriscience','Calculus AB (AP)','Calculus BC (AP)','Carpentry I','Carpentry I (OCS)','Carpentry III','Chemistry','Chemistry (AP)','Chemistry (Honors)','Choral Arts (Beginning)','Civics and Economics','Civics and Economics (Honors)','Computer Programming I','Computer Science (AP)','Computer Technology','Concert Band II (Beginning)', 'Concert Band II (Proficient)','Core and Sustainable Construction','Core and Sustainable Construction (OCS)','Digital Media I','Digitial Media I (OCS)','Digital Media II','Discrete Mathematics','Drafting I','Drafting Architecture II (Honors)','Drafting Architecture III (Honors)','Earth and Environmental Science','Earth and Environmental Sceince (AP)','Earth and Environmental Science (Honors)','Early Childhood Ed I','eCommerce I (Honors)','English I','English I (Honors)','English II','English II (Honors)','English II (OCS)','English III','English III (Honors)','English III (OCS)','English IV','English IV (Honors)','English IV (OCS)','English Lang and Comp (AP)','English Language Arts II','English Language Arts III','Engish Literature (AP)','European History (AP)','Fashion Merchandising','Financial Management (OCS)','Foods I','Foods I (OCS)','Foods II - Enterprise','Foods II - Advanced (OCS)','French I','French II','French III (Honors)','Functional Finances','Geometry', 'Geometry (Honors)','German I','German II','German III (Honors)','Health and Physical Education','Health Sciences (Advanced Studies)','Health Team Relations','Human Geography (AP)','Holocaust and Peace Studies','Horticulture I','Horticulture I (OCS)','Horticulture II','Horticulture II (OCS)','Integrated Math I','Interior Design I','Introduction to Math','Japanese I','JROTC I','JROTC II','JROTC III','JROTC IV','Latin I','Latim II','Latin III (Honors)','Leadership Development','Marketing Management','Masonry I','Masonry I (OCS)','Masonry III','Microsoft Excel and Access','Microsoft Word PowerPoint and Publisher','Multimedia and Webpage Design','Music Business and Recording (Beginning)','Occupational Preparations I','Occupational Preparations II','Occupational Preparations III','Occupational Preparations IV','Parent and Child Development', 'Parent and Child Development (OCS)','Personal Finance', 'Personal Finance (OCS)','Physical Science','Physics (Honors)','Pre-Calculus (Honors)','Professional Management and Leadership I','Professional Management and Leadership II','Psychology','Physcology (AP)','Psychology (Honors)','SAT Preparation','Science and Technical Visualization I','Science and Technical Visualization II','Social Studies (OCS)','Spanish I','Spanish II','Spanish III (Honors)','Spanish IV (Honors)','Special Topics of Mathematics','Symphonic Band II (Beginning)','Symphonic Band II (Intermediate)','Symphonic Band II (Proficient)','Technology Engineering and Design','Theatre Arts (Beginning)','Theatre Arts (Intermediate)','US History','US History (AP)','US History (Honors)','Visual Arts (Beginning)','Visual Arts (Intermediate)','Visual Arts (Proficient)','Visual Arts (Advanced)','Visual Arts Specialization in Ceramics (Advanced)','Vocal Ensemble (Intermediate)','Vocal Ensemble (Proficient)','Wind Ensemble II (Intermediate)','Wind Ensemble II (Proficient)','Wind Ensemble II (Advanced)','World Geography','World History','World History','World History (Honors)'];
lstSubjItems.sort();
for (var l = 0; l < lstSubjItems.length; l++) {
lbxSubject.addItem(lstSubjItems[l]);
}
var lbxPeriod = app.createListBox().setId('lbxPeriod').setName('lbxPeriod');
var lstPrdItems = ['-- Select One --','1st Period','2nd Period','3rd Period','4th Period'];
lstPrdItems.sort();
for (var l = 0; l < lstPrdItems.length; l++) {
lbxPeriod.addItem(lstPrdItems[l]);
}
var lblStudentNum = app.createLabel('Number of Students:');
var txtStudentNum = app.createTextBox().setName('txtStudentNum');
var txtRadioGrp1 = app.createTextBox().setName('txtRadioGrp1').setVisible(false);
var txtRadioGrp2 = app.createTextBox().setName('txtRadioGrp2').setVisible(false);
var txtElementsID = app.createTextBox().setName('txtElementsID').setVisible(false);
var txtQuiaLink = app.createTextBox().setName('txtQuiaLink').setVisible(false);
var txtQuiaPass = app.createTextBox().setName('txtQuiaPass').setVisible(false);
//Create Source Radio Button Group
var radSource1 = app.createRadioButton('group1', 'Hard-Copy').setFormValue('Hard-Copy').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Hard-Copy'));
var radSource2 = app.createRadioButton('group1', 'Electronic-Copy').setFormValue('Electronic-Copy').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Electronic-Copy'));
//Create Type Radio Button Group
var radSource3 = app.createRadioButton('group2', 'Teacher-Made Exam').setFormValue('Teacher-Made Exam').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp2).setText('Teacher-Made Exam'));
var radSource4 = app.createRadioButton('group2', 'Elements Exam').setFormValue('Elements Exam').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Elements Exam'));
if (radSource4 == true) {
txtElementsID.setVisible(true);
} else {
txtElementsID.setVisible(false);
}
var radSource5 = app.createRadioButton('group2', 'Quia Exam').setFormValue('Quia Exam').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Quia Exam'));
if (radSource5 == true) {
txtQuiaLink.setVisible(true);
txtQuiaPass.setVisible(true);
} else {
txtQuiaLink.setVisible(false);
txtQuiaPass.setVisible(false);
}
var btnCreate = app.createButton('Create Event');
//Create handler which will execute 'createEvents(e)' on clicking the button
var evtHandler = app.createServerClickHandler('createEvents');
evtHandler.addCallbackElement(vertMainPanel);
//Add this handler to the button
btnCreate.addClickHandler(evtHandler);
//Add all the elemnts to the panel
vertMainPanel.add(lblTeacherName)
.add(txtTeacherName)
.add(lblExt)
.add(txtExt)
.add(lblDate)
.add(boxDate)
.add(lbxSubject)
.add(lbxPeriod)
.add(lblStudentNum)
.add(txtStudentNum)
.add(radSource1)
.add(radSource2)
.add(txtRadioGrp1)
.add(radSource3)
.add(radSource4)
.add(txtElementsID)
.add(radSource5)
.add(txtQuiaLink)
.add(txtQuiaPass)
.add(txtRadioGrp2)
.add(btnCreate)
//Add this panel to the application
app.add(vertMainPanel);
//Return the application
return app;
}
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.txtStudentNum;
var ssSource = e.parameter.txtRadioGrp1;
var ssType = e.parameter.txtRadioGrp2;
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";
//Get the calendar
var cal = CalendarApp.getCalendarById('davie.k12.nc.us_d2mv2eb8aspuant1vb5j6r3sis#group.calendar.google.com');//Change the calendar id
//Create the events
cal.createAllDayEvent(eventCalSubject, eventDate, {description:eventCalDetails});
//Log the entries in a spreadsheet
var sheet = SpreadsheetApp.openById('0Aur3owCpuUY-dGJIOGZ1LXhqT2FNMGVXSGNJazFnUmc#gid=0').getActiveSheet();//Change the spreadhseet key to yours
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 10).setValues([[new Date(),eventDate,ssTeacher,ssExt,ssSubject,ssPeriod,ssSource,ssType,ssStudentNum,'Event created']]);
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;
}
}
Use ClientHandlers that toggle visibility...
A short example is better than a long explanation, I guess it's clear enough, just insert the following code after you have created all the radioButtons and textBoxes.
DEMO app and full code here
//Client Handlers for textBoxes
var showTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(true);
var hideTxtElementHandler = app.createClientHandler().forTargets(txtElementsID).setVisible(false);
radSource4.addClickHandler(showTxtElementHandler);// show when click on radio4
radSource3.addClickHandler(hideTxtElementHandler);// hide if click other
radSource5.addClickHandler(hideTxtElementHandler);
var showtxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(true);
var hidetxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLink).setVisible(false);
radSource5.addClickHandler(showtxtQuiaLinkHandler);// show when clicked on radio5
radSource3.addClickHandler(hidetxtQuiaLinkHandler);// hide in other cases
radSource4.addClickHandler(hidetxtQuiaLinkHandler);
EDIT : did you mean something like this ? :
in this case I did it with an horizontal panel like below (demo updated)
var txtRadioGrp1 = app.createTextBox().setName('txtRadioGrp1').setVisible(false);
var txtRadioGrp2 = app.createTextBox().setName('txtRadioGrp2').setVisible(false);
var txtElementsID = app.createTextBox().setName('txtElementsID');
var txtQuiaLink = app.createTextBox().setName('txtQuiaLink');
var txtElementsIDP = app.createHorizontalPanel().add(app.createLabel('enter a value')).add(txtElementsID).setVisible(false);
var txtQuiaLinkP = app.createHorizontalPanel().add(app.createLabel('enter a value')).add(txtQuiaLink).setVisible(false);
var txtQuiaPass = app.createTextBox().setName('txtQuiaPass').setVisible(false);
//Create Source Radio Button Group
var radSource1 = app.createRadioButton('group1', 'Hard-Copy').setFormValue('Hard-Copy').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Hard-Copy'));
var radSource2 = app.createRadioButton('group1', 'Electronic-Copy').setFormValue('Electronic-Copy').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Electronic-Copy'));
//Create Type Radio Button Group
var radSource3 = app.createRadioButton('group2', 'Teacher-Made Exam').setFormValue('Teacher-Made Exam').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp2).setText('Teacher-Made Exam'));
var radSource4 = app.createRadioButton('group2', 'Elements Exam').setFormValue('Elements Exam').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Elements Exam'));
var radSource5 = app.createRadioButton('group2', 'Quia Exam').setFormValue('Quia Exam').addClickHandler(app.createClientHandler().forTargets(txtRadioGrp1).setText('Quia Exam'));
var btnCreate = app.createButton('Create Event');
//Client Handlers for textBoxes
var showTxtElementHandler = app.createClientHandler().forTargets(txtElementsIDP).setVisible(true);
var hideTxtElementHandler = app.createClientHandler().forTargets(txtElementsIDP).setVisible(false);
radSource4.addClickHandler(showTxtElementHandler);
radSource3.addClickHandler(hideTxtElementHandler);
radSource5.addClickHandler(hideTxtElementHandler);
var showtxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLinkP).setVisible(true);
var hidetxtQuiaLinkHandler = app.createClientHandler().forTargets(txtQuiaLinkP).setVisible(false);
radSource5.addClickHandler(showtxtQuiaLinkHandler);
radSource3.addClickHandler(hidetxtQuiaLinkHandler);
radSource4.addClickHandler(hidetxtQuiaLinkHandler);
EDIT 2 : GRID version
//Add all the elemnts to the panel
var grid = app.createGrid(12,2).setCellPadding(5);
vertMainPanel.add(grid);
grid.setWidget(0,0,lblTeacherName)
.setWidget(0,1,txtTeacherName)
.setWidget(1,0,lblExt)
.setWidget(1,1,txtExt)
.setWidget(2,0,lblDate)
.setWidget(2,1,boxDate)
.setWidget(3,1,lbxSubject)
.setWidget(3,0,lbxPeriod)
.setWidget(4,0,lblStudentNum)
.setWidget(4,1,txtStudentNum)
.setWidget(5,0,radSource1)
.setWidget(5,1,radSource2)
.setWidget(6,0,txtRadioGrp1)
.setWidget(7,0,radSource3)
.setWidget(8,0,radSource4)
.setWidget(8,1,txtElementsIDP)
.setWidget(9,0,radSource5)
.setWidget(9,1,txtQuiaLinkP)
.setWidget(10,0,txtQuiaPass)
.setWidget(10,1,txtRadioGrp2)
.setWidget(11,0,btnCreate);

Resources