Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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
    Click image for larger version  Name:	Record List View with labels.png Views:	0 Size:	35.6 KB ID:	61110

    Record Detail Display
    Click image for larger version  Name:	Record Detail View with labels.png Views:	0 Size:	57.7 KB ID:	61112
    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:
    Code:
    {
        "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.

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

    Cheers

    Attached Files
    Last edited by telecastg; 08-01-2020, 04:06 AM.

  • #2
    Yes this is awesome!

    Comment


    • #3
      How to customize the Side Menu / Navbar

      Side Menu (or Top Menu for some themes)
      Click image for larger version  Name:	Navbar View with label.png Views:	0 Size:	39.3 KB ID:	61130

      1) Create a custom navbar view class:
      client/custom/scr/views/navbar.js
      Code:
      define('custom:views/site/navbar', 'views/site/navbar', function (Dep) {
      
          return Dep.extend({
      
              // write your custom code here, override functions, specify custom templates, etc
      
          });
      });
      2) Create a custom metadata file to let Espo know that it needs to use the custom view instead of the system default view
      custom/Espo/Custom/Resources/metadata/clientDefs/App.json
      Code:
      {
          "navbarView": "custom:views/site/navbar"
      }
      3) Clear cache and rebuild.

      Comment


      • #4
        telecastg, thank you so much for taking the time to put this together, another useful post!

        Comment


        • #5
          Yes thanks again

          Comment


          • #6
            Great stuff. Hope everyone can do their own GUI using the given guides. Appreciate if others also can post their findings to the forum.

            Comment

            Working...
            X