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

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

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?

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

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é Policarpo

yes to every sidecar module.

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

I sort of get it. In my case I need to send a POST call to my contact center API with a custom format that will tell it who the agent logged in is, and the number to dial. I would have to contstruct the call reading the agentId and the phone number. 

I would appreciate any suggestions on how to build this call.

Not new to nodejs or APIs, but very new to SugarCRM.

Rgds,