Discussions

I ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1736048/RackMultipart20180618-42866-1qhcbd3-form_inline.PNG?1529357437">


I have the following form above for a fabrication department. The fabrication operator must fill out the form whenever he/she starts a new job. Instead of having the "Clock in" and "Clock out" fields, I'd like to create a stopwatch, similar to the one in the video below. I'd like the operator to be able to start and stop a timer whenever they'd like. The duration time would automatically appear in a field titled "Duration". I've looked into zapier.com and workato.com . I've also looked for other services, but most are very expensive and it'd be better to just let the operator manually opening their own stopwatch. Does anyone know any stopwatch that could be integrated into a form? I've found a quickbase app that is a timer, but that would be just as much work for the operator as manually opening their own stopwatch. Does anyone have any hints/tricks/resources?

I have a novel solution and halfway through creating a demo. The demo will work from a report or view record page and timers will continue to count if started even when the page holding the counters is not displayed! And you will be able to have multiple counters active at the same time.

Thanks Dan. I've seen some of your demos and their very useful. When do you think you'll finish the demo?

Probably by the end of the week - I tend to work on these demos at odd times and refine it. The code is actually the easiest part. Here is a screenshot of what I am playing with now:


">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1736202/RackMultipart20180619-117825-1pa6dad-screenshot_inline.jpg?1529416825">

Normally you would not see the fields [Last Start Time] and [Last End Time] as these fields store an internal state of milliseconds values and allows the timer to "calculate the passage of time" even if the page is not currently being displayed.

Hey Dan looks great. I've found different javascripts for stopwatches, but this one seems to have the most features https://codepen.io/_Billy_Brown/pen/dbJeh">https://codepen.io/_Billy_Brown/pen/dbJeh">https://codepen.io/_Billy_Brown/pen/dbJeh . I found one of the challenges is creatinga stopwatch that can have "laps" and can start and stop and start again at any moment.

>creating a stopwatch that can have "laps" and can start and stop and start again at any moment.

I probably won't go quite so fancy on the display as that demo does because my intention is to have the ability to have multiple timers displayed in a report as well as a single timer on a view page.

This isn't going to be too complicated in the end. It is the practical workflow and navigation that takes a little time to nail.

By storing the last start and last stop times in fields you can resume the display of the counter and it will just display the current elapsed time and continue counting (if it had been started) despite the fact that the page may have been closed in the intervening time.

This was pretty easy to do. Here you go:




StopWatch
https://haversineconsulting.quickbase.com/db/bnsjt3e2s?a=td

Paste Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=666

Notes

(1) I used the library FlipClock:

FlipClockJS
http://flipclockjs.com/

(2) This demo is intended for a user to observe and manipulate their own timers. If multiple users are manipulating the same timer there will probably be some confusion as the underlying state of the time may become inconsistent with what is displayed for another user.

This is perfect thank you! What type of fields are the last start time, last stop time and last saved time?

The fields are numeric and hold elapsed seconds (not milliseconds). They are "passed" to the script using data attributes on the timer <div> and updated when the appropriate button is clicked. They should be considered internal states of the timer and not normally displayed.

Could I still use the last start time and last stop time to create a new field to calculate the duration? I also created my own form to test out the stop watch, but the flipclock isn't displaying. I've attached pictures of the display, formula, variables and code page. Any ideas on how to fix it?">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1736411/RackMultipart20180620-30772-1vxca2u-stopwatch_1_inline.PNG?1529499874">

">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1736412/RackMultipart20180620-121638-1e8uhod-stopwatch_2_inline.PNG?1529499887">

">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1736413/RackMultipart20180620-37974-1mci9bi-stopwatch_3_inline.PNG?1529499901">

If timer is stopped ( [Last Start Time] <= [Last End Time] )you can calculate the duration as:

Seconds([Last Saved Time])

But if the timer is running ( [Last Start Time] > [Last End Time] ) the duration is evolving: ...

I tried using the demo in one of my forms, but it only displays the start, stop and reset timer buttons. It doesn't display the flipclock, because I don't have FlipClock.js downloaded. I've never used java and I was wondering how exactly to download the jQuery 1.7 and FlipClock.js libraries to use in the quickbase code page. Are there any tutorials or resources that could help me?

Those two files are loaded in the script from the CloudFlare CDN:

  var urlFlipClockJS = "https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js">https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js">https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js";
  var urlFlipClockCSS = "https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css";

I directly copied the script into the moduleTimer.js page, but the flipclock isn't working. Is there any way we could set up a GoToMeeting so I can troubleshoot the problem with you?

You have to change these parameters at the top of your scrip to match your application, table and apptoken:

  var dbid = "bnsjt2vbm";
  var dbidTimers = "bnsjt3e2s";
  var apptoken = "bfk55cggkj2vxd64kyhnctc4zm";

You will also have to change several other instances in the code where there are reference to field ids so that they match your fields.


      _fid_7 
      _fid_8
      _fid_10

Sorry for so many questions. Where did you get the dbid and dbidTimers string? I understand it comes from the application and table. But I'm not sure where you found the characters from. I understand the apptoken string is from the settings>app properties>manage

The naming convention I use is that the variable dbid is the dbid of the application and variable dbid<TableName> is the dbid of a specific table. Both of these dbid strings are in the URL. Examples:


https://login.quickbase.com/db/">https://login.quickbase.com/db/9kaw8phg">https://login.quickbase.com/db/9kaw8phg
https://login.quickbase.com/db/">https://login.quickbase.com/db/6ewwzuuj?a=q&qid=6">https://login.quickbase.com/db/6ewwzuuj?a=q&qid=6

Got it working! Thank you for all of your help I appreciate it.

You are a testament for others at the threshold of employing script in their QuickBase._

Quick question for you, I'm calculating the duration of the stopwatch as Seconds([Last Saved Time]). But since I'm using the stopwatch in a form, the Last Saved Time only updates when the user saves and closes the form. How would I edit the formula so when the user presses the "Stop Timer" button, the Last Saved Time will update?

>But since I'm using the stopwatch in a form, the Last Saved Time only updates when the user saves and closes the form.

The script updates the three fields using the API - not through saving the new or edit native form.

The way I coded the script was for the timer to only operate on a report or a view page - not on an edit or new page. This eliminated the possibility of directly viewing or editing the state of the stopwatch.

When using script on a page there is a general rule I follow to not use the API to modify a field that is currently being displayed or edited on a native form. If you do so you can create an inconsistency for the user who might think a field has the displayed value but in reality it has been saved through the API.

Hi Dan, sorry for the late response, I was out of town. Thank you for explaining how script should only be applied to a report or a view page. I changed the timers, so they're in a report. I'm still unsure where I put the calculation for the duration. I've put a photo of my timers page down below

I tried calculating the duration as shown in the comment above. I made a field and did Seconds([Last Saved Time]). However, the duration isn't saved. Is there another way I could display the duration?

Seconds([Last Saved Time]) is the correct formula but it is only valid as the total elapsed time when the Timer is stopped. When the Timer is running the elapsed time is evolving and [Last Saved Time] merely represents the time the Timer was last stopped (or reset)..

The [Last Saved Time] is saved with the timer is Stopped or when Reset.

I put the formula in a duration field as shown below.




 But when I tried to start the timer and stop the timer at 8 seconds (as shown below), the duration field doesn't change. I understand the formula, but it's not working in the report. 

If you wand to display the Duration field it will only be valid if the timer is stopped and you need to reload the page when stopped to display the correct value.

  $("a.QBU_Stop").on("click", function(event) {
    var rid = this.dataset.rid;
    $('a.QBU_Start[data-rid=${rid}]').css("visibility", "visible");
    $('a.QBU_Stop[data-rid=${rid}]').css("visibility", "hidden");
    clocks[rid].stop();
    var lastsavedtime = clocks[rid].getTime().time;
    $.post(dbidTimers, {
      act: "API_EditRecord",
      rid: rid,
      _fid_8: parseInt(new Date().getTime(), 10) / 1000,
      _fid_10: lastsavedtime 
    }).then(function() {
      document.location.reload(true);
    });
  });

So I added a code page named duration.js and copied in the above code you commented. Would I only need to change the  _fid_ ? Would I need to change anything else? Or would I just insert the code into my existing code page for the timer?




I changed my duration field to this, but the duration field on the table doesn't have anything in its column:

My example did not use a formula field [Duration] = Seconds([Last Saved Time]).

If you choose to use and display such a field it will only hold a valid value when the timer is stopped,

My script set the [Last Saved Time] through the API when the timer was stopped and your [Duration] field will react to this change. However, you don't want to  create a situation where a displayed value is different than the stored value. So all you have to do is reload the page when the timer is stopped and when the page refreshes the stored value of [Duration] will once again be in sync with the displayed value of [Duration]

This is a generic concern. If you are using the API to change a field's value you never want to get into a situation where the displayed value is different than the stored value or it will cause confusion to your users,

>My script set the [Last Saved Time] through the API when the timer was stopped and your [Duration] field will react to this change. 

How can the duration field automatically change if it's not referenced in the timer field's formula or in the script? I understand you reference the last start time, last saved time and last stop time in the formula, but the duration field isn't referenced.

>How can the duration field automatically change

It is a formula field so if the input changes (ie [Last Saved Time]) the formula could calculate a new value. I do change [Last Saved Time] via the API when the timer stop button is clicked.

This is the very last part I need help with. I've tried editing the javascript myself, but I don't have a lot experience with it. Do you have any other suggestions to the comment below? It's greatly appreciated

Since [Duration] is a duration formula field that is dependent on [Last Saved Time] , then this is all I need to have in as the duration, correct? 




And since I need to reload the page, my code page should remain the same as the pastie, but include the highlighted part, correct?





But when I create a new timer, I try to start the timer and let it go for a 7 seconds. When I stop the timer, the page refreshes and the timer resets just goes back to 0 and the duration field doesn't save as 7 seconds. Below is a picture of what the table looks like, when it automatically refreshes. Why is this? Is it because of the script where it resets the all of the _fid_ as 0?

I am fairly new to Quickbase and was looking to add a timer to the app/form which I have built. Would you be able to guide me or direct me to the appropriate tutorial to add the time to track duration of time worked on a particular case?

------------------------------
Mohammad Moqueet
------------------------------

Original Message:
Sent: 06-18-2018 21:41
From: Jessica Haskins
Subject: Stopwatch built within form

I ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1736048/RackMultipart20180618-42866-1qhcbd3-form_inline.PNG?1529357437">


I have the following form above for a fabrication department. The fabrication operator must fill out the form whenever he/she starts a new job. Instead of having the "Clock in" and "Clock out" fields, I'd like to create a stopwatch, similar to the one in the video below. I'd like the operator to be able to start and stop a timer whenever they'd like. The duration time would automatically appear in a field titled "Duration". I've looked into zapier.com and workato.com . I've also looked for other services, but most are very expensive and it'd be better to just let the operator manually opening their own stopwatch. Does anyone know any stopwatch that could be integrated into a form? I've found a quickbase app that is a timer, but that would be just as much work for the operator as manually opening their own stopwatch. Does anyone have any hints/tricks/resources?