cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
994
Views
0
Helpful
6
Replies

Finesse Container Timer/TIMER_TICK_EVENT in a 3rd Party Gadget

cparks13
Level 1
Level 1

Hello, all!

I'm having a difficult time using the TimerTickEvent service, explained here: https://developer.cisco.com/docs/finesse/#!finesse-container-timer/finesse-container-timer

We've created a 3rd party gadget. Our goal is to have a Timer in the 3rd party gadget that shows how longer an agent is in all of the various Finesse States, updating the timer as they switch states, just like the Finesse State dropdown in the upper left corner of Finesse does, but with ALL Finesse States covered.

I'm trying to implement this code, but I feel like I'm not fully understanding what to put in my own code in the js file. On the linked page, in one section, under the _processTick function, it says "Developer's add UI update logic here." I don't even know what that's supposed to entail. I also have no clue how this is supposed to be displayed to a user. Do I use JavaScript to update an HTML element? Like "$('#timeInStateSpan').append(whateverIAmSupposedToPutHere);" ? If so, what am I supposed to put for it to show? How do I get the timer to update?


Are there any sample gadgets showing how TimeTickEvent and this code is implemented in a 3rd Party gadget? This just doesn't make sense to me without some further explanation or a sample gadget showing the full code in use.


Thank you for any and all help!

6 Replies 6

dekwan
Cisco Employee
Cisco Employee

Hi,

Just to clarify, the timer tick event is a single timer for the whole gadget. That being said, you can still use it to implement what you are trying to achieve.

The timer ticker is just a clock/timer where the handler gets called every second. During some times, you may just want to ignore and not do any updates, while others you do. For example, lets say that every minute, you want to call an API. So in your _timerTickHandler you will want to do nothing for the first 59 seconds. Then when a minute hits, you will call the function (_processTick) that will call the API. It doesn't need to be called _processTick. That was just a generic name that was used for the sake of the example.

The SparkTeamAnnouncementSampleGadget uses the timer tick event, but doesn't call the function _processTick. Instead, it calls it _updateGadget.

As far as displaying to the user, yes, you use javascript to modify the html element. You put the exact time you want to display into the element. The timer itself constantly ticks so you don't need to do anything to make it update.

Thanx,

Denise

Denise,

Thank you for replying! Looking at the SparkTeamAnnouncementSampleGadget did help for the placement of the various functions/code. However, I'm running into an issue with the timer.


I have a span html element updating, acting as the timer ("timeInStateSpan"). Upon loading the page, the value for this field is immediately starting/showing at a number around 1,528,142,247,145. Quite a large number. From there, it increments by somewhere between 10,000 and 20,000 (different numbers each increment). 


I've tried changing the _lastProcessedTimerTick, _maxTimerCallbackThreshold, and _forceTickProcessingEvery initial values, but the results are very similar.


I'm trying to create a timer that just starts at 0 and then ticks up by an increment of 1, every one second (1000 milliseconds) that passes, just like a typical timer and the timer that is in Finesse for the various Finesse States.


Do you have any insight on how I can achieve this logic? Some value(s) must not be right in my code. Could you take a look for me? ("..." indicate code I didn't think would be helpful/relevant):



    /* Finesse Container Timer Variables */

    var _lastProcessedTimerTick = null; //Gadget defined field: _lastProcessedTimerTick

    var _maxTimerCallbackThreshold = 500//Gadget defined field: _maxTimerCallbackThreshold

    var _forceTickProcessingEvery = 10000//Gadget defined field: _forceTickProcessingEvery (10 seconds)


...

...

    /*

     Processes a timer tick - updating the UI.

     @param start is the time that the tick was received

     @returns {boolean} true

     */

    _processTick = function (start) {

   

        //Developer's add UI update logic here

        $('#timeInStateSpan').text(start);

   

        _lastProcessedTimerTick = start;

   

    return true;

    },


    /*

    Timer tick callback handler.

    @param data

     */

    _timerTickHandler  = function (timerTickEvent) {

        var start, end, diff, discardThreshold, processed;

               

        start = (new Date()).getTime();

        processed = false;

           

        //Prevent starvation of timer logic

        if (_lastProcessedTimerTick === null) {

            processed = _processTick(start);

        } else {

            if ((_lastProcessedTimerTick + _forceTickProcessingEvery) <= start) {

                //Force processing at least every _forceTickProcessingEvery milliseconds

                processed = _processTick(start);

                }

            }  

           

        end = (new Date()).getTime();

        diff = end - start;

        if (diff > _maxTimerCallbackThreshold) {

            _clientLogs.log("GadgetXYZ took too long to process timer tick (_maxTimerCallbackThreshold exceeded).");

        }

    },

...

...

        init : function () {

            $('#RecordingStatusIndicator').hide();

            var ReportIssueObj = {};

           

           

            id = prefs.getString("id");

            var extension = prefs.getString("extension");

            var starttime = prefs.getString("startTime");

            gadgets.window.adjustHeight();

           

            var cfg = finesse.gadget.Config;

           

            finesse.clientservices.ClientServices.registerOnDisconnectHandler(disConnectHandler);

            finesse.clientservices.ClientServices.registerOnConnectHandler(onConnectHandler);

            //var SystemInfo = new finesse.restservices.SystemInfo();

            //var SysInfo = new SystemInfo;

           

            //Set some page defaults

            // Initiate the ClientServices and load the user object. ClientServices are

            // initialized with a reference to the current configuration.

            finesse.clientservices.ClientServices.init(cfg, false);

           

            // Initiate the ClientLogs. The gadget id will be logged as a part of the message

             clientLogs.init(gadgets.Hub, "Utilities");

             clientLogs.init(gadgets.Hub, "TransferMessage");

   

            user = new finesse.restservices.User({

                id: cfg.id,

                onLoad : _handleUserLoad,

                onChange : _handleUserChange

  });

                       

            // Initiate the ContainerServices and add a handler for when the tab is visible

            // to adjust the height of this gadget in case the tab was not visible

            // when the html was rendered (adjustHeight only works when tab is visible)

            containerServices = finesse.containerservices.ContainerServices.init();

            containerServices.addHandler(finesse.containerservices.ContainerServices.Topics.ACTIVE_TAB, function(){

                clientLogs.log("Gadget is now visible");  // log to Finesse logger

              // automatically adjust the height of the gadget to show the html

                gadgets.window.adjustHeight();        

             });


            containerServices.addHandler(finesse.containerservices.ContainerServices.Topics.TIMER_TICK_EVENT,               _timerTickHandler); 


            containerServices.makeActiveTabReq();

                        var clipboard = new Clipboard('#CopyBtnUtilities');

           

            clipboard.on('success', function(e){

                console.log(e);

            });


            clipboard.on('error', function(e){

                console.log(e);

            });

        },

Hi,

The _lastProcessedTimerTick is actually the date/time in epoch which is why it is absurdly large. You need to create your own variable and calculate the seconds based on the time difference per tick.

Thanx,

Denise

Denise,

I appreciate your help, but I think I might just create a Javascript counter and use that. This is just a bit too confusing.

I would like to suggest that a template and/or sample gadget be created that shows how to create a Time In State timer similar to the one Finesse itself has for the States, in the format of seconds, minutes, and hours. An example with a functioning timer in that format, showing all of the pieces and calculations needed to make it work. This would greatly help people who are in situations like mine.

Again, thank you for your help and time.

Hi,

Finesse doesn't suggest using a JavaScript counter due to performance issues on the client. But if you test it well and it doesn't affect the experience of your agents, then feel free to use it.

Thanx,

Denise

Denise,


Right, I did see that it wasn't recommended. However, I cannot make sense of these pieces of the TIMER_TICK_EVENT that need to be customized into a different format and calculated differently in order to make it act as a normal timer. If I could figure out how to not display/update the timer as epoch time, and instead display/update the timer as a normal timer in seconds-minutes-hours, I'd go this route.  However, I cannot find anywhere online where someone has used TIMER_TICK_EVENT as a normal, basic timer.


Thanks.

Getting Started

Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community: