Adding an Icon in the Accounts List View

👨‍💻 Development Help
1

I would like to add an icon that appears next to each phone number in the accounts view, specifically in the view where the entire customer list appears. The problem is that I don’t know how to add an icon and have it appear next to each of the phone numbers. I am using SuiteCRM 8 and appreciate any help.

view list:

image
image752Ă—132 15.8 KB

2

For v7 views, that would be a matter of changing the tpls of SugarFields.

For v8, I am not so sure… maybe have a look in
core/app/core/src/lib/fields/phone

… or similar

1 Like
3

I investigated the file you mentioned, pgr, and I believe it has to do with the phone icon at the end of each record, which is related to the calls module. My idea is to try to place the WhatsApp icon next to each phone number so that when clicked, it opens a new window with WhatsApp Web in the chat of the phone number associated with the WhatsApp icon of the selected record.

4

@pgr I was looking at the files you mentioned in the core folder, but no modification affects the phone field. We decided to create a new field in Accounts called whatsapp_c. We modified the file public/legacy/custom/modules/Accounts/metadata/listviewdefs.php in various ways to incorporate the icon, adding a “CustomCode” without success. I have the SuiteCRM folder downloaded locally to search for specific code to identify the file that “shapes” the HTML code, and I found the file: public/legacy/include/Smarty/plugins/function.sugar_phone.php, which contains the code:

if (isset($params['value'])) {
    return '<a href="tel:'.$params['value'].'">'.$params['value'].'</a>';
}
return $params['value'];

This is what displays the phone number with a link. I tried to insert my code here to display the icon, but also without success. The code I am trying to implement is:

// Check if the field is whatsapp_c
if (isset($params['name']) && $params['name'] == 'whatsapp_c') {
    // Render as WhatsApp link with icon
    if (!empty($params['value'])) {
        return '<a href= "wa.me/'.$params['value'].'" target="_blank">
                    <img src="custom/themes/default/images/wpp.svg" style="width:16px;height:16px;">
                </a> ' . $params['value'];
    }
    return $params['value'];
} else {
    // Render as phone link
    if (!empty($params['value'])) {
        return '<a href="tel:'.$params['value'].'">'.$params['value'].'</a>';
    }
    return $params['value'];
}

I also tried to implement this code directly in listviewdefs.php in the whatsapp_c field, but it didn’t work either.

I am attaching an illustrative image of how it currently looks and what we aim to achieve. The second image was created by modifying the HTML code directly from the web inspector.

Any help would be greatly appreciated.

Original Image:

image
image757Ă—97 10.3 KB

wpp image:

image
image740Ă—172 12.3 KB

5

Sorry I don’t have time for a detailed response, but the basic insight I have for you is this: there are two very separate worlds here and you mustn’t confuse them!

Either your view is getting rendered from a legacy view and then those custom code customizations might work, or it’s getting rendered from Angular, from the new V8 views in which case you really should edit the files that are not under legacy folder… but the you must rebuild the front end in order to see any effects.

1 Like
6

Thank you, PGR, for responding to me. I will check that V8 folder. I noticed it is located at: public/legacy/api/v8. Let’s see what I find there and how I can use it for this.

7

No, not that one. That is for one of the two v7 API. Confusingly.

The v8 folder is the top folder on any v8 installation.

8

Oh, I see. I think I understand now. The V8 thing is a bit confusing. Actually, the path I mentioned before has nothing to do with it. I understand that outside of the legacy folder, there is no V8 folder in my case. But I suppose the new Angular views for this version should be modified from the core folder?

9

There is a section in the documentation that is about developing front-end code for v8, try reading that first.

10