How can I override the default "click on phone number" action?

I noticed that when a phone number with the appropriate format is clicked in the Contacts view, this performs a "callto:<phone number" action which connects to Skype or other compatible software. It would be useful to me if I could override this action. How can I achieve this? Can this be done with a custom module or is there another better way?

Thanks in advance!

  • hi André Policarpo

    yes , you can do by overriding phone handlebar files.

    copy clients/base/fields/phone/*.hbs to custom/clients/base/fields/phone

    and then load js file using jsgrouping

    1.   custom/Extension/application/Ext/JSGroupings

    you can click on that and perform action

    this is detail.hbs   try this

    {{#if value}}

        <img style="cursor:pointer;float:left;margin-right:5px;padding-top:2px;width:24px" src="custom/themes/default/images/abc.png" onclick="one();">

        <div class="ellipsis_inline" data-placement="bottom" title="{{value}}">

            {{#if skypeValue}}

            <a href="callto:{{skypeValue}}">{{value}}</a>

            {{else}}{{value}}

            {{/if}}

          

        </div>

    {{/if}}

    Rebuild JS Grouping Files

    Quick Repair & Rebuild

    ..

  • What exactly are you trying to override? The action it performs or the formatting/URL it creates for such phone numbers?

  • Thanks for the fast response!

    I'm quite new to SugarCRM development so there's a thing I'm missing. Should I try your suggestion with a constructed custom module and then install it with the "Module Builer" in the SugarCRM instance?

  • I'm trying to override the action, yes. What I want to do is to replace the default action which is a html "callto:{skypevalue}" tag with a action of my own.

  • Hi André,

    Sugar uses default HTML functionality with callto: feature. So, my recommendation about this. I would modify hbs file with a class definition like;

    {{#if skypeValue}}
            <a class="my-custom-action-selector" href="callto:{{skypeValue}}">{{value}}</a>
            {{else}}{{value}}
            {{/if}}
    

    Using this class attribute, you can bind any action you want in phone.js initialize function like;

    ({
      extensFrom: 'PhoneField',
      events: {
        'click .my-custom-action-selector':'doMagic'
      },
    
      initialize: function (options) {
        this._super('initialize', [options]);
      },
    
      doMagic: function (event) {
        // do your magic here
        return false; //this will kill the event to run callto:{skypeValue}
      }
    })
    

    Hope this helps.

    Best Regards

    Tevfik Tümer

    Developer Support Engineer

  • Thanks a lot for the useful response!

    Sorry to bother you with such trivial questions, but this should be done with a custom module am I right?

    Thanks again.

  • Hi André,

    Yes. You can do this customisations by copying your hbs file

    from

    ./clients/base/fields/phone/phone.hbs

    to

    ./custom/modules/<YOUR_CUSTOM_MODULE>/clients/base/fields/phone/phone.hbs

    For the js file, you would need to create the file by yourself like;

    ./custom/modules/<YOUR_CUSTOM_MODULE>/clients/base/fields/phone/phone.js

    After changes, do not forget to run Quick Repairs and Rebuild.

    Best Regards

    Tevfik Tümer

    Developer Support Engineer

  • Tevfik Tümer Thanks a lot this worked perfectly!

    If you don't mind I have one more question. Now that I have the doMagic function running when the phone number is clicked, how can I access the clicked phone number in the phone.js?

    EDIT: Nevermind, I figured it out through a bit of trial and error

  • Hi André,

    I'm glad it worked.

    Best Regards

    Tevfik Tümer

    Developer Support Engineer

1 2