How to Add a Call Button to the Phone Control in Infor CRM Web

The phone control in the Infor CRM (Saleslogix) Web Client format’s a phone number, when possible, and that’s really about all it does. What if you wanted to also make it so you could click the number to dial it. Other similar controls, such as the web address control, provides a button that you can click to go to, or open, that address. We’ll add something similar to the phone control so you can click it to initiate a call (which will use whatever handles “tel” links on the computer or device you’re on).

What we’ll end up with is this:

To do this, we just need one small bit of Javascript and some CSS. First, we’ll piggyback on the postCreate of the phone control so we can add and wire up the button.

require([
    'dojo/aspect',
    'dojo/dom-construct',
    'Sage/UI/Controls/Phone',
], function (
    aspect,
    domConstruct,
    phoneControl
) {
    aspect.after(phoneControl.prototype, 'postCreate', function () {
        var phone = this;
        domConstruct.create('div', { 
            class: 'call-button Global_Images icon16x16 icon_Call_16x16', 
            title: 'Call', 
            onclick: function() { 
                var num = phone.get('value');
                if (!num) return;
                
                var callLink = document.createElement('a');
                callLink.href = 'tel:' + num;
                document.body.appendChild(callLink);
                callLink.click();
                document.body.removeChild(callLink);
            }
        }, this.domNode);
    });
});

This code adds the button and, when clicked, it will simulate clicking a link with tel: and the number. In order for this button to appear correct on the controls, we’ll need to also add the following CSS:

.textcontrol.phone {
    position: relative;
}

.textcontrol.phone .call-button {
    z-index: 2; 
    vertical-align: middle;
    cursor: pointer;
    position: absolute;
    top: 9px;
    right: 10px; 
}

To make adding this CSS and the Javascript easy, I am using my Custom Loader Module. With that in place, you can just create a folder under Custom\Modules named Phone and add the javascript above as a file named main.js. Then add the CSS to the Custom\Style folder as a file named phone.css.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

5 Comments

  1. Hey Ryan,

    Is this version specific? I added it to our dev 8.1 site and the buttons are not appearing. Using Firefox as the browser.

    Reply
    • Disregard my original comment. I got it to work. Thank you for this and all the other previous mods you have shared here.

  2. Ryan,

    Has anyone mentioned Google Chrome adding the number 202 into the phone number, after the area code, when dialing? We are using the Mitel UCA Dialer. This only happens in Chrome (latest version). Both Firefox and IE/Edge work correctly.

    Reply
    • I’ve not had that for me using Chrome (I don’t get the 202 added to it). Maybe if you copied the code from this post, it brought over some non-ascii char from the HTML that only Chrome seems to deal with? Maybe try removing and retyping the line:

      callLink.href = ‘tel:’ + num;

      To see if that gets rid of it?

      Ryan

  3. Excellent, thanks!

    it might be useful for those who use skype to format the URL as follows:

    callLink.href = ‘skype:’ + num.replace(/[^0-9]/g,”);

    (^ will hook into skype and format correctly by removing all special characters from the number)

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) news and product updates!

You have Successfully Subscribed!