How to add elements to the navbar?

Hi all

My goal is to add an element (button or link) to the top bar so that it would be visible on any page within SuiteCRM for logged-in users. This element would hold an onClick() to open a popup. The popup holds certain data that should be accessible on any page.

I would like to do this in a completely upgrade-safe way. I know I could just customize the template files and be done with it, but then I’d need to keep track of and apply future updates to the template file. I’m trying to avoid this, so is it possible to add buttons to the top bar in another way similar to vardefs or Menu.php in modules?

So far I’ve tried doing this with JS using by a couple of methods (insertAdjacentHTML is my latest tool) fired by an application logic hook in either after_ui_frame or after_ui_footer, but apparently it still gets overridden as the pageload advances. I guess I could play with CSS using negative margins and flots, but I’m hoping to find a more elegant solution.

Any ideas or pointers?

You can use the Global Logic hooks to insert you Link/Button into the Framework/Menu.
Check the file at

/custom/modules/logic_hooks.php

Thanks, but that doesn’t really cover it. AFAIK there is no logic hook in the application context that would fire at the appropriate time - but if I’m wrong, please do correct me! Both after_ui_frame and after_ui_footer are too late and I figure after_entry_point is too early. I also can’t figure out how to reposition the button in later hooks with JS – the button always seems to be off or getting overwritten, and position:absolute would be too prone to glitches.

You can modify the Footer Template to add JS which will be loaded for all page.

1 Like

Thanks, but that’s exactly what I’m trying to avoid; I wonder if this could be done theme-neutrally without touching the template files.

To make it clear, I’m trying to find a way to add a glyphicon (in this case) link to either div#toolbar (next to modules) or ul#toolbar(next to notifications, search etc), but the same use case might be with buttons. I know I could just add the link to the relevant template files, but then I’d need to maintain the custom versions of those files and, if possible, I’d like to avoid that here. (btw, I just noticed there are two html elements with the same id in SuiteP)

I’ve tried repositioning the link using JS, but something keeps rerendering the navbar and the link is lost once page is finished rendering. I’m a little lost with why that happens, but also think it’s an unstable hack and not a good solution so haven’t put too much thought into it yet. So does anyone know if there is a way to add new elements to the app-level navigation without theming?

Right now I’m circumventing the issue by adding an additional toolbar to the top of content with JS and logic hooks. The solution is best so far, but for getting a couple of buttons seems like a big cost in terms of viewpane.

have you tried to do changes in custom/themes/SuiteP/tpls/_headerModuleList.tpl file copying it from the main theme making it upgrade safe.
There are two menus in this, one is defined for Mobile view and the other for Desktop.

I know that. I’m trying to achieve the result without touching the templates or any theme files.

I know this is a bit late and I am brand new to SuiteCRM, but this is what I did after a looooong struggle and it works for me. Maybe someone else can make use of it.

    var mybutton = $('[id=quickcreatetop]');
    mybutton.prepend('<div onClick="yourOnclickFunction(\'whatever\'); return false;" style="margin-right:20px;float:left;border:1px solid #A2B2BF;border-radius:5px;top:10px;display:block;color:white;background:#A2B2BF;width:100px;text-align:center;max-height:42px;padding: 10px;font-family:verdana;cursor:pointer;font-size:14px;">BUTTON TEXT</div>');

The above prepends the button to the CREATE button on the nav bar. This code should be placed in your custom module javascript file.

Hope this helps someone.

Hi @godfreyjp, welcome to the Community :tada:

Thanks for sharing this useful tip. Exactly in which file do you place it? I am sure this will help someone for future reference.

Thank you @pgr
I am busy coding a custom addon. So I place it in my javascript file which is loaded in the header of SuiteCRM