Customizing the Share Header (Part 3)

cancel
Showing results for 
Search instead for 
Did you mean: 

Customizing the Share Header (Part 3)

Intermediate II
1 39 7,953

Introduction

In the first two posts in this series I've focused on how to add or modify items in the new Alfresco Share header bar and in this post I'm going to focus on how to hide items.

This will be demonstrated in two different ways:

  • Using a built-in helper function
  • Through configuration exposed by the 'alfresco/header/AlfSitesMenu' widget.


To get the most out of this post you should ideally read the previous two entries in the series as the first provides detailed information on creating a JAR file for your extension and the second provides some useful information on the 'Sites' drop-down menu.

The examples described in this post can be downloaded as a JAR file from here.

Removing Menu Items

After we released Alfresco Community 4.2.d it was very quickly noticed by observant community members that whilst there was a built-in helper method for finding widget entries that was helpful when adding or changing entries, it didn't actually help with removing entries.

To resolve this issue we have introduced the 'widgetUtils.deleteObjectFromArray' helper function. Unfortunately this helper method is NOT available in Alfresco Community 4.2.d but will be available in the Alfresco Community 4.2.e and in Alfresco Enterprise 4.2 releases (...but you can always try it out in the nightly builds!).

The function is very simple to use. It takes 3 arguments:

    1. The object to remove the widget definition from (you can typically just use 'model.jsonModel')
    2. The attribute to search for (you should use 'id')
    3. The value to match against the target attribute (the 'id' attribute of the widget definition to remove)


So for example to remove the 'My Files' link from the menu bar you would need to include the following code in your 'share-header.get.js' extension:

widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_MY_FILES'); 

Before the module is deployed the header is as follows:

Screenshot of header menu showing the My Files link

...and after the module is deployed the link has disappeared:

Screenshot of header without the My Files link

This is obviously a very simple example and you can add finer grained control through JavaScript in the controller extension, e.g:

if (!user.isAdmin)
{
  widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_MY_FILES');
}

...that would hide the 'My Files' link if the user isn't the Admin, or by deploying the Module with an evaluator (which pretty much allows you complete control over when the module is applied).

Customizing the Sites Drop Down Menu

The topic of hiding specific items from the Sites menu was raised on the Alfresco forums and I was embarrassed to discover that I'd not provided adequate configuration for toggling what is displayed (e.g. 'Recent Sites', 'Favorites', 'Site Finder', etc) so I made some updates which unfortunately were also done after Alfresco Community 4.2.d release.

One of the goals for the Alfresco widget library is that the widgets are either completely atomic and can be added and removed without causing errors (although clearly removing widgets can change functionality) and that where a widget encapsulates child widgets it provides configuration for them.

The 'alfresco/header/AlfSitesMenu' falls into this latter category (as described in the last post) so it was important to add that missing configuration. The following boolean attributes have been added:

    • 'showCreateSite' (controls whether or not the 'Create Site' menu item is displayed)
    • 'showSiteFinder' (controls whether or not the 'Site Finder' menu item is displayed)
    • 'showUsefulGroup' (controls whether or not the entire 'Useful' group is displayed - will override 'showCreateSite', 'showSiteFinder' and 'showFavourites')
    • 'showRecentSites' (controls whether or not the 'Recent Sites' group is displayed)
    • 'showFavourites' (controls whether or not the 'Favorites' and favourite controls, e.g. add/remove, are displayed)


So to make use of these attributes you can create a extension to 'share-header.get.js' as follows:

// Find the 'Sites' menu...
var sitesMenu = widgetUtils.findObject(model.jsonModel, 'id', 'HEADER_SITES_MENU');
if (sitesMenu != null)
{
  // Hide the site finder...
  sitesMenu.config.showSiteFinder = false;
}

Before the module is deployed the 'Sites' menu appears as:

Screenshot showing the Sites menu with the Site Finder displayed

...and after the module is deployed it appears as:

Screenshot of Sites menu without the Site Finder

The Importance of the Community

It's a shame that neither of these examples can be applied to Alfresco Community 4.2.d but it does highlight the powerful symbiotic nature of the community. As a company Alfresco (and ergo its Engineering team) has to prioritise it's customers but where possible we do listen to our open-source community and strive to respond to it's needs.

One of the biggest challenges when working on the extensibility features in Share and Surf is identifying the real world use cases that they will be required for. The more input we receive the better the product will become and if it is missing a feature then we will try our best to deliver it.

Summary

Hopefully this series of posts has provided enough information for you to start creating extensions to dynamically customize the new header menu. The header and it's implementation are new for Alfresco and its understandable that there it will take time to adapt. I'll be writing more posts over the coming weeks and months that provide more information on the recent changes with more examples on how to customize Alfresco Share. I'm also going to be covering the framework updates in detail at Alfresco Summit in November.

Finally, if you have any ideas for topics that you'd like me to blog about then please feel free to add sub-tasks to this JIRA issue. I can't guarantee that I'll definitely write up your suggestion but I will endeavour to cover as many as I can... and if nothing else, your suggestions will help us to understand where the pain points are for customizing Alfresco Share.

39 Comments
Active Member
Thanks for your posting.

But I have a problem.

I tried to remove 'My Files' menu item using attached jar file(BlogCustomiseHeader3.jar), but It is failed.

Entire header is removed.



Could you help me about this problem?
Intermediate II
@JK... this has been raised as a bug here: https://issues.alfresco.com/jira/browse/ALF-20384. It's a tricky problem to explain but essentially after writing this blog post we made some fixes to Surf regarding the processing of arrays in the Rhino engine (which were being handled incorrectly and causing some unexpected problems but was actually ensuring that this customization worked). Effectively what is happening now is that the element is being deleted but it is leaving an empty space in the array and there isn't sufficient error checking in the widget processing for empty elements and an attempt is made to access a null value. This results in the entire menu bar not getting processed. I'm working on the best way to address this but haven't implemented a fix yet.



Regards,

Dave
Active Member
Please update this post, I can't hide shared files !
Intermediate II
The issue won't get fixed until 4.2.1 is released at the earliest, however this JIRA issue (https://issues.alfresco.com/jira/browse/ALF-19930) provides a workaround to the problem.
Active Member
The notification about the contents of this blog not working is correct for the 'Removing Menu Items' part. However the part 'Customizing the Sites Drop Down Menu' does work, tested with  4.2.e-0 community edition.
Intermediate II
The fix for this will be in 4.2.2
Active Member
Hi Dave



My requirement is a little different from removing or hiding the menu items in the header bar.

I hope to hide the entire header bar since I want to embedded Alfresco share - My files / Shared files into another application thru iFrame.  But to admin, if he logged in, he could see the header bar.  Would you please give me some instruction on how to implement it?  Thanks  a lot!
Intermediate II
@Andy - this is a question more suitable for the Alfresco forums. However, hiding the entire header bar is possible by simply removing the header component - see previous blog posts for details (e.g. https://www.alfresco.com/blogs/developer/2011/07/27/how-to-hide-content-on-an-existing-alfresco-shar...)
Active Member
hi,

I want to hide the leave site button, but am unable to do that

can you please guide on that
Intermediate II
@bhramari That question is more suitable to the Alfresco forums.
Active Member
@Dave



Hey Dave thanks for the excellent tutorial on the share header modification. I've already placed a post in the forums on this, but thought I would ask my question here as well. I'm currently using 4.2.f CE and testing your jar file on a test environment. I get the same problem as the above mentioned person stated that the whole menu disappears when I load the module. I've read the JIRA posts and right now I don't want to upgrade to 5.0a. Is there a way for me to work with the version I have and still be able to remove menu items based on a specific user? I'd really appreciate any feedback you can give.
Intermediate II
@Joshua - can you add a link to your forums question and I'll answer it there. It should be possible to do what you want ... without knowing all the details it possible that this is an issue where the widget processing isn't tolerant of gaps in the array - that would then result in the entire menu bar not being rendered (on 4.2f at least)
Active Member
Active Member
@Dave



Thank you for the reply in the forums, but I'm struggling with how to actually code calling for the current user information and then evaluating it. Could you possibly help?
Active Member
i put above mentioned code like 'widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_MY_FILES'); ' in share-header.get.js file but 'MY Files' menu is not removed
Intermediate II
@koki - which version of Alfresco are you using? Have you checked that the extension module is being detected and is deployed? A bit more info would be useful here.
Active Member
@Dave Thanks a lot for the response,it was my mistake ,finally i deleted the menu but it works after am restarting the system only, I don't know how to restart the inbuilt tomcat in sdk ,am using Alfresco 5.0.

Pls help me to resolve it.
Intermediate II
@koki - I'm not very familiar with the SDK so I don't think I'll be able to help here. Try the Alfresco forums or IRC for assistance with it.
Active Member
Hi Dave Pls  help!

How to remove the Upload button in alfresco 4.2.f
Active Member
Hi Dave,



I downloaded your jar and uploaded its working fine, the content I created a jar using eclipse its not working  how you are creating  jar
Intermediate II
@Anwar I create the file structure on the file system and then compress (in Linux you get the useful ability to compress to a JAR, but you should just be able to create as a Zip and then rename)
Active Member
thanks  Dave Its worked fine.........
Active Member
Hi Dave,



I removed header part from alfresco share dashboard page using this tutorial,but when am search for doc all header parts are enabled how can disable that?
Intermediate II
@Anwar - could you rephrase your question please, I'm not quite sure what you're asking? Also, what version of Alfresco are you using?
Active Member
Hi Dave,



The header part can be hidden or remove with your instruction but if you do a search on the toolbar and hit enter, it bring you to the search page listing all the searchers. That's when the full header show up again. Is there anyway to configure that too?
Intermediate II
@Albert - see this discussion on the forum: https://forums.alfresco.com/comment/151439#comment-151439. I'm not sure why people have had issues with this, as I say in the forum post, this is the approach we use for Alfresco Cloud customizations.
Active Member
@Dave - Thank you for your reply.



You mention Simply add to your extension the below code. Where or which extension are you referring to? Do I have to create an extension and what file name and location do I have to put it into? Do you have a sample?



   share-header





I have added these lines to 'share-header.get.js' which works fine to remove all tabs except 'Shared Files' for all users except Admin. Only problem is the facated search page still showing all tabs.



if (!user.isAdmin)

{

widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_MY_FILES');

widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_REPOSITORY');

widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_PEOPLE');

widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_TASKS');

widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_SITES_MENU');

widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_HOME');

}



Would really appreciate if you could help explain into more details in getting it to work. I Thank you once again!
Intermediate II
@Albert - I've created a sample extension JAR that does the customization to the header for both regular and full Aikau pages, you can download it and try it out from here: https://dl.dropboxusercontent.com/u/919772/HeaderCustomizations.jar



Please review how I've created the two customization XML elements to target the different types of pages, also note how I've built a single folder structure that will work with the sourcePackageRoot definition for both customizations.
Active Member
@Dave - It Works!



Thank you for your help. After adding in the JAR extension and restart alfresco, the menu is gone just like what I wanted. Only when login as admin than it will show up.



Do private email me your paypal account. I would wish to send you a small token of appreciation. And also if in the future when I need help, I'm willing to pay for your service. Smiley Happy
Active Member
Hello there,



This worked with 5.0.c version of Alfresco quite well. Thanks for that!
Intermediate II
@Albert - excellent, I'm glad it solved your problem. I'll decline to e-mail you any PayPal details since I work for Alfresco and assisting community members is part of that employment. If you need dedicated Alfresco support then that can be purchased through the appropriate channels.
Active Member
Hello gentlemen,

excuse me for anoying question, but I ve tried copy HeaderCustomizations.jar to webapps/alfresco/WEB-INF/lib/ but nothing happened.

The same situation with BlogCustomiseHeader3.jar.



I know it is stupid question, but where I should put jar files with modifications?



Thank you for effort Smiley Happy
Active Member
Hello,

please where you put JAR file with header modifications?



Thank you
Intermediate II
@Jakub K The JAR should go into 'share/WEB-INF/lib'
Active Member
if (!user.isAdmin)

{

  widgetUtils.deleteObjectFromArray(model.jsonModel, 'id', 'HEADER_MY_FILES');

}



I would like to filter by a group instead of the 'user.isAdmin'. I can imagine that is possible too. But I cannot figure out how.  I did find this piece of code.. https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/check-if-user-gro...



With some adjustments It may fit my needs (group will have a fxed value), but i cannot figure out how to get the username to 'user'.
Active Member
It seems my comments get lost after posting?
Intermediate II
Comments are moderated. They need to be approved before they appear (we get a lot of spam comments!)
Intermediate II
@Pieter Have you seen the information on rendering based on group in this tutorial: https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Tutorial15.md ?
Occasional Visitor

Hi,

Could the sample JAR files be made available again for download?

Thanks,

Gilles