I've put together a web application that relies on a series of Google components.
- Google Forms collects data from users
- Google sheets saves the data (automatically)
- Additional "calculated" columns get populated based on data collected from the forms
- I query the "calculated" columns and display the results on a webpage (intranet) using a Table from the Google Visualizations api.
The problem
The query sometimes returns the message "loading..." for one of the calculated columns instead of the calculated value. This particular column is unique in that it calls a custom function that I have defined for the spreadsheet. Refreshing the page seems to correct this problem (and the calculated value is displayed), but the "loading..." appears roughly 1 out 3 times that I make a unique visit to the page.Looking for
I'm hoping that I can stop this from happening or at least minimize the occurrences. My first thought is to put a delay in the javascript somewhere to give the calculation a longer time to complete, but I'm not sure how. Can you show me? Any help is appreciated.Code pieces
Google Sheets Formula for that column
=ARRAYFORMULA(IF(English_Merged_Data!A2:A ="","","<strong><a target='_blank' href='https://docs.google.com/forms/d/.../viewform?entry.500003066="&encode(English_Merged_Data!Q2:Q)&"'>Apply</a></strong>"))
Encode custom function (in Sheets)
//This function encodes a single string or an array of strings
function encode(value) {
if( typeof value === 'string' ) {
return encodeURIComponent(value);
}
var encodedArray = [];
for(var i=0;i<value.length;i++){
encodedArray.push(encodeURIComponent(value[i]).replace("'","%27"));
}
return encodedArray;
}
Javascript to display table
<script type="text/javascript">
google.load("visualization", '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/.../edit?sheet=English_Display_Table');
query.setQuery("select A, B, C, D, F, H, G where A <> '' and not I contains 'Close' and J > toDate(now()) label A 'Mission', B 'Category', C 'Language', D 'Location', F 'Time Commitment', G 'For more details', H 'Apply!'");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: false, allowHtml: true});
}
</script>
English_Merged_Data!A2:A
andEnglish_Merged_Data!Q2:Q
by a smaller ranges. If the size is variable use offset() with another function to calculate the number of required rows. Consider to share a file with representative data.Utilities.sleep()
REGEXREPLACE
to achieve the same substitution that your custom function does. This can be applied to the entire column withARRAYFORMULA
, so the whole thing could be done withARRAYFORMULA(REGEXREPLACE(A2:A , "'", "%27"))