Removing file attachment filename (only using icons?)

[mudokai]

Hi - it appears that using the full filename in list_view is triggering text wrapping and double line usage that I'd like to fix; is there a way you can use code to remove the filename from the list view only, and just use an icon for each file that's attached for that column? Would use tooltip hover for the filename to show up on list if needed. Thanks

[shalmaxb]

From where do you pull the attachments? Is it from documents or a custom entity?

[mudokai]

From where do you pull the attachments? Is it from documents or a custom entity?

A custom entity as I have a File Attachment field that I created for each. Would be interested to know if it can be done either way, though. Thanks

[shalmaxb]

I did something like that.
Besides the file type field, set an enum field with the name "filetype"with some options (e.g. image, doc, pdf etc.).
Set a custom image field with the name "icon".
I saved the icons in documents and built a relationship between my custom entity and documents, so that I could use the icons saved in documents.
Create a formula, which depending on the options of the enum fields, gets the correct icon by id from the documents. It would look like this, more or less:

ifThen(
filetype == 'PDF', //the option of the enum
icon = '12345678' //id of the respective icon
); 

You could even create another formula, to set the filetype option by the file extension, so that on upload the option is set automatically and after that the icon is set automatically. If you need help with that formula, ask. With that formula you could even hide the enum field.

In the list view now you can insert the column icon.

If you need I can provide you with icon sets for filetypes.

[mudokai]

Please do provide the icon sets so I can see if possible. Would be great. I'm trying to add custom icons to the rows myself to show # Calls, etc. but that's a separate topic

[shalmaxb]

Icons filetypes

[mudokai]

All help is appreciated - I could try to figure this out, but any guidance on simply work flow to swap what I'm currently showing - which is, I have a custom field on my Accounts page associated with file_attachment - this is shown in list which obviously pulls the full filename when uploaded. I'd like to just show the icon x quantity of however many files are uploaded in that space - if I have 2/3 PDFs, instead of showing full filename, I just want the icons to show so the user can click into the icon and it opens the file rather than as they do now which is the filename. Any guidance on that?

[mudokai]

You suggest the icon solution although I think it doesn't solve the request - my request was tied to having to be able to click the icon to show the file attachment, I just want to remove the whole filename from my list view - it distorts our columns when the filename is too long, hence the request for the icon. Any solution you could recommend?

[shalmaxb]

so you would like to have the Icon in the list view, clickable to open the document. I will see, if this could be achieved. Does it have to be an Icon with the specific document type, or would an Icon representing a document in general be sufficient?
If a general icon would be enough, it might be possible by the extension Link Button, as there you can have icons in a button. I use it to be able to print a pdf document from the list view. See attachment.



Link to the extension: https://forum.espocrm.com/forum/exte...on-link-button

[rabii]

you can create a custom view for your field to display on icon on the list mode - below some steps to do this

1- create a custom view for your field under client/custom/src/views/merchant/fields/bank-statement.js

define('custom:views/merchant/fields/bank-statement', ['views/fields/file'], (FileFieldView) => {

    return class extends FileFieldView {

        getValueForDisplay() {

            if (this.isListMode()) {
                let name = this.model.get(this.nameName);
                let id = this.model.get(this.idName);

                if (!id) {
                    return '';
                }

                return $('<a>')
                    .attr('title', name)
                    .attr('href', this.getBasePath() + '?entryPoint=download&id=' + id)
                    .attr('target', '_BLANK')
                    .append(
                        $('<span>').addClass('fas fa-file-pdf small') // change to any icon you like
                    )
                    .get(0).outerHTML;
            }

            return super.getValueForDisplay();
        }
    }
}); 

2- Assign the custom view to your field under entityDefs/Merchant as below

"bankStatement": {
    "view": "custom:views/merchant/fields/bank-statement"
}​ 

3 - Clear cache and rebuild the system then visit the list and you should see only (pdf) icon which is clickable to download the file.

I hope this help

[mudokai]

Thank you - I will try this; is this able to work with a field that allows multiple attachments? So, it will show multiple icons to click for the same link the current filename works?

[rabii]

Hey mudokai

Nope the code i shared above is meant for single file - use the code below for Attachment Multiple field type

define('custom:views/merchant/fields/bank-statement', ['views/fields/attachment-multiple'],
function (AttachmentMultipleFieldView) {

    return class extends AttachmentMultipleFieldView {

        getValueForDisplay() {

            if (this.isListMode()) {
                const ids = this.model.get(this.idsName) || [];
                if (!ids.length) return '';

                const nameHash = this.nameHash || {};
                const $container = $('<span>');

                ids.forEach(id => {
                    const url = this.getDownloadUrl(id);
                    const name = nameHash[id] || '';

                    const $icon = $('<a>')
                        .attr('href', url)
                        .attr('target', '_blank')
                        .attr('title', name)
                        .append(
                            $('<span>').addClass('fas fa-file-pdf small')
                        );

                    $container.append($icon);
                });

                return $container.get(0).outerHTML;
            }

            return super.getValueForDisplay();
        }
    }
}); 

Remember to reference the correct field name (i just used bank-statement for example) it needs to be correct other wise this won't work.

Cheers

[mudokai]

Thank you!

[mudokai]

Hey mudokai

Nope the code i shared above is meant for single file - use the code below for Attachment Multiple field type

define('custom:views/merchant/fields/bank-statement', ['views/fields/attachment-multiple'],
function (AttachmentMultipleFieldView) {

return class extends AttachmentMultipleFieldView {

getValueForDisplay() {

if (this.isListMode()) {
const ids = this.model.get(this.idsName) || [];
if (!ids.length) return '';

const nameHash = this.nameHash || {};
const $container = $('');

ids.forEach(id => {
const url = this.getDownloadUrl(id);
const name = nameHash[id] || '';

const $icon = $('')
.attr('href', url)
.attr('target', '_blank')
.attr('title', name)
.append(
$('').addClass('fas fa-file-pdf small')
);

$container.append($icon);
});

return $container.get(0).outerHTML;
}

return super.getValueForDisplay();
}
}
}); 

Remember to reference the correct field name (i just used bank-statement for example) it needs to be correct other wise this won't work.

Cheers

This worked on my field records view, but it messed with entity detail view and now doesn't show any attachments despite being there -





Any help to fix this so that it shows correctly on detail view?

[rabii]

I have test the code and it works fine on my end - i am sure that this has nothing to do with the code - maybe the files have been removed - also try to add some margin between the files icons

define('custom:views/merchant/fields/bank-statement', ['views/fields/attachment-multiple'],
    function (AttachmentMultipleFieldView) {
  
        return class extends AttachmentMultipleFieldView {
  
            getValueForDisplay() {
  
                if (this.isListMode()) {
                    const ids = this.model.get(this.idsName) || [];
                    if (!ids.length) return '';
  
                    const nameHash = this.nameHash || {};
                    const $container = $('<span>');
  
                    ids.forEach(id => {
                        const url = this.getDownloadUrl(id);
                        const name = nameHash[id] || '';
  
                        const $icon = $('<a>')
                            .attr('href', url)
                            .attr('target', '_blank')
                            .attr('title', name)
                            .append(
                                $('<span>').addClass('fas fa-file-pdf small')
                            ).css({
                                marginRight: '6px',
                                display: 'inline-block'
                            });
  
                        $container.append($icon);
                    });
  
                    return $container.get(0).outerHTML;
                }
  
                return super.getValueForDisplay();
            }
        }
}); 

[mudokai]

But how does it appear in detail view for you? Assuming the field you're showing matches the list and detail view.

[rabii]

as original field behavior - files with links.