05.5. Javascript Editor

Owned by PeterF (Deactivated)
Sept 06, 2016
5 min read

Navigation: Campaign | Campaign Template | Screen Layout | Javascript Template

NC includes a builtin Javascript editor which allows you to apply scripting to a screen layout. To further assist working with screen layouts NC includes the popular JQuery framework.

njDialerPlugin

NC provides a JQuery plugin (njDialerPlugin) which exposes a standard set of entry points for each script which will aid you in adding processing logic to a screen. 

When you first open the javascript editor it will automatically pre-populate the editor with the three methods, onConnect, onPreview and onSave.

onConnect

onConnect is called when a call is answered as the screen layout is being displayed. You can do an initial processing such as enabling address validation or a the wizard engine.

Example:

jQuery.njDialerPlugin.onConnect=
function ()
{
    debugger; // break out to the browsers debugger if active
    jQuery.njDialerPlugin.enableAddressValidation("Address1", "Suburb", "State"
        , "PostCode", "XXX-XXX-XXX"
        , "https://xxx.datatools.com.au/dt_webservice/dt.asmx/DtSearchAddressLine_jsonp");
    loadWizard();
    
    // Hook recording buttons
    jQuery("#Start").removeAttr("disabled");
    
    jQuery("#Start").click(startRecording);
    jQuery("#Stop").click(stopRecording);
    
};

onPreview

onPreview is only called if you are running in preview mode. the onPreview method is called as the screen layout is displayed in preview mode.

Example:

jQuery.njDialerPlugin.onPreview=
function ()
{
    loadWizard();
};

onValidate

onValid is called as the user goes to leave the lead and after they have selected a disposition. The onValidate method allows you to validate any data entered into the form and force the user to fix the issue(s) before saving the lead. 

If onValidate validate returns 'false' then the user will not be able to leave the screen and the onSave method will not be called.

The onValidate will be called each time the user attempts to leave the lead "normally be clicking 'Next Lead' " as such onValidate may be called multiple times for a given lead.

You will normally only perform validation when one of a specific set of dispositions has been selected. As such you would normally check the selected dispostion before doing any validation. For dispositions that don't need to have validation performed (e.g. wrong number) simply return true.

Example:

jQuery.njDialerPlugin.onValidate=
function (disposition)
{
    //validate before saving lead
    return true;
};

 

onSave

onSave is called ONLY after the onValidate has returned 'true. The onSave method allows you to trigger any actions that should only be performed on validated data and must only be performed once for each call. The onSave method is passed the disposition set by the user.

Example:

jQuery.njDialerPlugin.onSave=
function (disposition)
{
    // trigger some action that should only be done once per call.
    return true;
};

onHangup

onHangup is called when a call is hungup by either end. onHangup is ALWAYS called before onSave.

onHangup is only used in limited circumstances where the call duration or termination is an important trigger. Most times using onSave is more appropriate.

A typical use of onHangup is to notify the recording UI that the call has completed.

Utility Methods

NC jquery plugin also provides a number of utility methods.

hangup

Hangs up the current call.

jQuery.njDialerPlugin.hangup();

The call will be terminated and the onHangup event will fire.

getForm

returns the html form object used by NC to wrap all of the input fields on the screen layout. Even when a wizard with multiple panels is used there is still only a single form that wraps all input fields.

e.g.

jQuery.njDialerPlugin.getForm()

getFields

The getFields method takes a single parameter which is the campaign field name. When laying out a screen layout NC encodes the fields and as such you can directly access the fields using the campaign field name. The getFields method is aware of the encoding and will return the correct set of fields. 

You will often have multiple instances of a field on the screen. These can be input or view only instances of the field. The getFields function will return an array of all of the 'input' fields that represent an instance of the requested field. If there is only a single field then an array with a single element will be returned. If the field is not on the screen then an empty array will be returned.

e.g.

jQuery.njDialerPlugin.getFields("Firstname");
// to access the first field use:
jQuery.njDialerPlugin.getFields("Firstname")[0];

getFieldValue

returns the value of the field. Even if there is more than one instance of the field this will only return a single value. This makes sense when you understand that if there are multiple instances of a field on screen the system will ensure that all instances of the field are kept in sync.

If the field isn't on the current screen layout the current value will be returned. The current value is the value of the field as it was at the last call or if no call has been made then at the point of import.

setFieldValueByName

Set the value of a field.

e.g.

jQuery.njDialerPlugin.setFieldValueByName("Firstname", "Brett");

getRealFieldNames

Occasionally you will need to retrieve the encoded field name. The getRealFieldNames method will allow you to do this.

You should note that this method always returns an array of strings. There will be one element in the array for each input instance of the field which is on the screen layout. This does NOT return view fields (#view.fieldname).

This method can be useful if you need to directly access the fields underlying html element.

e.g.

jQuery.njDialerPlugin.getRealFieldNames("FirstName");

Radio buttons

Sometimes you may need to programmatically select a radio button. This is a little tricky so the following function may be useful:

function setRadioCheck(fieldname, fieldvalue)
{
    var found = false;
    jQuery.njDialerPlugin.getFields(fieldname).each(function()
    {
        if (this != self && $(this).val() == fieldvalue)
        {
            $(this).attr('checked',fieldvalue);
            found = true;
        }
    });
    if (found == false)
        alert("Programming error in JavaScript; value " + fieldvalue + " not found for Radio buttion with name=" + fieldname);
}

To select the radio button with the value 'accounts' from the group of radio buttons belonging to the field 'contact_role' use the following:

setRadioCheck(randomizeElementNameCase("contact_role"), "accounts");

It is possible to place a button on a screen layout to trigger a particular disposition.

setDisposition

The setDisposition method allow the Screen Layout to programmatically set a disposition. Normally this would be linked to an on screen button or possibly a set of data values.

To set a disposition make the following call passing in the dispositions 'Name' value.

jQuery.njDialerPlugin.setDisposition('Name of Disposition');

To set a disposition from a button use:

e.g.

<input type="button" value="No Answer" onClick="jQuery.njDialerPlugin.setDisposition('No Answer');">

sendToVoicemail

This method allows you o send an answered call to the voicemail route configured in the Campaign Template.

This can be used to do 'agentless' dialing by adding this call to the onConnect method. Each time an caller is connected they will be sent to the voicemail route.

So essentially you can start the ContactHub and walk away whilst a voicemail is delivered to every customer in the Allocation. 

setCallbackDate

The setCallbackDate method allow the Screen Layout to programmatically set a callbackdate. Normally this would be linked to an on screen button or possibly a set of data values. Once the callback date is set you must then set the disposition which must be of Type: callback.

To set a callback date make the following call passing in the date and time when the callback is to occurr.

jQuery.njDialerPlugin.setCallbackDate('2021/05/01 09:30am');
jQuery.njDialerPlugin.setDisposition('Call Back');

The date must be of the form:

yyyy/mm/dd hh:mm(am|pm)

Note: there is no space between the minutes and the am or pm.

To set a callback date from a button use:

e.g.

<input type="button" value="No Answer" onClick="setCallback('2021/05/01 12:30pm');">

You would then need the following function in the Screen layouts javascript:

function setCallback(date)
{
    jQuery.njDialerPlugin.setCallbackDate(date);
    jQuery.njDialerPlugin.setDisposition('Call Back');
}

getConnectedPhoneNumber

This method returns the phone number that was used to connect to the customer. The number isn't availabe during the onPreview event.

jQuery.njDialerPlugin.getConnectedPhoneNumber();

Recording

The API also allows you to display start/stop recording buttons for Agents as well as automatically start/stopping recordings based on agent actions (such as the transition of a Wizard in the screen layout).

Details on the Recording functions can be found 11. Recording.