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

[Navin_saxena1]

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

[Thomas G. Johannesen]

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

[Thomas G. Johannesen]

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)

Best regards

Thomas

[Navin_saxena1]

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??

[dekwan]

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

[SakethN]

Hello,
Raising this conversation again since we're facing an issue. In the current v12.6 Finesse environment, in the containerServices showDialog(), we're not able to get selected value from a dropdown list which we are dynamically adding to the text message of dialog box. On clicking a button is dialogbox, the select value is to be forwarded and a function is called. Even though the onClick function triggers, we're getting undefined value for 'ronaDialog' when we debug in browser. But as per documentation, it should return a Modal dialog object. Sharing the latest code for the DialogBox element as an attachment. Please help.