Employee Time Clock Web App on Google Sheets using Google Apps Script

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 พ.ย. 2024

ความคิดเห็น •

  • @CodeWithCurt
    @CodeWithCurt  4 ปีที่แล้ว +27

    Google Apps Script Code used in Video Below:
    function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('TimeTracker');
    }
    function getEmployees() {
    var ss= SpreadsheetApp.getActiveSpreadsheet();
    var employeeSheet = ss.getSheetByName("EMPLOYEES");
    var getLastRow = employeeSheet.getLastRow();
    return employeeSheet.getRange(2, 1, getLastRow - 1, 1).getValues();
    }
    function clockIn(employee) {

    //DEFINE ALL ACTIVE SHEETS
    var ss = SpreadsheetApp.getActiveSpreadsheet();

    //DEFINE MAIN SHEET
    var mainSheet = ss.getSheetByName("MAIN");
    //LAST ROW ON MAIN SHEET
    var lastRow = mainSheet.getLastRow();

    //Define Return Variables
    var return_date = '';
    var error = 'SUCCESS';
    var return_array = [];
    for (var j = 2; j 12) ? addZero(currentDate.getHours()) - 12 : addZero(currentDate.getHours());
    var currentMinutes = addZero(currentDate.getMinutes());
    var currentSeconds = addZero(currentDate.getSeconds());
    var suffix = (addZero(currentDate.getHours()) >= 12)? 'PM' : 'AM';
    var date = currentMonth.toString() + '/' + currentDate.getDate().toString() + '/' +
    currentYear.toString() + ' ' + currentHours.toString() + ':' +
    currentMinutes.toString() + ':' + currentSeconds.toString() + ' ' + suffix;

    return date;
    }
    function clockOut(employee) {

    //DEFINE ALL ACTIVE SHEETS
    var ss = SpreadsheetApp.getActiveSpreadsheet();

    //DEFINE MAIN SHEET
    var mainSheet = ss.getSheetByName("MAIN");
    //LAST ROW ON MAIN SHEET
    var lastRow = mainSheet.getLastRow();

    var foundRecord = false;

    var new_date = new Date();
    var return_date = getDate(new_date);
    var error = 'SUCCESS';
    var return_array = [];

    for (var j = 2; j

  • @JoseIgordeSouza
    @JoseIgordeSouza 3 หลายเดือนก่อน +1

    Thank you so much. It took me a few hours to personalize it as I wanted but I was able to add the break in and Out options and update it to the Sheet. You're amazing!

  • @CodeWithCurt
    @CodeWithCurt  4 ปีที่แล้ว +17

    HTML, Javascript, Jquery, and Bootstrap Code used in Video:





    $( document ).ready(function() {
    getEmployees();
    });

    function getEmployees()
    {

    google.script.run.withSuccessHandler(function(ar)
    {
    var employeeSelect = document.getElementById("employee");
    console.log(ar);

    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    employeeSelect.appendChild(option);

    ar.forEach(function(item, index)
    {
    let option = document.createElement("option");
    var employee = item[0];
    option.value = item[0];
    option.text = item[0];
    employeeSelect.appendChild(option);
    });
    }).getEmployees();

    };

    function ClockIn()
    {

    $('#message').html("");
    var employee = document.getElementById("employee").value;

    if(employee != '')
    {

    google.script.run.withSuccessHandler(function(ar)
    {
    console.log(ar);
    ar.forEach(function(item, index)
    {

    if(item[0] == 'SUCCESS')
    {
    var message = item[2] + ' Clocked in at ' + item[1];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-primary";
    }
    else
    {
    var message = item[2] + ' ' + item[0];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-warning";
    }


    });

    }).clockIn(employee);

    }
    }

    function ClockOut()
    {

    $('#message').html("");
    var employee = document.getElementById("employee").value;

    if(employee != '')
    {

    google.script.run.withSuccessHandler(function(ar)
    {
    console.log(ar);
    ar.forEach(function(item, index)
    {

    if(item[0] == 'SUCCESS')
    {
    var message = item[2] + ' Clocked out at ' + item[1];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-primary";
    }
    else
    {
    var message = item[2] + ' ' + item[0];
    $('#message').html(message);
    document.getElementById("message").className = "alert alert-warning";
    }

    });

    }).clockOut(employee);

    }
    }




    Time Tracker



    Employee

  • @muhammedaadhil5645
    @muhammedaadhil5645 4 ปีที่แล้ว +1

    This has been so helpful :) Thank you. I have a question, there are times the onClick action take little time load, how can we add a loading spinner to this code?

  • @payrollstaffcastillogroup6124
    @payrollstaffcastillogroup6124 3 ปีที่แล้ว +2

    Hi Curt,I would like to ask if how can I add more option other than "Clock In" and " Clock Out" ? I'd like to add " Second Shift" on my web app ?

  • @SalAbraham7
    @SalAbraham7 3 ปีที่แล้ว +2

    The code please.. i tried to look for the script as you sait to check the comments for the code but i can't see it

  • @bubbdrinks
    @bubbdrinks 3 ปีที่แล้ว +2

    I have 2 questions.
    1.How can I like Google sheet with the Apps script?
    2.Is it possible to fix location's IP address to checkin/out?

    • @rankinh71
      @rankinh71 3 ปีที่แล้ว +1

      I’d like to know # 2 as well

    • @babinlonston3940
      @babinlonston3940 2 ปีที่แล้ว

      Me too waiting for this.

  • @deepakpatel-zc8ff
    @deepakpatel-zc8ff 3 ปีที่แล้ว +2

    how to get code for employee time clock google apps script

  • @jaedyncarmichael9321
    @jaedyncarmichael9321 2 ปีที่แล้ว

    Awesome work my man, and thanks for the code! Do you have paid services? I was looking to input a description of what was accomplished for the day as well. Thanks again, and I look forward to hearing from you.

  • @buhlegqadu8238
    @buhlegqadu8238 2 ปีที่แล้ว +1

    Thank you so much this was so helpful you are AWESOME !!!

  • @omarchtchareto3701
    @omarchtchareto3701 3 ปีที่แล้ว +1

    Hi Curt, it's very useful product but I have one question how can we make username and password for everyone

  • @idalmisnazario2474
    @idalmisnazario2474 4 ปีที่แล้ว

    Excellent job! I was wondering if I can add a comments box under the employee dropdown box. Is this possible? If so, what I will need to change on the script?

  • @sakdaakkamart8717
    @sakdaakkamart8717 3 ปีที่แล้ว +1

    Hi Curt, Well done.
    May i have your advice? Name in list can do Check In/Out for each other (Steve clock in/out for Jim). How to track or prevent this? or we just do clock in/out only person logged in to this sheet?

    • @mohamedabdo-xg6tw
      @mohamedabdo-xg6tw 2 ปีที่แล้ว

      if you havenot fix it yet. replace selection with input in your HTML
      inside your input specify if you want people to enter name or id-number. no one will chech-in or out anybody else.

  • @UzumakiNaruto-ln9kg
    @UzumakiNaruto-ln9kg 3 ปีที่แล้ว

    Thank you so much for this! Youre a blessing!

  • @angelrosario4119
    @angelrosario4119 8 หลายเดือนก่อน

    how can i change the hour form so it don't show 0.06 for example

  • @kishanpatel9611
    @kishanpatel9611 3 ปีที่แล้ว

    Thank you for sharing great content, but I have one question, why is this web app not running in the safari when I scan the QR code? It redirects me to the google drive page means no page found page. I am having a problem with only the iPhone safari. It can run in crome correct.

  • @sehrishmalikofficial
    @sehrishmalikofficial 3 ปีที่แล้ว +2

    *Sir please give me all Script codes i am waiting. THANKS*

  • @Stealthy_Martian
    @Stealthy_Martian 3 ปีที่แล้ว

    If I wanted to add a text field under the employee area so that they could enter a note that gets written to the google sheet on clock in. How would I go about doing that by chance?

  • @JosephRobinson-rn5od
    @JosephRobinson-rn5od 5 หลายเดือนก่อน

    Can I make one simple modification. Employee uses a time stamped, GPS photo at the start and end of shift. Then the time is validated off of the time stamp text in the photo.

  • @shellyknebel2984
    @shellyknebel2984 2 ปีที่แล้ว

    Is there a way to set this up by payroll? For example, my employees get paid the 10th and 25th of the month. The 10th payroll covers the 16-end of prior month and the 25th covers the 1-15 of current month. If so, can you guide me with the script on how to set this up? Thanks.

  • @monicamusial4665
    @monicamusial4665 3 ปีที่แล้ว

    Hello,
    Thank you for the code and the explanation. Is there a formula I could use that would separate the date and the time of clocking in and clocking out?

    • @oladimejiawosika6428
      @oladimejiawosika6428 3 ปีที่แล้ว

      Try =ARRAYFORMULA(IFS(ROW(B:B)=1,"TimeStamped Date",B:B="","",True,DATEVALUE(B:B))) where B is the timestamp

  • @asambleacristianadorrego7803
    @asambleacristianadorrego7803 3 ปีที่แล้ว

    hi Code With Curt firt to all, thx for the all video there are useful to me! , i have 1 question, its possible take a phote of employee when fill the form? and save this data on sheet?

  • @mokabemokubedaniel376
    @mokabemokubedaniel376 4 ปีที่แล้ว

    Thanks for the code ,it is possible to have a code generator each day before employee clock in every day.Thanks

  • @Nolan.Azuela
    @Nolan.Azuela 3 ปีที่แล้ว +1

    Hi Curt! I loved it! I have 1 concern, where to add another drop down for activities? I added it but it's not showing when published. Thanks in advance for your answer.

    • @CodeWithCurt
      @CodeWithCurt  3 ปีที่แล้ว +1

      When deploying the Web App you may to to version it up a number to see the changes.

    • @Nolan.Azuela
      @Nolan.Azuela 3 ปีที่แล้ว

      @@CodeWithCurt thank you

  • @peterzoldi9159
    @peterzoldi9159 2 ปีที่แล้ว

    Hi, In the video the Hours are added up on the right side, but in my case it just adds it next to it. (Example: 0.01 and 0.02 are the two thing i want to add up, what i want as a result: 0.03 only so i got 0.010.02).
    Can somebody help me?

  • @fpwilliams71
    @fpwilliams71 3 ปีที่แล้ว

    Hey Curt, please kindly point me in the direction where the time-zone can be set?
    I'm in the UK and currently the time is reporting as from the US.

    • @bryanstockton5934
      @bryanstockton5934 3 ปีที่แล้ว +1

      You can change the TZ on the spreadsheet by going to File> Spreadsheet settings

  • @YannySit
    @YannySit ปีที่แล้ว

    Thank you for sharing! It is GREAT!

  • @mariahgarcia8575
    @mariahgarcia8575 4 ปีที่แล้ว

    What will I need to change or add on the script to have a start break and end break option

  • @fokozuynen2048
    @fokozuynen2048 4 ปีที่แล้ว +2

    lol seems easy at thie first view then getting in the code script get interesting . nice freaking job

  • @melissadunaj4843
    @melissadunaj4843 3 ปีที่แล้ว

    If I want to use this for volunteers instead of employees, would I just replace the word "employee" with "volunteer" in the coding?

  • @fpwilliams71
    @fpwilliams71 3 ปีที่แล้ว

    Hi Curt, this is a good job you have done here. I'm unable to see the scripts in the comment section. Do you mind sharing?

    • @fpwilliams71
      @fpwilliams71 3 ปีที่แล้ว

      I've tracked and found the scripts. Thanks

  • @abhishekshrivastav2141
    @abhishekshrivastav2141 3 ปีที่แล้ว

    Hi please help.. I have added new drop-down in html but data not updated in the gsheet. I have try all the possibilities but did not get solution Please help on this.

  • @CASTProperty
    @CASTProperty ปีที่แล้ว

    Thanks for sharing your great work. would you please share how to add a password for each name. Otherwise anyone can log in for other's name .

  • @agtfrance4322
    @agtfrance4322 4 ปีที่แล้ว

    I am using google script to download all sheets in pdf, but I need to add some time during running, because to convert the url to pdf takes to much time and I got the error 429, if you can help me would be great.

  • @raveeshafernando6266
    @raveeshafernando6266 4 ปีที่แล้ว +2

    This is perfectly working. Thankyou so much!!!

    • @Yogeshkalra-z3v
      @Yogeshkalra-z3v 3 ปีที่แล้ว +1

      hi how find code scrip code.gs and html pls help me

  • @newborn7850
    @newborn7850 4 ปีที่แล้ว

    i want a googlesheet to remove a top row after every one hour , how to do this

  • @TristanTubungbanua
    @TristanTubungbanua 10 หลายเดือนก่อน

    Cannot clock in or out with the codes

  • @SAjiDAli-rd5zd
    @SAjiDAli-rd5zd ปีที่แล้ว

    where can I copy codes for time tacker?

  • @EveryThing-vl3fr
    @EveryThing-vl3fr 2 ปีที่แล้ว

    How can I put add photo upload for this and seperate link for every employee

  • @puutharissatakemtong347
    @puutharissatakemtong347 3 ปีที่แล้ว +1

    The code please.

  • @mohammadnaveed8982
    @mohammadnaveed8982 3 ปีที่แล้ว

    script please it is not showing in newest first can u give us link of github repository

  • @tahazouhair1173
    @tahazouhair1173 4 ปีที่แล้ว +1

    that's very Impressive I've been looking for this for a week now, is there any option to add a password per each name ?

    • @CASTProperty
      @CASTProperty ปีที่แล้ว

      Great ! I also want to know if it is possible to add a password for each name. Otherwise anyone can log in for anyone's name .

  • @TheDreamChaser-nj3pm
    @TheDreamChaser-nj3pm 11 หลายเดือนก่อน

    how did you copy google app scribt code plz

  • @jessahilario2
    @jessahilario2 2 ปีที่แล้ว

    Is there something that include breaks

  • @h00ki32
    @h00ki32 4 ปีที่แล้ว +2

    Great Job!
    how can i delete the employee from the selection after the submit?
    how can I change a time when an employee has made a mistake?

    • @CodeWithCurt
      @CodeWithCurt  4 ปีที่แล้ว +1

      You can make the corrections directly on the google sheet.

  • @saipremtammana
    @saipremtammana 3 ปีที่แล้ว

    how to clock in using the google maps location

  • @susomjai6909
    @susomjai6909 3 ปีที่แล้ว

    Can I have the code please? Thank you.

  • @KuyaRicOfPRU
    @KuyaRicOfPRU 2 ปีที่แล้ว

    Sir, how can we put verification or password for each EMPLOYEE in order to avoid unauthorized clocked in and clocked out.. to prevent, example employee A from clock outing employee B.

    • @MrRaulcaviedes
      @MrRaulcaviedes 2 ปีที่แล้ว

      Hello did you figure out how to add verification code?? im also looking to add it ! please let me know

    • @cyberops3151
      @cyberops3151 ปีที่แล้ว

      Do you have answers?

    • @divyshah01
      @divyshah01 8 หลายเดือนก่อน

      @@MrRaulcaviedes give uniqueID to each along with name and validate it when they click clock in

  • @523sunshine
    @523sunshine 3 ปีที่แล้ว

    Hey Curt,
    Everything works, except it did not total it on the right side. How can I fix this?

    • @kamilingo
      @kamilingo 3 ปีที่แล้ว

      I had the same problem. But after found out. Try to add more decimal digits from the above menu. then it gets resolved. Cheers

  • @filibertodurangarcia1975
    @filibertodurangarcia1975 4 ปีที่แล้ว

    Thanks for your code; can we link it to a user form?

  • @traceywilliams-esc7905
    @traceywilliams-esc7905 4 ปีที่แล้ว

    What would I need to change on the script if I wanted to add an additional sheet so when the employee is clocking in and out they can also select a location that the were working at?

    • @CodeWithCurt
      @CodeWithCurt  4 ปีที่แล้ว +1

      You would need to add a google sheet of locations. Create a dropdown on the HTML page and add a function similar to getEmployees() to fill the locations dropdown with locations. Then on the clockIn() function you would need to carry the location selected.

    • @traceywilliams-esc7905
      @traceywilliams-esc7905 4 ปีที่แล้ว

      @@CodeWithCurt I can get the drop down of locations to work but I can't get the clock in and out function to work and my locations are not showing up on the main sheet.

    • @24jdcspecialtytreatmentcou22
      @24jdcspecialtytreatmentcou22 3 ปีที่แล้ว

      @@traceywilliams-esc7905 I am having this same issue. did you ever figure it out?

    • @abhishekshrivastav2141
      @abhishekshrivastav2141 3 ปีที่แล้ว

      @@traceywilliams-esc7905 do you get solution so please help me

    • @abhishekshrivastav2141
      @abhishekshrivastav2141 3 ปีที่แล้ว

      @@24jdcspecialtytreatmentcou22 do you get solution so please help me

  • @andresrincon6675
    @andresrincon6675 3 ปีที่แล้ว

    Curt,
    I do not know what I'm doing but I followed your steps and have a working TimeTracker. Is it only possible to use if the computer is logged in to the admins account? I sent the app link to someone else with their own gmail to view the app but they have their own gmail and couldn't view the app.

    • @CodeWithCurt
      @CodeWithCurt  3 ปีที่แล้ว

      Make sure you share the link that ends in 'exec'. The one that is under 'Current Web App URL'. When deploying the web app make sure to change 'Who has access to the app' to everyone. Let me know if that helps.

    • @gagangoel4808
      @gagangoel4808 3 ปีที่แล้ว

      @@CodeWithCurt didn't get the code

  • @hic1802
    @hic1802 3 ปีที่แล้ว +1

    what if i want to add input locator ? please help me.

  • @mokabemokubedaniel376
    @mokabemokubedaniel376 4 ปีที่แล้ว

    Thanks for the code but i have error like this

    • @CodeWithCurt
      @CodeWithCurt  4 ปีที่แล้ว

      Is the name of the HTML file called 'TimeTracker'? Either it isn't the same name or it doesn't exist.

  • @konlawatsakunchawisa5596
    @konlawatsakunchawisa5596 3 ปีที่แล้ว +1

    Hello where is the link for the scrit

    • @asambleacristianadorrego7803
      @asambleacristianadorrego7803 3 ปีที่แล้ว

      If you have trouble finding the code in the comments try this:
      -In the comments section, try clicking on 'SORT BY' then clicking 'NEWEST FIRST' and see if they show up.

  • @wmtarmiziwothman9358
    @wmtarmiziwothman9358 3 ปีที่แล้ว

    Hi, I'm from Malaysia. How to change time to my country at clock in and clock out?

    • @Enrique-dTraveller
      @Enrique-dTraveller 3 ปีที่แล้ว

      Dekat Google script profile tu tukar Asia/Kuala_Lumpur

  • @jaydeeppatel5164
    @jaydeeppatel5164 3 ปีที่แล้ว

    Thank you sir your video is really helpful.

    • @SheraUTE
      @SheraUTE 3 ปีที่แล้ว

      can you share me link for script

  • @sageredeemer6221
    @sageredeemer6221 4 ปีที่แล้ว +1

    HELLO WHERE IS THE LINK FOR THE SCRIPT?

    • @CodeWithCurt
      @CodeWithCurt  4 ปีที่แล้ว

      The script is in the comments of the video. I may have said link in the video but I meant to say in the comments of the video. Sorry.

    • @sageredeemer6221
      @sageredeemer6221 4 ปีที่แล้ว

      @@CodeWithCurt the comment section only shows the libhrary reference

    • @CodeWithCurt
      @CodeWithCurt  4 ปีที่แล้ว

      If you have trouble finding the code in the comments try this:
      -In the comments section, try clicking on 'SORT BY' then clicking 'NEWEST FIRST' and see if they show up.

  • @Yogeshkalra-z3v
    @Yogeshkalra-z3v 3 ปีที่แล้ว +1

    hi code with curt pls help me for script

  • @vaibhavvishal1320
    @vaibhavvishal1320 4 ปีที่แล้ว +2

    link for script ?

    • @CodeWithCurt
      @CodeWithCurt  4 ปีที่แล้ว +1

      The script is in the comments of the video. I may have said link in the video but I meant to say in the comments of the video. Sorry.

  • @pixachuchu
    @pixachuchu 5 หลายเดือนก่อน

    thank you so much!

  • @yes_pappii
    @yes_pappii 4 ปีที่แล้ว +2

    whole code please

    • @yes_pappii
      @yes_pappii 4 ปีที่แล้ว

      kh3vin14@gmail.com

    • @CodeWithCurt
      @CodeWithCurt  4 ปีที่แล้ว

      All the code is given in the comments below the video. All that needs to be setup is the google sheet.

    • @yes_pappii
      @yes_pappii 4 ปีที่แล้ว

      @@CodeWithCurt the codes for hours and total hours, wrong coding for duration

  • @khengchengschool6878
    @khengchengschool6878 2 ปีที่แล้ว

    Hi, I am trying to add an extra column, "reason". I manage to get it displayed but the reason input does not get reflected in my google sheet, why is it so?

  • @idalmisnazario2474
    @idalmisnazario2474 4 ปีที่แล้ว

    I would like to know how to add a comment box. Can you help me, please?

    • @24jdcspecialtytreatmentcou22
      @24jdcspecialtytreatmentcou22 3 ปีที่แล้ว

      @@bryanstockton5934 I added a comment box as well as an additional dropdown for 'location' to show where employee worked. I can see the list of locations on the spread sheet reflected in the web apps drowdown options but I am unsure how to populate MAIN with the additional option of 'location
      and 'comments'. Could you help?

    • @idalmisnazario2474
      @idalmisnazario2474 3 ปีที่แล้ว

      @@bryanstockton5934 no, I haven't can you help me, please.

    • @abhishekshrivastav2141
      @abhishekshrivastav2141 3 ปีที่แล้ว

      @@24jdcspecialtytreatmentcou22
      do you get solution so please help me

    • @abhishekshrivastav2141
      @abhishekshrivastav2141 3 ปีที่แล้ว

      @@bryanstockton5934 Guys do you get solution so please help me

    • @abhishekshrivastav2141
      @abhishekshrivastav2141 3 ปีที่แล้ว

      @@bryanstockton5934 can you please help

  • @iamlhuiehernandez2837
    @iamlhuiehernandez2837 3 ปีที่แล้ว

    Why getmonth is showing "undefined"?

  • @sonukumar-bo7qk
    @sonukumar-bo7qk 4 ปีที่แล้ว +1

    NEWEST FIRST

  • @rdlowesinc.9987
    @rdlowesinc.9987 3 ปีที่แล้ว

    Works Well :)

  • @a22abcd
    @a22abcd 5 หลายเดือนก่อน

    thanks

  • @sonukumar-bo7qk
    @sonukumar-bo7qk 3 ปีที่แล้ว

    Newest first

  • @pulkitdhir
    @pulkitdhir 4 ปีที่แล้ว

    plz send me a google sheet for this

    • @pulkitdhir
      @pulkitdhir 4 ปีที่แล้ว

      pulkitdhir54@gmail.com

  • @luisgs1980
    @luisgs1980 4 ปีที่แล้ว

    newest first

  • @eligiorendy3704
    @eligiorendy3704 3 ปีที่แล้ว

    Nice.

  • @chanakankitrak9254
    @chanakankitrak9254 3 ปีที่แล้ว

    interest

  • @luisgs1980
    @luisgs1980 4 ปีที่แล้ว

    sort by

  • @sonukumar-bo7qk
    @sonukumar-bo7qk 4 ปีที่แล้ว

    SORT BY

  • @surachatesopaten8637
    @surachatesopaten8637 3 ปีที่แล้ว

    Sort by

  • @adeprimasandy9687
    @adeprimasandy9687 3 ปีที่แล้ว

    NEWEST FIRST

  • @sonukumar-bo7qk
    @sonukumar-bo7qk 3 ปีที่แล้ว

    Newest first

  • @sonukumar-bo7qk
    @sonukumar-bo7qk 4 ปีที่แล้ว

    SORT BY