This will give you a start. With a little effort on your part you should be able to complete the rest on your own.
To run this you will need to:
Copy code to script editor using the given files names. Save them. Run the showEmployeeSearchDialog() function and that will launch the html. As you progress you should be able to add a doGet function and deploy as a webapp.
Code.gs:
function goFind(id)
{
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Master');
var rg=sh.getDataRange();
var vA=rg.getValues();
var found=false;
var dA=[];
for(var i=1;i<vA.length;i++)
{
if(vA[i][1]==id)
{
dA.push(vA[i][0],vA[i][1],vA[i][2],vA[i][3],vA[i][4],vA[i][5]);
}
}
return dA;
}
function showEmployeeSearchDialog()
{
var ui=HtmlService.createHtmlOutputFromFile('empsearchform');
SpreadsheetApp.getUi().showModelessDialog(ui, 'Employee Search Form')
}
empsearchform.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
});
function goFind()
{
var id=$('#txt1').val();
$('#notfound').css('display','none');
google.script.run
.withSuccessHandler(found)
.goFind(id);
}
function found(dA)
{
if(dA.length>0)
{
$('#hdn1').val(dA[0]);
$('#txt2').val(dA[2]);
$('#txt3').val(dA[3]);
$('#txt4').val(dA[4]);
$('#txt5').val(dA[5]);
$('#found').css('display','inline');
}
else
{
$('#notfound').css('display','inline');
}
}
function goUpdate()
{
}
console.log('MyCode');
</script>
</head>
<body>
<br /><input type="text" placeholder="Enter Employee ID" id="txt1" size="15" />
<br /><input type="button" value="Find" onClick="goFind()" />
<div id="found" style="display:none;">
<br />Mobile Number:<input type="text" value="" size="" id="txt2" />
<br />Card Issued:<input type="text" value="" size="" id="txt3" />
<br />Date:<input type="text" value="" size="" id="txt4" />
<br />Issued By:<input type="text" value="" size="" id="txt5" />
<br /><input type="hidden" value="" id="hdn1" />
<br /><input type="button" value="Submit" onClick="goUpdate()" />
</div>
<div id='notfound' style="display:none;"><br /><br />Employee ID not found. Reenter Employee ID and push Find to try again.</div>
</body>
</html>
Here's what the dialog looks like at the present:
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
