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.

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!