Simplest manual timer start-stop button

–Intro–
First of all, thanks for being a responsive community and also for helping me out with the CLI installation errors before.
I’m new to JS based development and decided to use FreshDesk extension as the first exuse to grow this direction, because we are using FreshDesk extensively in my workplace anyway.
–Goal–
Actually what we are lacking the most is a very simple feature: To have one button in the top navigation that can toggle (start or stop) the timer, without any further interaction/requirements. (Very much like what the Clockify’s integration button does externally)
–Required Features–
-Minimum:-

  • To have an icon/text on Top navigation (if text: “StartTimer”)
  • Upon clicking that button, the timer should start immediately without any further popups/questions. (all settings can be default, we dont care about billable or comments)
  • The timer should run uninterrupted until the button is clicked again (toggle) or stopped manually in the sidebar.
  • The button should indicate toggle status: if icon: color change, if text:“StopTimer”.

-Optimum/Extra:-

  • The button icon/text could be replaced by the currently spent time: [00:05:01] OnClick starts or stops.
  • The Chrome tab title could also display the spent time diamically in case the toggle is ON.

–Comparison–
Firstly we were very surprised that there is a nice inbuilt hotkey (m) to START the timer, but why is there nothing to stop it? (Opening the sidebar to do that is too much extra effort for quick interactions)
I have then tried the “Auto Start Timer” that is already available in the app store, but we niether want the trigger to be status based, nor we want it to stop automatically while not looking at the particular ticket page (because resolution needs working in different tabs.) If the sourcecode for that app is public however, I might be able to learn a lot from that in the right direction?! (do you know about that?)
There is then the “Timer On Tap” available as a sample app, and that is also quite close in the sense of having the icon in the right place, but to my understanding that also only starts the timer. + Unfortunately my current testing session with it runs on an error inside the popup sidebar: “Some error has occured while fetching Agents.”

–Steps taken sofar:–
I can find in the manual (/api/#toggle_time_entry) this reference:

curl -v -u user@yourcompany.com:test -H “Content-Type: application/json” -X PUT -d ‘’ ‘https://domain.freshdesk.com/api/v2/time_entries/3/toggle_timer

I assume the above could be used for the purpose, but I’m not sure how best to implement it in the app code itself.
Also I’m not sure if I will need “serverless” or not, in order to have this applet available for our subdomain.
It can either be “Custom App” for us only or a public “FreshWorks App”, I have no prerefernce.

I really hope somebody could post me a sample code at least for the minimum requirements that we can then maybe experiment with further on. I assume it is very easy, and possibly many teams created such a button already, but for me it is still a thing to be crecked.

Thanks in advance.

1 Like

@Adam_Bukovinszki,

First of all, thank you for taking time and effort and describing the issue so well. We acknowledge that we could have done better responding to you much earlier. Hopefully, you can empathize with our bandwidth.

  • That is a fair ask which even got me thinking. Even I did a quick search to find the hotkey to stop timer. I didn’t find any. This is something I share as a feedback for Product team.
  • If you are looking for the Timer logic, we have a sample app that demonstrates Pomodoro functionality. Please have a look, and let me know if that helped you make some progress.

On Features

  1. This should be possible. Not sure about the text on hover to be Start Timer. As far as I know, the app’s name should appears on mouse hover at Top Navigation App location. But yours sound to be valid usecase, we should take it as feedback to make this ask possible via our developer platform.
  2. You can use Custom installation page to have any additional default settings.
  3. In the app’s logic, you can have a boolean assigned on click which can keep track of start or stop Timer functionality.
  4. It is not possible about the icon color change, instead you show notification using this platform feature.
  5. The icon and text are not actually possible to change at the moment. #4 is only way as of today. As this ask can be valuable, I will try to add to our feature asks log for teams to prioritize.
  6. Same as #5

The steps you have taken so far are indeed good start. Clearly, your excuse to grow this way is better decision.

  1. You have identified the correct Freshdesk Product API.
  2. I have added an code sample, depending on your minimum requirements, I think serverless is not needed. But if you grown on, you may need it as you will progress. May be.
  3. Custom App should suffice if you want it for your own Sub-Domain.

Keep experimenting!

1 Like

Hi Saif,
Thanks for the response.
Only one related question for now:
I can see that the pomodoro timer you provided is a FreshService app, not a FreshDesk app.
What specific transformation is needed to FS app codes before they can be used in FD?
I have actually already downloaded the full samples package before, including the pomodoro, but that I have omitted, after investigating the so called “freshservice_app_for_freshdesk” and saw the installations page screenshot contain login requirements for both FS and FreshDesk. (I have an admin account for the FreshDesk only)
Nevertheless I have tried to run it with “FDK run”, but not surprisingly it was not doing anything noticable on a ticket page. (in dev=true link)

Regardless of the pomodoro, I have come up with the solution phase one.
Actually I was silly looking at the cURL API library first, I realised that is only for external calls?!
I should have looked for commands here:
https://developers.freshdesk.com/v2/docs/interface-api/#ticketstarttimer
So the basic toggle code can be as simple as:

$(document).ready(function () {
app.initialized().then(function (_client) {
var client = _client;
var running = false;
client.events.on(‘app.activated’, function () {
if (running == false ){
StartOrStop = ‘start’;
}else{
StartOrStop = ‘stop’;
}
client.interface.trigger(StartOrStop, {
id: ‘timer’
});
running = !running
});
});

As for ‘Phase2’ (having a visual indicator in place):
I think there might be something readily available, because there is the STAR button,
that actually already has a visual toggle nature. (empty star vs. yellow star)
I assume it is done by swapping the icon based on some status parameter.
What can you tell about that?
(or you say that the star uses some special stuff for that, that is not currently available for custom apps?)

*by the way, i have no idea yet why this “client = _client” part is needed. What does it do for good?

**I have created a temporary workaround for the visual indicator!!:
I’m using the ticketDelete button enable/disable toggle for that.
client.interface.trigger(‘disable’, {id: ‘ticketDelete’}); // client.interface.trigger(‘enable’, {id: ‘ticketDelete’});

***Is there a way to set the time for how long a notification is shown?
I have added my own indicators, and also there is an automatic notification when timer starts,
both I would like to reduce to a much shorter time to appear.

1 Like

cc: @Adam_Bukovinszki

  • Both Freshdesk and Freshservice use the same app platform to run, in fact very few changes as a change in manifest.json could be sufficient, yet the logic implementation can be reused.
  • You may not see anything happening on the ticket for custom installation page as it only occurs to the user before the installation of app. In the local testing, you have to navigate http://localhost:10001/custom_configs in order to view this page. Also, please allow Insecure content to be loaded in your browser.
  • Nice that you have found one of the Interface API to interact with the timer.
  • I will try to find out if the icons can be customizable to use it as an Indicator. Meanwhile, I’d request you see if Notifications feature can solve this problem?
  • Regarding client = _client. It is purely up to the developers stylistic choice of working with variables to avoid mixing of scopes.
  • Appreciate the way you used enable/disable toggle using client.interface.trigger('disable',{id:'ticketDelete'})
  • I am afraid that I am not sure if developers have control over the number of seconds a notification is shown. Let me few days to confirm the same.