I need help in mapping the web app to google sprea

2019-08-16 17:31发布

站内问答 / 移动开发
1019 1 4

I need to create a web app which will read my google spreadsheet column and also record if the action is taken referencing to that cell.

I have six columns: Sr. No. | Emp ID| Phone Number | Card Issued | Date of Issuance | Issued By.

I want a search field in the app where user can enter employee id and if it is mentioned in the list then app should proceed, else error "can't find".

If it is mentioned in the list, user will click on a button such as "Submit", and the details such as YES in Card issued, Date of issuance and in Issued By - email id should be automatically updated. This link should have access to all the users of specific domain and not public.

I have tried many codes available on many websites but I'm unable to get through it. I'm badly in need to complete this. Any help will be appreciated.

Here's my sheet: https://docs.google.com/spreadsheets/d/17ctc5KUeg8qzWN3CD442cSVYpT1gjG4L_6AsBffnhes/edit?usp=sharing

I need something like the attached picture.

enter image description here

1条回答
啃猪蹄的小仙女
2楼-- · 2019-08-16 18:16

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:

enter image description here

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)