Navbar - add custom links

[wtconseil]

Hi there

I currently have some custom EntryPoints to have some custom dashboards...

i would like to add in the global navbar of EspoCRM, some links to these EntryPoints (<a target="_blank">My Custom EntryPoints</a>)
in vertical display mode, between the logo and the first menu items).

I have looked a little bit how i could handle that...

It seems to be closed to these files:
client/src/views/site/navbar.js
client/res/templates/site/navbar.tpl

but currently, nothing seems to be there to allow us to add this kind of custom links, in an easy way (i don't want to check role / ACL / link visibility here.. everything will be handled in my custom Entrypoints).

Another use case could be to add link to others external tools to have quick link in the navbar etc...

Would you plan to extend the navbar feature to allow administrator to set some links ?
I can try to create a Pull request for that but i'd like to know your feeling about that before

Thanks

[tanya]

Hello
No plan and don't think, it is necessary for all crm customers

[wtconseil]

Ok thanks for your feedback.

Can i create a custom navbar.js to override the data bloc?

data: function () {
            return {
                tabDefsList: this.tabDefsList,
                title: this.options.title,
                menu: this.getMenuDefs(),
                quickCreateList: this.quickCreateList,
                enableQuickCreate: this.quickCreateList.length > 0,
                userName: this.getUser().get('name'),
                userId: this.getUser().id,
                logoSrc: this.getLogoSrc()
            };
        },

to pass a new variable with my array/hash of links ?

[tanya]

don't think, you can do it upgrade safe. In any case you need to modify one of core view.

[wtconseil]

Thanks

I created the following files in

client/custom/src/views/site/header.js
client/custom/src/views/site/navbar.js

In client/custom/src/views/site/header.js : i set

navbarView: 'custom:views/site/navbar',

Then ... i had to edit client/src/views/site/master.js to set

         views: {
             header: {
                 id: 'header',
-                view: 'views/site/header'
+                view: 'custom:views/site/header'

I think i could also override client/src/views/site/master.js with a custom JS file...
but then, i need again to go over ...

client/src/app.js to update :
145: masterView: 'views/site/master',

Finally, i don't see another way that editing core files for now, following this bottom-up JS files.
The best way would be to extend the current JS file even if it's not needed for all customers ?

Right now, i feel so sad to have to handle these monky patches on my own :-)

[telecastg]

This is an old posting, but for anybody looking for this capability, here's how I was able to a add custom menu "tab" and trigger custom actions without having to modify the system files (upgrade safe).

Assume that the custom tab's name is "MyTab":

1) Created a custom "scope" metadata file custom/Espo/Custom/Resources/metadata/scopes/MyTab.json with the following setttings:

{
    "entity": false,
    "tab": true,
    "disabled": false,
    "module": "Custom",
    "isCustom": true    
}

2) Added label definitions in the corresponding language file(s), in my case custom/Espo/Resources/metadata/i18n/en_US/Global.json

{
    "scopeNames": {
        "myTab": "My Tab",
...
    },
    "scopeNamesPlural": {
        "myTab": "My Tabs",
...
   }
}

3) Created custom clientDefs metadata file custom/Espo/Custom/Resources/metadata/clientDefs/MyTab.json with the following settings:

{
    "controller": "custom:controllers/my-tab",
    "color": "#00ff99",
    "iconClass": "fas fa-file-contract"    
}

4) Created new front-end controller client/custom/src/controllers/my-tab.js

This controller will receive the click action from the tab item and process is accordingly:

Inside the new controller, you can invoke an entry point, create a view, etc to generate the desired content or trigger any process.

For simplicity sake, I used the default action "actionIndex" to process the click event, since Espo does it as default action when processing tab item click events.

5) The new tab item can be added by Administrators by going to Administration>>User Inteface>>Tab List>>Add and selecting the new item from the modal window.

[blueprint]

telecastg This is great, thanks for the detailed instructions.

I cheated and modified one of the system files to allow the adding of custom items to the Navbar via the Admin User Interface.

I've made it so that anything prefixed with a "#" shows up as a menu group heading and anything prefixed with a ">" is a drop-down sub-menu (see pic attached).

Ideally, what I'd like to be able to do (and taking your code above as a very good starting point) is to create menu items for existing entities which pre-filter the data. For example, if I had a menu entry called Suppliers, it would only ever show a list/kanban of Account whose category is "Supplier". Likewise an entry called Customers, etc, etc.

[Nishan Perera]

Hi blueprint, I like that menu and can imagine the interface. can you share which file need to look at for these kind of changes. I did front end change with the css but not like this. appreciate your guide.

[telecastg]

The menu looks awesome blueprint much better organized in my opinion, specially for developing additional modules for the Espo framework in addition to CRM.

Can you tell me which system files did you have to modify and possibly share the custom side menu template ?

Thanks

[blueprint]

telecastg Thanks.

They're not shown on the screenshot I posted but we've developed a large number of in-house extensions for EspoCRM (purchase orders, inventory control, software bug tracking, enhanced document management and revision control, etc, etc) and the current menu system was getting too long - we needed a way to break up the functionality almost into department groups.

For us now, its more of an overall business tool rather than a CRM tool - the backend customisation is just very very good and we're exploiting that massively to our advantage.

I've mostly modified the master/header/footer/navbar JS and TPL files. If I get chance later today, I will post snippets of the modifications.

The only thing that is really missing is the being able to put permissions against these custom menu entries.

[telecastg]

The only thing that is really missing is the being able to put permissions against these custom menu entries.

You can do that in the custom "scope" (metadata file custom/Espo/Custom/Resources/metadata/scopes/{{MyTab}}.json) file setting the acl values to "true" as follows:

{
    "entity": false,
    "tab": true,
[B]   "acl": "true",[/B]
[B]   "aclPortal": true,[/B]
[B]   "aclPortalLevelList": [
        "all",
        "account",
        "contact",
        "own",
        "no"
    ],[/B]
    "disabled": false,
    "module": "Custom",
    "isCustom": true    
}

Then you can use the Administration UI to manipulate permissions, just like for any other entity.

[tothewine]

After creating a new tab following all of the above, I get this warning in the log. Also, permissions are ignored: if unauthorized user open the entity link it does show.

[2020-06-03 12:16:29] Espo.WARNING: E_WARNING: Invalid argument supplied for foreach() {"code":2,"message":"Invalid argument supplied for foreach()","file":"/home/domain/web/domain.com/crm/application/Espo/Core/Utils/Database/Orm/Converter.php","line":311,"context":{"entityName": "CutomTab1","entityMetadata":{"collection":{"t extF ilterFields":[],"fullTextSearch":false,"countDisabled":false}} ,"u nmergedFields":["name"],"outputMeta":{"id":{"type":"id","dbType":"varc har "},"name":{"type":"varchar","notStorable":true },"d eleted":{"type":"bool","default":false}}}} []

[tothewine]

In the end I kind of (need to test if it works actually) solved the error (i didn't see it in the log recently), by setting the name field to not storable. Here are my metadata files for reference:

entityDefs/Tab1.json:

{
"collection": {
"textFilterFields": [],
"fullTextSearch": false,
"countDisabled": false
},
"fields": {
"name": {
"notStorable": true
}
}
}

clientDefs/Tab1.json:

{
"controller": "controllers/about",
"color": "#005e2e",
"iconClass": "fas fa-envelope-o",
"kanbanViewMode": false
}

scopes/Tab1.json:

{
"entity": false,
"tab": true,
"disabled": false,
"module": "Custom",
"isCustom": true,
"acl": "true",
"aclPortal": true,
"aclPortalLevelList": [
"all",
"account",
"contact",
"own",
"no"
],
"stream": false,
"statusField": null
}

The last thing is the ACL when the direct url for this entity is visited. It does not appear on the menu if there is no permission but when visited it will render.
I used the about view as a template, but I think I probably need to extend some other view to get proper ACL on the url too...

[tothewine]

Yes. This creates a fake entity, which in turn creates a button that can be added to the navigation bar. You may create a fourth file for rendering the view: in my example I delegated to the "about" view.

[telecastg]

In our implementation we decided not to assign permissions at the fake "scope" aka menu item but instead to stick to managing permissions at the entities affected which i think is a better way to manage access

[tothewine]

In my case this is a 'webpage' view that polls no data from backend so permissions need to be implemented at frontend I suppose... right now for me it is the equivalent of having an empty list view because no entity is visible, only the list view is replaced with the custom view.

[esforim]

I'm trying to learn about Button and using these custom code at the moment. Follow the step post in https://forum.espocrm.com/forum/deve...9573#post49573

But still not quite sure what to do. I manage to get the button showing and all that (some step I make guesses). For example: custom/Espo/Resources/metadata/i18n/en_US/Global.json
This file here is not the same for me, for me it was: /custom/Espo/Custom/Resources/i18n/en_US/Global.json
But and the end of the day I think it correct.

For step 4, I just made that .js file and paste the code in the file:
actionIndex

After finishing, clicking MyTab will just show a /#MyTab URL. So it sound like Step 4 is where we need to write our own coding?

From blueprint screenshot I thought it would add a "Category" to entity

[tothewine]

Yes. You have to provide the controller, or use a default one ("controllers/about") for testing.
blueprint's screen shots are showing his own other modifications to the navbar so it's not default behaviour

[esforim]

OK, I replace the

actionIndex

with

[FONT=Courier New]"controllers/about"[/FONT]

in the file: /client/custom/src/controllers/my-tab.js

But still no luck, not sure what to expect. I guess it still too early to learn this.

[tothewine]

did you replicate my files exactly and then rebuild + clear cache +cache bypass reload (ctrl+shift+r) ?