cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
693
Views
4
Helpful
4
Replies
Highlighted
Beginner

How can I create a gadget with Modal dialog on call receive

Hi ,

I am trying to build a gadget that shows a modal dialog box when incoming call is not answered by the agent. this Dialog should have two button to change user state again to ready or not_ready state.

any  help is appreciated.

Thanks

Navin Saxena

4 REPLIES 4
Highlighted
Contributor

Hey.

In your Render function in your js file you can trigger it from the user.getState

function render() {

        var currentState = user.getState();

          if (currentState === states.NOT_READY) {

            var currentReason = user.getReasonCodeID();

               if  (currentReason === 32763) {

                    " show modal "

               }

          }    

}

         

on your modal you kan make 2 button that calls som functions that change the states

Cal them something like this:

finesse.modules.<GadgetName>.setUserStateReady()

finesse.modules.<GadgetName>.setUserStateNotready(1)

Function for changing to ready :

setUserStateReady: function () {

         user.setState(states.READY);

     }

Function for not Ready (With reasoncode id)

setUserStateNotready: function (ReasonCode) {

         rc = { id: ReasonCode };

         user.setState(states.NOT_READY, rc);

     }

Hope this makes sence :-).

Best regards

Thomas

Highlighted

Just be aware that the modal only shows in front of that active gadget.

If the user is on another tab, he/she won't se the modal. This is due to the Finesse is build up in containers with each gadget in it's own container.

If you wan't the gadget to be on all the tabs, you could put it in the top under  or over the callcontrol gadget (and use class="claro" on you body)

Capture.PNG

Best regards

Thomas

Highlighted

Hi John,

thanks for your reply. I am looking for a model that can cover the entire browser screen. I used finesse Modal dialog that works. but the issue is it works just for one time  if i want to get the pop again I have to reload the browser again and it will come one more time. I couldn't understand  what am i missing?

here is my code sample.

ScreenPopRonaDialog : function () {

  var funcName = "ScreenPopRonaDialog";

  logMessage(funcName + "Into");

  try{

  var preMessageForRONA =

  '<div id="dialogTitle" style="padding-bottom:10px;border-bottom:1px;color:white; solid #ffffff;">'

  + '<table width="100%" height="100px"> <tr width="95%"><td width="50%" align="left">'

  + '<fieldset class="group_box"><legend id="content"><span nowrap class="small_text" style="color:white;font-weight:bold;">'

  + modalDialogTitleText

  + '</span></legend><br><div id="dialogBody" title="Dialog Body." style="color:white;line-height:1.5em;">'

  + modalDialogContentText;

  var selectList = '<BR>Not Ready Codes: <select id="notReadyReasonCodes">';

  var tailMessageForRONA = '</div></fieldset></td></tr></table></div>';

  //Dynamically add the Not Ready Reason Codes to the drop down.

  if ( _notReadyReasonCodes !== null ){

  $.each( _notReadyReasonCodes, function( key, value ) {

  selectList = selectList + '<option value="' + value.id + '">' + value.label + '</option>';

  });

  }

  selectList = selectList.concat('</select>');

  var ronaDialogHtml = preMessageForRONA + selectList + tailMessageForRONA;

  ronaDialog = containerServices.showDialog({

  title: "SoMN RONA Alert",

  height: 300,

  width: 250,

  message : ronaDialogHtml,

  buttons : [

  {

  text : "Ready",

  click : function() {

  user.setState(states.READY);

  logMessage(funcName, " ********* Set Agent/Supervisor to READY code.");

  closeRonaDialog();

  //containerServices.hideDialog()

  }

  },

  {

  text : "Not Ready",

  click : function() {

  var selectedValue = ronaDialog.find('input:text, select').val();

  var rc = { id: selectedValue  };

  logMessage(funcName, " ********* Set Agent/Supervisor to NOT READY code:" + selectedValue);

  user.setState(states.NOT_READY, rc);

  closeRonaDialog();

  //containerServices.hideDialog()

  }

  }

  ],

  isBlocking : true

  });//!requireAutoHide

  logMessage(funcName + "ContainerServices.showDialog() returned a dialog object!" );

  //var result  =  containerServices.activeMyTab();

  window.focus();

  }catch(err) {

  logMessage(funcName + " Error=" + err.message);

  }

  // Enable auto hide feature if configured

  if(requireAutoHide){

  logMessage( functionName, "Auto hide is required. Activating autohide functionality.");

  setTimeout(function() {  containerServices.hideDialog();}, autoHideInterval);

  }

  logMessage(funcName + "Out of");

  },

and here is the event I am calling it.

handleUserChange = function(userevent) {

  if((userevent.getState() === "NOT_READY") && (userevent.getData().reasonCodeId == -1)){

  finesse.modules.RONAScreenPopsGadget.ScreenPopRonaDialog();

  window.focus();

  }

    },

Please help??

Highlighted

Hi,

If it works the first time and not the second, I would suggest using the browser's developer tool the second time around to see why it isn't hitting the code to show the modal.

Thanx,

Denise