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

  • telecastg
    commented on 's reply
    The styles enumerated are usually defined by the Bootstrap theme.

    You could create custom css classes with a different color scheme and apply those custom classes instead of the pre-defined above to the enum options.

    This is the code that manages the enum field option styles https://github.com/espocrm/espocrm/b...h-style.js#L38

    However, making any changes to this script would not be upgrade safe. I haven't customized anything in the Admin module so I can't tell if its possible to use custom scripts to substitute admin namespace scripts.
    Last edited by telecastg; 08-14-2020, 06:06 AM.

  • espcrm
    replied
    Any idea where which file to update these Label color/type? I want to be more colorful.

    Click image for larger version

Name:	Color Label.png
Views:	2507
Size:	12.2 KB
ID:	61585

    Leave a comment:


  • telecastg
    replied
    How is the the "Home" Dashboard created ?
    Click image for larger version  Name:	Dashboard.PNG Views:	0 Size:	70.5 KB ID:	61534
    Clicking on the "Home" menu option triggers the following general program flow:

    The controller class dashboard.js is invoked and this class invokes then the view class dashboard.js

    The view gets a list of dashlets (by name) and how are they configured (layout) according to the user preferences, if allowed in the system settings, or as specified by the administrator.

    For each dashlet contained in the list above, the dashboard view class gets the dashlet specifications from the dashlet metadata file (for example: custom/Espo/Custom/Resources/metadata/dashlets/RentalProspects.json) and then creates a view for each dashlet panel using the client/src/views/dashlet.js class.

    The actual content inside the dashlet panel is rendered by the view class specified in the dashlet metadata. For example for a list of entities, the default view class is: client/src/views/dashlets/abstract/record-list.js
    Last edited by telecastg; 10-23-2020, 12:31 AM.

    Leave a comment:


  • telecastg
    replied
    How is a subscription created when I click the "Follow" button at the top right corner of a record detail display ?

    Click image for larger version

Name:	Follow button.png
Views:	2741
Size:	35.8 KB
ID:	61515

    Clicking the button above triggers the function actionFollow() at the script client/src/views/detail.js which makes an Ajax call to create a "Subscription" record that links the User with the Entity.
    Code:
    actionFollow: function () {
        this.disableMenuItem('follow');
    
        Espo.Ajax.putRequest(this.model.name + '/' + this.model.id + '/subscription')
        .then(function () {
            this.removeMenuItem('follow', true);
            this.model.set('isFollowed', true);
        }.bind(this))
        .fail(function () {
            this.enableMenuItem('follow');
        }.bind(this));
    },

    Leave a comment:


  • telecastg
    replied
    How is a Kanban list display generated ?
    Click image for larger version  Name:	kanban list view.png Views:	5 Size:	30.9 KB ID:	61453
    Clicking on the "Kanban" icon invokes the function setViewMode() with "kanban" as parameter at the script client/src/views/record/search.js which triggers the general program flow below:
    Script Function Reference
    client/src/views/record/search.js setViewMode() https://github.com/espocrm/espocrm/b...search.js#L195
    client/src/views/list.js switchViewMode('kanban') https://github.com/espocrm/espocrm/b...s/list.js#L210
    setViewMode("kanban") https://github.com/espocrm/espocrm/b...s/list.js#L219
    setViewModeKanban() https://github.com/espocrm/espocrm/b...s/list.js#L241
    application/Espo/Resources/routes.json https://github.com/espocrm/espocrm/b...utes.json#L127
    application/Espo/Core/Controllers/Record.php getActionListKanban() https://github.com/espocrm/espocrm/b...ecord.php#L156
    application/Espo/Services/Record.php getListKanban() https://github.com/espocrm/espocrm/b...cord.php#L1226
    client/src/views/list.js loadlist() https://github.com/espocrm/espocrm/b...s/list.js#L299
    createListRecordView() https://github.com/espocrm/espocrm/b...s/list.js#L316
    client/src/views/record/kanban.js init() https://github.com/espocrm/espocrm/b...kanban.js#L119
    setup() https://github.com/espocrm/espocrm/b...kanban.js#L142
    buildRows() https://github.com/espocrm/espocrm/b...kanban.js#L404
    getListLayout() https://github.com/espocrm/espocrm/b...kanban.js#L381
    getSelectAttributeList() https://github.com/espocrm/espocrm/b...kanban.js#L381
    client/src/views/record/list.js getSelectAttributeList() https://github.com/espocrm/espocrm/b.../list.js#L1202
    fetchAttributeListFromLayout() https://github.com/espocrm/espocrm/b.../list.js#L1222
    client/src/collection.js fetch() https://github.com/espocrm/espocrm/b...ection.js#L140
    client/src/views/record/kanban.js data() https://github.com/espocrm/espocrm/b...kanban.js#L102
    afterRender() https://github.com/espocrm/espocrm/b...kanban.js#L225
    initSortable() https://github.com/espocrm/espocrm/b...kanban.js#L307
    initStikableHeader() https://github.com/espocrm/espocrm/b...kanban.js#L245
    Last edited by telecastg; 11-02-2020, 03:49 AM.

    Leave a comment:


  • telecastg
    replied
    How are new records created from a list display / what happens when I click the "Create" button at the top right corner in a list of records display ?
    Click image for larger version  Name:	Create Record from List Display.png Views:	0 Size:	19.6 KB ID:	61399
    1) As mentioned before, unless specified otherwise in the scope's (entity type) clientDefs metadata file, this area of the GUI is controlled by the client/src/views/list.js script.

    2) Clicking the "Create" button at client/src/views/list.js triggers the function "actionCreate" in that script.
    https://github.com/espocrm/espocrm/b...s/list.js#L415

    3) The function "actionCreate" at client/src/views/list.js then, triggers a router call to invoke "actionCreate" at client/src/controllers/record.js (same function name but in different scripts) https://github.com/espocrm/espocrm/b...record.js#L209, which is the front-end controller class for the scope, unless a different controller is specified at the scope's clientDefs like this:
    Code:
     "controller": "(write here the name of the custom controller)",
    4) The function "actionCreate" at client/src/controllers/record.js will in turn invoke the function "create" at the same script which will actually create a new model instance and will render a form (edit view) to enter and save the new entity's values.

    5) The default edit view is client/src/views/record/edit.js https://github.com/espocrm/espocrm/b...record/edit.js, unless specified otherwise at the scope's clientDefs like this
    Code:
     "recordViews": {
        "edit": "(name of custom view class)",
    },

    How can I modify the record create process for an entity without modifying the core code to make my changes "upgrade safe" ?

    1) Create a custom front end controller extended from for your scope (entity) and modify the "actionCreate" function to reflect your changes. For example, create a custom front end controller for a CollectionIssue entity:
    Code:
    Espo.define('custom:controllers/collection-issue', 'controllers/record', function (Dep) {
    
        return Dep.extend({
    
            // customized create function
            create: function (options) {
                // copy the code from the prototype script (client/src/controllers/record.js) and make changes as required
            },
        });
    });
    2) Modify the entity's clientDefs metadata file (in this example custom/Espo/Custom/Resources/metadata/clientDefs/CollectionIssue.json)
    {
    "controller": "
    custom:controllers/collection-issue",
    }

    3) If you want to modify something in the actual form where the new entity values are entered, create a custom edit view for the entity, extended from the original client/src/views/record/edit.js script
    Code:
    Espo.define('custom:views/collection-issue/record/edit', 'views/record/edit', function (Dep) {
    
        return Dep.extend({
    
            // make any changes here, for example specify a custom template, add buttons to the form, etc
    
        });
    });
    4) Let Espo know that a custom view needs to be called for editing the entity at the entity's clientDefs metadata file (in this example custom/Espo/Custom/Resources/metadata/clientDefs/CollectionIssue.json)
    {
    "recordViews": {
    "edit": "
    custom:views/collection-issue/record/edit"
    },
    }


    How to remove the Create button in list display ?
    Open the entity's clientDefs metadata file (in this case custom/Custom/Espo/Custom/Resources/clientDefs/CollectionIssue.json) and set the "createDisabled" flag to "true"
    Code:
    {
        "createDisabled" : true
    }
    Last edited by telecastg; 08-25-2021, 08:51 PM. Reason: Added instructions to remove the Create button

    Leave a comment:


  • telecastg
    commented on 's reply
    Yes, here's the bookmark for the function that generates the dropdown:

  • espcrm
    replied
    Any idea where this file is?

    Update: I believe it is this file: https://github.com/espocrm/espocrm/b...mail/detail.js


    tag: GUI_;email; drop down
    Last edited by espcrm; 08-10-2020, 07:26 AM.

    Leave a comment:


  • telecastg
    replied
    How to customize the Home view / landing page after login

    From:

    Click image for larger version  Name:	Home View.png Views:	16 Size:	38.1 KB ID:	61333
    To:
    Click image for larger version  Name:	Custom Home View.PNG Views:	14 Size:	35.0 KB ID:	61335
    The core script client/src/views/home.js allows us to call a custom view to render a custom home page as follows:

    1) Create a custom clientDefs metadata script that will tell Espo to call a custom script to render a custom home page instead of the default dashboard display
    custom/Espo/Custom/Resources/metadata/clientDefs/Home.json
    Code:
    {
        "iconClass": "fas fa-archway",  (you can change the icon next to the "Home" menu option here)
        "view": "custom:views/test" (specify the view that will render the custom display)  
    }
    2) Create a view script to render the custom display as "Home" page
    client/custom/src/views/test.js
    Code:
        define('custom:views/test', 'view', function (Dep) {
    
            return Dep.extend({
    
                template: 'custom:test',
    
                data: function () {
                    return {
                        testMessage: "Welcome to Espo"
                    };
                }
            });
        });
    3) Create a custom template for the view above
    client/custom/res/templates/test.tpl
    Code:
    <div class="home-content"><h1>{{{testMessage}}}</h1></div>
    4) Clear cache and rebuild.
    Attached Files
    Last edited by telecastg; 08-11-2020, 07:21 AM.

    Leave a comment:


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

    Leave a comment:


  • crmclients
    replied
    Yes thanks again

    Leave a comment:


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

    Leave a comment:


  • telecastg
    replied
    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.

    Leave a comment:


  • crmclients
    replied
    Yes this is awesome!

    Leave a comment:


  • 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.

    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

    Attached Files
    Last edited by telecastg; 02-12-2021, 11:39 PM. Reason: Added detail view information
Working...
X