How to customize the search.js?

[Ananya K]

I want to customize espocrm/client/src/views/record/search.js file.

Can anyone help me with how to do this?

Research:

1. We have espocrm/client/src/views/list.js file which will define the searchView as views/record/search.
2. Similarly, the recordView: 'views/record/list' is defined in theespocrm/client/src/views/list.js.
   1. I can define the custom: views/record/list in espocrm/custom/Espo/Custom/Resources/metadata/clientDefs/Lead.json.

Can I do something like this for the search.js file also ?
yuri

[esforim]

Not sure if telecastg post tutorial related to the search function but there is quite a few resources that may or may not help you. Check the end of this link where I add most of telecastg's guide thread.

https://github.com/o-data/EspoCRM-Learning-and-Design/wiki

[Ananya K]

https://devcrm.it/custom-filters

Actually, this gave me an idea of how to resolve my problem.
Thank u very much.

[telecastg]

Perhaps this post can help you understanding Espo program structure for future reference

https://forum.espocrm.com/forum/developer-help/61108-reference-espo-gui-script-map-guide-where-can-i-change-something#post61633

[Ananya K]

Hey,

I want to clean up the advanced filter values when we refresh the page. Otherwise, we need to clean up the text box value and then enter the next value.

So I want to add a button next to the Reset Button its a refresh which will clean up all the value in the advanced search field text box.

To do this I need to edit the search.js

Feature Request Pull Request: https://github.com/espocrm/espocrm/pull/1996

yuri

[telecastg]

Hi,

Here's how you can incorporate your custom search.js script for the Lead entity in a "upgrade safe" way while your pull request is approved:

Define your own search.js class in the custom namespace. for example:
client/custom/src/views/record/search.js

define('custom:views/record/search', 'views/record/search', function (Dep) {

    return Dep.extend({

WRITE HERE ALL YOUR CUSTOM SEARCH CODE

    });
});

Define a custom header list view class that will invoke the custom search instead of the core class, for example:
client/custom/src/views/header/list.js

define('custom:views/header/list', 'views/list', function (Dep) {

    return Dep.extend({

        searchView: 'custom:views/record/search'

    )};

});

Define a custom clientDefs metadata script to set the custom header list view as the "list view" for your target Entity ("Lead") class:
custom/Espo/Custom/Resources/metadata/clientDefs/Lead.json

{
    "views": {
        "list": "custom:views/header/list"
    }

}

Clear cache and rebuild.

Please post your custom implementation of search.js here when you are done, so other users will be able to benefit from your development too

[Ananya K]

Hey telecastg

This works cool. Thank you soo much for the help.

Here are my custom search.js and search.tpl files.

[telecastg]

Thanks for posting your solution, I'm sure that many other forum participants will benefit from your contribution.

[esforim]

Hi all, quick info for anyone following this thread. Ananya made a Pull Request for this I believe, too bad it is still Open though: https://github.com/espocrm/espocrm/pull/1996