Icon Whatsapp in phone link

[fmatias]

Hi, I have modified the template
/client/res/templates/fields/phone/detail.tpl

So that the WhatsApp icon and the phone appear for the user to choose the way to contact.

{{#if phoneNumberData}}
{{#each phoneNumberData}}
<div>
{{#unless invalid}}
{{#unless erased}}
<a href="https://api.whatsapp.com/send?phone={{valueForLink}}" target="_blank" data-phone-number="{{valueForLink}}" data-action="dial">
{{/unless}}
{{/unless}}
<span {{#if lineThrough}}style="text-decoration: line-through"{{/if}}><img src="client/img/whatsapp.png" height="20" width="20"> </span>
{{#unless invalid}}
{{#unless erased}}
</a>

<a href="tel:{{valueForLink}}" data-phone-number="{{valueForLink}}" data-action="dial">
{{/unless}}
{{/unless}}
<span {{#if lineThrough}}style="text-decoration: line-through"{{/if}}><img src="client/img/telefono.png" height="20" width="20"> {{phoneNumber}}</span>
{{#unless invalid}}
{{#unless erased}}
</a>

{{/unless}}
{{/unless}}
{{#if type}}
<span class="text-muted small">({{translateOption type scope=../../scope field=../../name}})</span>
{{/if}}
</div>
{{/each}}
{{else}}
{{#if value}}
{{#if lineThrough}}<s>{{/if}}<a href="tel:{{valueForLink}}" data-phone-number="{{valueForLink}}" data-action="dial">{{value}}</a>{{#if ../lineThrough}}</s>{{/if}}
{{else}}
{{#if valueIsSet}}{{{translate 'None'}}}{{else}}...{{/if}}
{{/if}}
{{/if}} 

The icons are put in /client /img/


The code works correctly as we wanted.
My question is how would it be implemented correctly in the custom folders so as not to modify the original code in the event of possible updates?

[emillod]

I think you should consider add that in custom directory because you can loss your changes after update.

[Maximus]

Hi,
for this you need:
1. Place this code into /client/custom/res/templates/fields/phone/detail.tplfile:
2. Create the file /client/custom/src/views/fields/phone.js (original file is /client/src/views/fields/phone.js) and rewrite the template path in this line:

detailTemplate: 'fields/phone/detail',

3. Add the view parameter for the 'phoneNumber' field in a /custom/Espo/Custom/Resources/metadata/entityDefs/Your-entity.json file like this:

{
    "fields": {
        "phoneNumber": {
            "view":"custom:/views/fields/phone"
        }
    }
}

4. Administration -> Clear Cache
5. Refresh a web page.

[fmatias]

Thank you, emillod and Maximus
I have carried out the instructions they have given me, but I am doing something wrong because the original template continues to appear.

1,. Place code in /client/custom/res/templates/fields/phone/detail.tpl ->OK
2.- Create file /client/custom/src/views/fields/phone.js with original code. -> OK

detailTemplate: 'fields/phone/detail',

This line of code was already in the original right on line 36.
Should I leave it like that or do I have to put another address?
3.- I have added the parameter 'phoneNumber' in the file /custom/Espo/Custom/Resources/metadata/entityDefs/Account.json together with other fields already configured previously.

{
    "fields": {
        "phoneNumber": {
            "view":"custom:/views/fields/phone"
        },
        "tipoDocumento": {
            "type": "enum",
            "options": [
                "DNI",
                "CIF",
                "Passaporte",
                "NIE",
                "Otro"
            ],
            "style": {
                "DNI": null,
                "CIF": null,
                "Passaporte": null,
                "NIE": null,
                "Otro": null
            },
            "default": "DNI",
            "isCustom": true
        },
        "numDocumento": {
            "type": "varchar",
            "trim": true,
            "maxLength": 50,
            "options": [],
            "isCustom": true
        }
    }
}

I have also created the file /custom/Espo/Custom/Resources/metadata/entityDefs/Contact.json for the Contact entity.

{
    "fields": {
        "phoneNumber": {
            "view":"custom:/views/fields/phone"
        }
    }
}

4. Administration -> Clear Cache -> OK
5. Refresh a web page. -> OK

What am I failing at?.

[Maximus]

> What am I failing at?

In the /client/custom/src/views/fields/phone.js file you need:
1. Specify a path to a new /client/custom/res/templates/fields/phone/detail.tpl. I believe it should looks like this:

detailTemplate: 'custom:fields/phone/detail',

2. Also check whether the file location is changed in the /client/custom/src/views/fields/phone.js file. E.g.
FROM

Espo.define('[COLOR=#e74c3c]views/fields/phone[/COLOR]', 'views/fields/varchar', function (Dep) {

TO

Espo.define('[COLOR=#1abc9c]custom:views/fields/phone[/COLOR]', 'views/fields/varchar', function (Dep) {

Don't forget to Clear Cache after changes.

[fmatias]

I'm going crazy.
I think I have all your prompts done correctly but it still doesn't work.

/client/custom/res/templates/fields/phone/detail.tpl

{{#if phoneNumberData}}
    {{#each phoneNumberData}}
        <div>
            {{#unless invalid}}
            {{#unless erased}}
             <a href="https://api.whatsapp.com/send?phone={{valueForLink}}" target="_blank"  data-phone-number="{{valueForLink}}" data-action="dial">
            {{/unless}}
            {{/unless}}
            <span {{#if lineThrough}}style="text-decoration: line-through"{{/if}}><img src="client/img/whatsapp.png" height="20" width="20"> </span>
            {{#unless invalid}}
            {{#unless erased}}
            </a>

            <a href="tel:{{valueForLink}}" data-phone-number="{{valueForLink}}" data-action="dial">
            {{/unless}}
            {{/unless}}
            <span {{#if lineThrough}}style="text-decoration: line-through"{{/if}}><img src="client/img/telefono.png" height="20" width="20"> {{phoneNumber}}</span>
            {{#unless invalid}}
            {{#unless erased}}
            </a>

            {{/unless}}
            {{/unless}}
            {{#if type}}
            <span class="text-muted small">({{translateOption type scope=../../scope field=../../name}})</span>
            {{/if}}
        </div>
    {{/each}}
{{else}}
    {{#if value}}
    {{#if lineThrough}}<s>{{/if}}<a href="tel:{{valueForLink}}" data-phone-number="{{valueForLink}}" data-action="dial">{{value}}</a>{{#if ../lineThrough}}</s>{{/if}}
    {{else}}
        {{#if valueIsSet}}{{{translate 'None'}}}{{else}}...{{/if}}
    {{/if}}
{{/if}}

/client/custom/src/views/fields/phone.js

/************************************************************************
 * This file is part of EspoCRM.
 *
 * EspoCRM - Open Source CRM application.
 * Copyright (C) 2014-2020 Yuri Kuznetsov, Taras Machyshyn, Oleksiy Avramenko
 * Website: https://www.espocrm.com
 *
 * EspoCRM is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * EspoCRM is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with EspoCRM. If not, see http://www.gnu.org/licenses/.
 *
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU General Public License version 3.
 *
 * In accordance with Section 7(b) of the GNU General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
 ************************************************************************/
Espo.define('custom:views/fields/phone', 'views/fields/varchar', function (Dep) {

    return Dep.extend({

        type: 'phone',

        editTemplate: 'fields/phone/edit',

        detailTemplate: 'custom:fields/phone/detail',

        listTemplate: 'fields/phone/list',

        validations: ['required', 'phoneData'],

        validateRequired: function () {
            if (this.isRequired()) {
                if (!this.model.get(this.name) || !this.model.get(this.name) === '') {
                    var msg = this.translate('fieldIsRequired', 'messages').replace('{field}', this.getLabelText());
                    this.showValidationMessage(msg, 'div.phone-number-block:nth-child(1) input');
                    return true;
                }
            }
        },

        validatePhoneData: function () {
            var data = this.model.get(this.dataFieldName);
            if (!data || !data.length) return;

            var numberList = [];

            var notValid = false;
            data.forEach(function (row, i) {
                var number = row.phoneNumber;
                var numberClean = String(number).replace(/[\s\+]/g, '');

                if (~numberList.indexOf(numberClean)) {
                    var msg = this.translate('fieldValueDuplicate', 'messages').replace('{field}', this.getLabelText());
                    this.showValidationMessage(msg, 'div.phone-number-block:nth-child(' + (i + 1).toString() + ') input');
                    notValid = true;
                    return;
                }
                numberList.push(numberClean);
            }, this);
            if (notValid) {
                return true;
            }
        },

        data: function () {
            var phoneNumberData;
            if (this.mode == 'edit') {
                phoneNumberData = Espo.Utils.cloneDeep(this.model.get(this.dataFieldName));

                if (this.model.isNew() || !this.model.get(this.name)) {
                    if (!phoneNumberData || !phoneNumberData.length) {
                        var optOut = false;
                        if (this.model.isNew()) {
                            optOut = this.phoneNumberOptedOutByDefault && this.model.name !== 'User';
                        } else {
                            optOut = this.model.get(this.isOptedOutFieldName)
                        }
                        phoneNumberData = [{
                            phoneNumber: this.model.get(this.name) || '',
                            primary: true,
                            type: this.defaultType,
                            optOut: optOut,
                            invalid: false
                        }];
                    }
                }
            } else {
                phoneNumberData = this.model.get(this.dataFieldName) || false;
            }

 // The code that follows is the same as the original so I don't include it.

As I am going to use the "phoneNumber" field in two entities, Contact and Account, I have modified the following files:

/custom/Espo/Custom/Resources/metadata/entityDefs/Contact.json

{
    "fields": {
        "phoneNumber": {
            "view":"custom:/views/fields/phone"
        }
    }
}

/custom/Espo/Custom/Resources/metadata/entityDefs/Account.json

{
    "fields": {
		 "phoneNumber": {
            "view":"custom:/views/fields/phone"
        },
        "tipoDocumento": {
            "type": "enum",
            "options": [
                "DNI",
                "CIF",
                "Passaporte",
                "NIE",
                "Otro"
            ],
            "style": {
                "DNI": null,
                "CIF": null,
                "Passaporte": null,
                "NIE": null,
                "Otro": null
            },
            "default": "DNI",
            "isCustom": true
        },
        "numDocumento": {
            "type": "varchar",
            "trim": true,
            "maxLength": 50,
            "options": [],
            "isCustom": true
        }
    }
}

Finally cache cleaning.

It does not work. it also does not list the records already created.

I'm very sorry to ask again, possibly the solution is simple, but I can't find it.

Francisco.

[telecastg]

It does not work. it also does not list the records already created.

Are there any errors showing in the console ?

Try changing at /custom/Espo/Custom/Resources/metadata/entityDefs/Contact.json and at /custom/Espo/Custom/Resources/metadata/entityDefs/Account.json the phoneNumber field specification to include everything that is originally specified for the field:

"phoneNumber": {
    "type": "phone",
    "typeList": ["Mobile", "Office", "Home", "Fax", "Other"],
    "defaultType": "Mobile",
    "isPersonalData": true,
    "view": "custom:views/fields/phone"
},

Clear cache and rebuild.

If that doesn't help, try extending the custom view from the original phone field view instead of copying and pasting the code. There could be some character missing or extra character and it will take you hours to decipher

/client/custom/src/views/fields/phone.js

Espo.define('custom:views/fields/phone', 'views/fields/phone', function (Dep) {

    return Dep.extend({

        detailTemplate: 'custom:fields/phone/detail'

    });
});

Clear cache and rebuild.

If that doesn't help then try the following code debugging steps:

1) Make sure that the template is working fine:
Replace detailTemplate: 'custom:fields/phone/detail' with detailTemplate: 'fields/phone/detail' in /client/custom/src/views/fields/phone.js
Clear cache and rebuild
If the phone is displayed as originally intended in Espo, then the custom template has an error.

2) Make sure that the custom field view is being invoked:
Insert this code into /client/custom/src/views/fields/phone.js

    init: function () {
        console.log("custom:views/fields/phone init() invoked" );
        // invoke the prototype function
        Dep.prototype.init.call(this);
    },

Clear cache and rebuild
Check the console log, if the message shows then the correct view file is being invoked in the entityDefs metadata file


Hope it helps

[fmatias]

Thank you so much for everything.

[Earwilson]

Hi, I have modified the template
/client/res/templates/fields/phone/detail.tpl

So that the WhatsApp gb icon and the phone appear for the user to choose the way to contact.

The code works correctly as we wanted.
My question is how would it be implemented correctly in the custom folders so as not to modify the original code in the event of possible updates?

I think you should add the code to the custom folder without modifying it. Maybe this will make it possible for you to do what you want.

[enrico 1967]

Hi someone can recommend me an extension for whatsapp messages in the espocrm system

[telecastg]

Hello,

As far as I know, there currently are no extensions to connect Espo to WhatsApp, however Twilio offers a connection to WhatsApp and the official VoIp Integration extension allows you to connect to Twilio so that might be a way to do it.

I don't personally use the extension but here's a link with information about it. https://www.espocrm.com/extensions/voip-integration/

[AustinDeclan]

Hi, I have modified the template
/client/res/templates/fields/phone/detail.tpl

So that the WhatsApp icon and the phone appear for the user to choose the way to contact.

My question is about Timeshare Compliance how would it be implemented correctly in the custom folders so as not to modify the original code in the event of possible updates?

In your system, find the themes or templates directory where the original theme is located. It might be something like /client/themes/.