Four Js Development Tools Forum

Hi,

I'd like to add a badge on the top right part of the hamburger menu icon of the GBC.
Its purpose is to count how many application are opened. I was inspired by the sample customization that came with the last versions of the GBC, which count the applications on a header bar.
Here's the link https://4js.com/online_documentation/fjs-gbc-manual-html/reference/project/widgets_with_modelhelper.html (https://4js.com/online_documentation/fjs-gbc-manual-html/reference/project/widgets_with_modelhelper.html)
The widget that i'm editing is ChromeBarWidget.
I'm stuck in the first steps because, after copy-paste the sample header js code, new application and close application events of the model helper seem to be raised as many times as there are opened applications.
How can I handle this? Do I have to use a global variable in javascript code?

Thanks!

Hi Efisio,

Attached is what i have for you.
Customized the 'sample' customization directory for you.

Below are the details.
1. Define a new Function 'getAppCount' in MyHeaderBarWidget.js
2. Customize the ChromeBarWidget.tpl.html file to add a new 'span' element for displaying the App count
3. Customize the ChromeBarWidget Javascript file, to call the newly created function to get the current App Count
4. Set the value to the 'span'

Attached are the customization files for the above. (Notei have followed along the 'sample' customization directory in GBC 1.00.54

Also note, you can do any styling for the newly added span (class : gbcAppCount) to display it as a badge

Thanks And Regards
Susobh Sugathan

Hi,

Please take note, that you may not want to make the ChromeBarWidget changes directly.
In Case if you have extended the ChromeBarWidget, you can always paste the changes in your extended ChromeBarWidget.

For my sample to you, i have directly modified the ChromeBarWidget Javascript and Template directly

Thanks And Regards
Susobh Sugathan

Hi Susobh,

Thank you for the help.
I made some changes, like extending the chrome bar widget and removing the hidden header bar, which event listeners had been replaced by the same listeners in the container javascript code.
The result is good, so I can proudly attach a screenshot to show it to you.
One thing that I wasn't able to handle is the badge counter when there is specified an application icon from the fgl program, which overrides the hamburger menu icon, therefore in the extension of the chrome bar widget I added a few lines for hiding the custom icon and keep the stock gbc icon.

Bye!

EDIT: I uploaded the wrong customization archive. Here is the working one. Sorry