I am having a problem passing the values from Google Sheet to my WebApps html upon a search function. My google script file managed to look for the value and passed it in an array, but my javascript file is unable to pass the values back to my page.
I am really a coding beginner here trying to build a simple application as I learn along. Can anyone guide me?
.js file:
//Retrieve Customer
function getCustomer() {
var searchId = document.getElementById("search").value;
if (searchId.length > 8){
google.script.run.withSuccessHandler(custDetail).getCustDetail(searchId);
}
}
//Success Handler
function custDetail(cust){
document.getElementById("idv-introducer").value = cust.custIntroducer;
document.getElementById("idvname").value = cust.custName;
document.getElementById("idv-id").value = cust.custId;
document.getElementById("dob").value = cust.custDob;
document.getElementById("nationality").value = cust.custNationality;
document.getElementById("gender").value = cust.custGender;
document.getElementById("marital").value = cust.custMarital;
document.getElementById("address").value = cust.custAddress;
document.getElementById("postalcode").value = cust.custPostal;
document.getElementById("idvemail").value = cust.custEmail;
document.getElementById("idvcontact").value = cust.custContact;
document.getElementById("licensedate").value = cust.custLicense;
document.getElementById("category").value = cust.custCategory;
M.updateTextFields();
}
.gs file:
function getCustDetail(search) {
var ss = SpreadsheetApp.openById(url);
var ws = ss.getSheetByName("idvData");
var idvCustData = ws.getRange(1,1,ws.getLastRow(),13).getValues();
var custNameList = idvCustData.map(function(r){ return r[0]; });
var custIdList = idvCustData.map(function(r){ return r[1]; });
var custDobList = idvCustData.map(function(r){ return r[2]; });
var custNationalityList = idvCustData.map(function(r){ return r[3]; });
var custGenderList = idvCustData.map(function(r){ return r[4]; });
var custMaritalList = idvCustData.map(function(r){ return r[5]; });
var custAddressList = idvCustData.map(function(r){ return r[6]; });
var custPostalList = idvCustData.map(function(r){ return r[7]; });
var custEmailList = idvCustData.map(function(r){ return r[8]; });
var custContactList = idvCustData.map(function(r){ return r[9]; });
var custLicenseList = idvCustData.map(function(r){ return r[10]; });
var custIntroducerList = idvCustData.map(function(r){ return r[11]; });
var custCategoryList = idvCustData.map(function(r){ return r[12]; });
var searchPostion = custIdList.indexOf(search);
var custDetail = {};
custDetail.custName = custNameList[searchPostion];
custDetail.custId = custIdList[searchPostion];
custDetail.custDob = custDobList[searchPostion];
custDetail.custNationality = custNationalityList[searchPostion];
custDetail.custGender = custGenderList[searchPostion];
custDetail.custMarital = custMaritalList[searchPostion];
custDetail.custAddress = custAddressList[searchPostion];
custDetail.custPostal = custPostalList[searchPostion];
custDetail.custEmail = custEmailList[searchPostion];
custDetail.custContact = custContactList[searchPostion];
custDetail.custLicense = custLicenseList[searchPostion];
custDetail.custIntroducer = custIntroducerList[searchPostion];
custDetail.custCategory = custCategoryList[searchPostion];
Logger.log(searchPostion);
Logger.log(custDetail);
Logger.log(search);
if (searchPostion > -1){
return custDetail;
} else {
return '-';
}
}
My logs did capture the values. Did I missed out anything?
html:
<!-- Header Start -->
<div class="row">
<div class="col s9">
<h5>General Info</h5>
</div>
<div class="input-field col s3">
<select id="category">
<option value="" disabled selected>Select Option</option>
<option value="MTP">Private</option>
<option value="MTC">Commercial</option>
</select>
<label>Motor Category</label>
</div>
</div>
<div class="row">
<div class="col s9">
<ul class="tabs">
<li class="tab col s3 "><a href="#individual" class="grey-text text-darken-4">Individual</a></li>
<li class="tab col s3"><a href="#corporate" class="grey-text text-darken-4">Corporate</a></li>
</ul>
</div>
<div class="input-field col s3">
<input id="search" type="search">
<label for="search">Search ID</label>
<i class="material-icons">close</i>
</div>
</div>
<!-- Header End -->
<!-- Individual Tab -->
<form id="individual">
<div class="row">
<div class="input-field col s3 offset-s9">
<label for="idv-introducer">Introducer</label>
<input id="idv-introducer" type="text" class="autocomplete">
</div>
<div class="input-field col s6">
<label for="idvname">Insured Name</label>
<input id="idvname" type="text" class="validate">
<span class="helper-text" data-error="Required" data-success=""></span>
</div>
<div class="input-field col s3">
<input id="idv-id" type="text">
<label for="idv-id">NRIC / UEN</label>
<span class="helper-text" data-error="Required" data-success=""></span>
</div>
<div class="input-field col s3">
<label for="dob">DOB (DD/MM/YYYY)</label>
<input type="text" id="dob" class="datepicker">
<span class="helper-text" data-error="Required" data-success=""></span>
</div>
<div class="input-field col s6">
<input id="nationality" type="text">
<label for="nationality">Nationality</label>
</div>
<div class="input-field col s3">
<select id="gender">
<option value="" disabled selected>Select Option</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Gender</label>
</div>
<div class="input-field col s3">
<select id="marital">
<option value="" disabled selected>Select Option</option>
<?!= maritalList;?>
</select>
<label>Marital Status</label>
</div>
<div class="input-field col s9">
<textarea id="address" class="materialize-textarea"></textarea>
<label for="address">Address</label>
</div>
<div class="input-field col s3">
<label for="postalcode" >Postal Code</label>
<input id="postalcode" type="text" pattern="[0-9]{6}">
<span class="helper-text" data-error="wrong" data-success="right"></span>
</div>
<div class="input-field col s6">
<input id="idvemail" type="email" class="validate">
<label for="idvemail">Email</label>
<span class="helper-text" data-error="Invalid Email" data-success=""></span>
</div>
<div class="input-field col s3">
<input id="idvcontact" type="text">
<label for="idvcontact">Contact No.</label>
</div>
<div class="input-field col s3">
<label for="licensedate">License (DD/MM/YYYY)</label>
<input type="text" class="datepicker" id="licensedate">
<span class="helper-text" data-error="Required" data-success=""></span>
</div>
<div class="right-align">
<button id="btn" class="btn waves-effect waves-light" name="action">Add</button>
</div>
</div>
</form>
Setting the value of HTML elements, works only for certain tags (e.g. <input>).
Sample:
document.getElementById("idv-introducer").innerHTML = cust.custIntroducer;
Another error source is passing objects from serverside to clientside.
This problem can be solved by wrapping the objects into strings before passing them from a code.gs function to the Javascript function.
For this replace
return custDetail;
with
JSON.stringify(custDetail);
and within the Javascript function function custDetail(cust)
define
cust = JSON.parse(cust);.