Announcement
Collapse
No announcement yet.
Reference: Espo GUI - script map guide, where can I change something ?
Collapse
X
-
How is a record list display generated when I click on its navbar (side menu) option ?
When a navbar menu option is clicked, Espo checks the core "application/Espo/Resources/routes.json" script values:
https://github.com/espocrm/espocrm/b...es/routes.json (or potential custom values in custom routes.json scripts, if specified) and invokes the front-end controller and function requested.
The front-end controller is by default client/src/controllers/record.js or can overridden in the entity's clientDefs metadata file, and will follow the general program flow below:Last edited by telecastg; 03-29-2021, 07:10 PM.
- Likes 3
Leave a comment:
-
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.
-
Any idea where which file to update these Label color/type? I want to be more colorful.
- Likes 1
Leave a comment:
-
How is the the "Home" Dashboard created ?
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.jsScript Function Reference client/src/controllers/dashboard.js index() https://github.com/espocrm/espocrm/b...shboard.js#L33 client/src/views/dashboard.js setup() https://github.com/espocrm/espocrm/b...hboard.js#L177 setupCurrentTabLayout() https://github.com/espocrm/espocrm/b...hboard.js#L120 data() https://github.com/espocrm/espocrm/b...hboard.js#L106 afterRender() https://github.com/espocrm/espocrm/b...hboard.js#L213 initGridstack() https://github.com/espocrm/espocrm/b...hboard.js#L287 prepareGridstackItem() https://github.com/espocrm/espocrm/b...hboard.js#L378 createDashletView() https://github.com/espocrm/espocrm/b...hboard.js#L492 client/src/views/dashlet.js setup() https://github.com/espocrm/espocrm/b...dashlet.js#L74 getTitle() https://github.com/espocrm/espocrm/b...ashlet.js#L145 Last edited by telecastg; 10-23-2020, 12:31 AM.
- Likes 2
Leave a comment:
-
How is a subscription created when I click the "Follow" button at the top right corner of a record detail display ?
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)); },
- Likes 2
Leave a comment:
-
How is a Kanban list display generated ?
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:Last edited by telecastg; 11-02-2020, 03:49 AM.
- Likes 5
Leave a comment:
-
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 ?
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)",
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 thisCode:"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 }, }); });
{
"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 }); });
{
"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
- Likes 3
Leave a comment:
-
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 down1 PhotoLast edited by esforim; 08-10-2020, 07:26 AM.
- Likes 1
Leave a comment:
-
How to customize the Home view / landing page after login
From:
To:
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) }
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" }; } }); });
client/custom/res/templates/test.tpl
Code:<div class="home-content"><h1>{{{testMessage}}}</h1></div>
Last edited by telecastg; 08-11-2020, 07:21 AM.
- Likes 3
Leave a comment:
-
Great stuff. Hope everyone can do their own GUI using the given guides. Appreciate if others also can post their findings to the forum.
- Likes 1
Leave a comment:
-
telecastg, thank you so much for taking the time to put this together, another useful post!
- Likes 2
Leave a comment:
-
How to customize the Side Menu / Navbar
Side Menu (or Top Menu for some themes)
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 }); });
custom/Espo/Custom/Resources/metadata/clientDefs/App.json
Code:{ "navbarView": "custom:views/site/navbar" }
- Likes 5
Leave a comment:
Leave a comment: