Reference: Espo GUI - script map guide, where can I change something ?

[crmclients]

Yes this is awesome!

[telecastg]

The idea of this thread is to create a "road map/guide" to help developers find where GUI sections or elements are defined within Espo code so customization projects can be implemented without having to spend a lot of time "finding your way around" the code (like many of us have done) whenever possible.

This is by no means an "official" guide, it's more of compilations of some things that I have found, so it is quite possible that some might not be exactly accurate in which case I welcome any corrections and additions.

For starters, here is a basic map of what views control screen sections in both, the record list and detail display.

Record List Display


Record Detail Display

To customize any of these sections, you need to create a script extended from these default views and then modify the custom entity's clientDefs metadata file to specify the custom views that are to be used like this:

{
    "views": {
        "list": "views/list", (or your custom view name),
        "detail": "views/detail" (or your custom view name)
    },
    "recordViews": {
        "list": "views/record/list", (or your custom view name)
        "detail": "views/record/detail" (or your custom view name)
    }
}

If you don't specify a view file, Espo uses the default views.

For an example of how views other than default are used, see the Contact clientDefs metadata file
https://github.com/espocrm/espocrm/b...ontact.json#L4

I will post more "maps" as we work on our own development.

Cheers

Update: The top part of the screen, where the search box and notification icon are, is actually controlled by client/src/views/site/navbar.js, see below how that script can be customized "upgrade safe".

Update: To see a more detailed breakdown of the view classes involved in a "detail" display see this post: https://forum.espocrm.com/forum/deve...-s-detail-view