cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
302
Views
0
Helpful
5
Replies
Highlighted
Beginner

Finesse 12.0 v2 - How to get page gadget stay active after activating a tab gadget

I have a page gadget (orange area) that when clicked, it will activate and automatically open a tab gadget page. But after activating the tab gadget, it seems deactivating the page gadget. I need the page gadget to stay active to show notifications continuously what ever tab was on. 

 

opening a tab.png

 

I'm activating the tab gadget if I clicked the page gadget (orange area) using this code:

 

containerServices.activateTab(tabId);

This is the error I get after activating the tab:

 

The Invalid auth token error is causing my jquery ajax call to fail.

 

page gadget error after activating a tab gadget.png

 

page gadget error after activating a tab gadget 2.png

1 ACCEPTED SOLUTION

Accepted Solutions
Beginner

Re: Finesse 12.0 v2 - How to get page gadget stay active after activating a tab gadget

Hi Denise,

 

Finally, were able to make it work properly now:

 

<a id="notificationBtn" role="button" href="" style="color: #ffffff;  float: right;" onclick="return showSilentMonitoringGadget();" role="button" href="#">
    <span id="notification"></span>
</a>

 I added onclick="return showSilentMonitoringGadget();" instead of using jquery to add the onlick button:

 

$(document).on('click', '#notificationBtn',
    function() {
    showSilentMonitoringGadget(notifications[current].callId, notifications[current].extension);
});

5 REPLIES 5
Cisco Employee

Re: Finesse 12.0 v2 - How to get page gadget stay active after activating a tab gadget

Hi,

 

Good question. I will have to look into this and get back to you.

 

Thanx,

Denise

Cisco Employee

Re: Finesse 12.0 v2 - How to get page gadget stay active after activating a tab gadget

Hi,

 

Sorry for the delayed response. I finally got around to testing this out by using the silentmonitored page gadget as the base and adding a button that will use the activateTab method. I wasn't able to reproduce your errors. I tried using both an agent and supervisor. Can you explain further how you know that your page gadget is deactivated? Also, can you send me the code to your page gadget?

 

Thanx,

Denise

Beginner

Re: Finesse 12.0 v2 - How to get page gadget stay active after activating a tab gadget

Hi Denise,

 

I have attached steps recording that you can open using any web browser.

1. Scenario 1 - with errors.mht : scenario where I clicked the page gadget to activate Silent Monitoring tab

2. Scenario 2 - without errors.mht : scenario where I clicked the Silent Monitoring tab to show the Silent Monitoring gadget app

 

Please take note that the rest api, Notification Bar page gadget and Silent Monitoring tab gadget are hosted on my laptop so you will not be able to run the gadget properly.

 

 

Here is the complete code for my Notification Bar gadget:

 

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="Notification Bar Gadget"
        description="Notification Bar Gadget">
        <Require feature="settitle" />
        <Require feature="dynamic-height" />
        <Require feature="pubsub-2" />
        <Require feature="setprefs" />
        <Require feature="loadingindicator">
            <Param name="manual-dismiss">false</Param>
            <Param name="loading-timeout">10</Param>
        </Require>
    </ModulePrefs>

    <Content type="html">
        <![CDATA[
            <!DOCTYPE html>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!--
            <link rel="stylesheet" href="https://uccx1.dcloud.cisco.com:8444/cuic/gadget/report-gadget.min.css">
-->
            <!-- jQuery -->
            <script type="text/javascript" src="https://uccx1.dcloud.cisco.com:8445/desktop/assets/js/jquery.min.js"></script>
            <script type="text/javascript" src="https://uccx1.dcloud.cisco.com:8445/desktop/assets/js/finesse.js"></script>
            <!--
            <script type="text/javascript" src="http://10.16.31.140:8080/desktop/gadget/notifybargadget.js"></script>
            -->
            
            <style>
                @font-face{
                    font-family:CiscoSans Regular;
                    src:url(https://uccx1.dcloud.cisco.com:8445/desktop/scripts/fonts/CiscoSansTTRegular.woff);
                    font-weight:400;
                    font-style:normal
                }
                @font-face{
                    font-family:CiscoSans Bold;
                    src:url(../fonts/CiscoSansTTBold.woff);
                    font-weight:400;
                    font-style:normal
                }
                body {
                    font-family:"CiscoSans Regular";
                    font-style:normal;text-rendering:optimizeLegibility;
                }
                .custom-btn{
                  background-color: #F59330!important;
                  outline: none;
                  box-shadow: none!important;
                }
            </style>
            <body>
                <div class="d-flex flex-row justify-content-between pb-2 pt-2" style="height: 40px !important; background: #F59330; color: #FFFFFF; font-family: CiscoSans Regular!important;" id="myContain3r" hidden>
                    <div class="d-flex justify-content-start">
                        <div style="margin-top: -11px !important;">
                            <a class="mr-3 ml-2" style="font-size: 200% !important; color: #ffffff;  float: right;" id="dismissBtn" role="button" href="">&times;</a>
                        </div>
                        <div>
                            <a id="notificationBtn" role="button" href="" style="color: #ffffff;  float: right;" target="_self">
                                <span id="notification"></span>
                            </a>

                        </div>
                    </div>
                    <div>
                        <span id="timeElapsed"></span>
                        <a id="prev" class="badge badge-pill badge-light mr-2 ml-2" style="color: #F59330; width: 30px; vertical-align: middle !important;" role="button" href="#" onclick="return prevPage();" > <b><</b> </a>
                        <span id="pagination"></span>
                        <a id="prev" class="badge badge-pill badge-light mr-3 ml-2" style="color: #F59330; width: 30px; vertical-align: middle !important;" role="button" href="" onclick="return nextPage();" > <b>></b> </a>
                    </div>
                </div>               
            </body>

            <script type="text/javascript">
                // initialize the gadget
                var _cfg;
                var user, pass, teamId;
                var logger;
                var user;
                var containerServices;
                var notifications = [];
                var current = 0;

                
                handleUserLoad = function(userevent) {}

                handleUserChange = function(userevent) {}
                
                gadgets.HubSettings.onConnect = function () {
                    console.log("notifybar: ready...");
                    //finesse.modules.notifybargadget.init();
                    _cfg = finesse.gadget.Config;

                    gadgets.window.adjustHeight();
        
                    // 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
                    logger = finesse.cslogger.ClientLogger; // declare clientLogs
                    logger.init(gadgets.Hub, "NotifyBarGadget");
        
                    user = new finesse.restservices.User({
                        id : _cfg.id,
                        onLoad : handleUserLoad,
                        onChange : handleUserChange
                    });
        
                    logger.log("notifybar user: " + user);
        
                    states = finesse.restservices.User.States;
        
                    // 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(_cfg, false);
                    containerServices
                    .addHandler(
                            finesse.containerservices.ContainerServices.Topics.ACTIVE_TAB, function() {
                                clientLogs.log("NotifyBar Gadget is now visible"); // log to Finesse logger
                                // automatically adjust the height of the gadget to show the html
                                gadgets.window.adjustHeight();
                            });
                    containerServices.makeActiveTabReq();
                    
                    user = _cfg.id;
                    pass = _cfg.password;
                    teamId = _cfg.teamId;
                };

                $(document).ready(function() {
                    setInterval(function() {
                        //if (hideOrShow == "show") {
                            checkHelpNotifications(user, pass, teamId);
                        //}
                    }, 3000);
                });
               
                function displayNotification() {
                    var myGadgetId = finesse.containerservices.ContainerServices .getMyGadgetId(); /*10*/
                    var c = "#gadgets-gadget-content-" + myGadgetId; /* content */
                    var t = "#finesse_gadget_" + myGadgetId + "_title"; /* title */
                    var phoneStatus = notifications[current];
                    
                    if (notifications.length > 0) {
                        parent.window.$(t).show();
                        parent.window.$(c).show();
                        
                        $("#notification").html(notifications[current].message);
                        $("#pagination").html((current + 1) + " / " + notifications.length);
                        $("#timeElapsed").html(calcTimeElapsed(notifications[current].notificationTimeStamp));
                        
                        $(document).on('click', '#dismissBtn',
                            function() {
                                dismisshelp(current, notifications[current].extension, notifications[current].callId);
                        });
                        
                        $(document).on('click', '#notificationBtn',
                            function() {
                                showSilentMonitoringGadget(notifications[current].callId, notifications[current].extension);
                        });
                        
                        logger.log("displayNotification: page gadget has been shown");
                        
                        if (current > (notifications.length - 1)){
                            current = notifications.length - 1;
                        }
                    } else {
                        parent.window.$(t).hide();
                        parent.window.$(c).hide();
                        
                        logger.log("displayNotification: page gadget has been hidden");
                    }
                }
            
                function calcTimeElapsed(timestamp) {
                    var dateOld = new Date(timestamp);
                    var dateNew = new Date();
                    
                    var seconds = Math.floor((dateNew - dateOld) / 1000);
                    var minutes = Math.floor(seconds / 60);
                    var hours = Math.floor(minutes / 60);
                    var days = Math.floor(hours / 24);
                    
                    hours = hours - (days * 24);
                    minutes = minutes - (days * 24 * 60) - (hours * 60);
                    seconds = seconds - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);
                    
                    minutes += (60 * hours);
                    
                    //return "<b>" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds) + "</b> minutes ago";
                    if(minutes > 15 ){
                        return "More than " + "<b>15</b>" + " minutes ago";
                    }
                    return "<b>" + (minutes < 10 ? "0" + minutes : minutes) + "</b> minutes ago";
                }
                function prevPage() {
                    current -= 1;
                    if (current < 0){
                        current = 0;
                        logger.log("prevPage: first data...");
                    }
                    displayNotification();
                }
                function nextPage() {
                    current += 1;
                    if (current > (notifications.length - 1)){
                        current = notifications.length - 1;
                    }
                    displayNotification();
                }
                
                function checkHelpNotifications(userId, password, teamId) {
                    logger.log("Calling https://10.16.31.140:8443/desktop/supervisor/services/notifications...");
                    
                    var supNotification;
                    $.ajax({
                        url : "https://10.16.31.140:8443/desktop/supervisor/services/notifications",
                        data : {
                            userId : userId,
                            password : password,
                            teamId : teamId
                        },
                        dataType : 'json',
                        cache : false,
                        timeout : 600000,
                        success : function(data) {
                            notifications = data;
                            displayNotification();
                            logger.log("checkHelpNotifications: SUCCESS : "+ data);
                        },
                        error : function(e) {
                            console.log("checkHelpNotifications | ERROR : ", e);
                        }
                    }); //End of ajax
                }
            
                function dismisshelp(dataIndex, agentExtension, callId) {
                    logger.log("Dismisshelp..");
                    $.ajax({
                        url : "https://10.16.31.140:8443/desktop/supervisor/container/dismisshelp",
                        data : {
                            agentExtension : '',
                            callId : callId
                        },
                        dataType : 'json',
                        cache : false,
                        timeout : 600000,
                        success : function(data) {
                            logger.log("dismisshelp | SUCCESS : "+ data);
                            notifications.splice(dataIndex, 1);
                        },
                        error : function(e) {
                            logger.log("dismisshelp | ERROR : ", e);
                        }
                    });
                }
                
                function showSilentMonitoringGadget(callId, extension){
                    logger.log("NotifyBarGadget: opening SilentMonitoringGadget tabss..");
                    containerServices.activateTab("silentCallMonitoringTab");
               }
                
            </script>
        ]]>
    </Content>
</Module>

 

 

Regards,

William 

Beginner

Re: Finesse 12.0 v2 - How to get page gadget stay active after activating a tab gadget

Hi Denise,

 

Finally, were able to make it work properly now:

 

<a id="notificationBtn" role="button" href="" style="color: #ffffff;  float: right;" onclick="return showSilentMonitoringGadget();" role="button" href="#">
    <span id="notification"></span>
</a>

 I added onclick="return showSilentMonitoringGadget();" instead of using jquery to add the onlick button:

 

$(document).on('click', '#notificationBtn',
    function() {
    showSilentMonitoringGadget(notifications[current].callId, notifications[current].extension);
});

Cisco Employee

Re: Finesse 12.0 v2 - How to get page gadget stay active after activating a tab gadget

Hi,

 

I'm glad that you were able to figure it out. Let me know if you run into any more issues.

 

Thanx,

Denise

CreatePlease to create content
Content for Community-Ad
August's Community Spotlight Awards