Changes required is List View

Hi team,

Recently managed to upgrade to v12 production to v13 and it’s working fine so far. The new UI is great and gives an overall fresh look to the desk. Great work!

I’m trying to implement the following changes to the ListView by using a Custom Script (List):

1. Any field that is set to type “Select” is shown as a chip/tag in the list view
Eg: Check the column Position Applying for / Educational Qualifications and see how “Human Resources” and “Graphics Designer” are shown as tags / chips in the list view.
How can we show these fields as normal text (like other columns)?

2. Any field that is set to type “Int” gets right aligned automatically in the list view
Eg: Check the column “Mobile Number” and see how it’s right aligned.
How can we left align this column like other text columns?

3. Change the default column titles
Eg: “Mobile Number” can be shown as just “Mobile”
I understand this can be done by changing the label from DocType customization but that will also affect the (web) form view.
How can the title / label be changed only in the list view?

4. Remove the right most 3 columns showing " - ", “timestamp” and “comments icon & number”

5. Any field that is set to type “attach” gets a non-clickable link in the list view
Eg: Check the column “Upload Latest Resume” and see how it’s showing the relative file path but it’s not clickable. If this can be made clickable, it will save an additional step of opening the record to see the attached file.
I understand this can be achieved using formatters but unable to get it to work.
May be this can also be done by using a button in the list view to open the attachment from a defined field_name.

I’ve tried referring to various posts on this forum and also checked out the List View JS API documentation but not able to achieve the above 5 customizations.

Thank you.

Hi guys,

I’ve managed to achieve the following using custom script for List View;

1. Any field that is set to type “Select” is shown as a chip/tag in the list view

    formatters: {
    position_applying_for(val) {
        return val.toString();
    }

Not sure if this is the most optimal way, but it returns the select value as string instead as a status indicator.

5. Any field that is set to type “attach” gets a non-clickable link in the list view

formatters: {
upload_resume(val) {
            return val.link(val);
}

This will convert and return the field value as a link but it needs to be opened in a new tab as it’s overriden by the default document open functionality of the listview.

Trying to further optimize this (hiding the actual file path) using a separate button assigned to each row.

Okay I’ve managed to also achieve the custom button functionality to open up the attachment field for respective document row.

Here’s the code for custom script

button: {
    show(doc) {
        return doc.upload_resume;
    },
    get_label() {
        return 'View Resume';
    },
    get_description(doc) {
        return __('View Resume')
    },
    action(doc) {
        window.open(doc.upload_resume, '_blank').focus();
    }
}

This will save the precious column space on list view and also shield the file path to be directly exposed to the DocType user with limited permissions.

3 Likes

Can you share the end result? A screen shot would be great.

Yes sure. Here’s how it looks now :point_down:

Working further on getting externally loaded custom scripts to work in desk using hooks.py

3 Likes

Brilliant. We should create a video tutorial about it.

how u made this blue color design ?

The colors and layout was customized for a specific project. You can modify the design by using custom CSS and JS and then calling it via hooks.py using;

app_include_css = “/path/to/custom_css_file.css”

You wil have to run bench build once to reflect the changes.

great buddy thanks for the info… can u share the css file pls, that will be big help…
regards
rohit