aikau - changer header appearance

[jaeni]

hi

i am new to dojo/aikau and i want to achieve the following:

change the header from this:
[img]http://i.imgur.com/JeacLBa.png[/img]

to this:
[img]http://i.imgur.com/cpwvz0y.png[/img]


i couldnt find out where the order of the 2 (header and header title) can be changed.
any hint?

[ddraper]

There are 3 blog posts describing header customizations (including useful information on how to build the extension modules) starting here: http://blogs.alfresco.com/wp/developer/2013/09/04/customizing-the-share-header-menu-part-1/

This is actually a fairly straightforward customization… the black bar is one widget (containing lots of sub widgets) and the white bar (with the logo) is another … these are just entries in an array so all your extension needs to do is to swap those elements.

[jaeni]

Hi ddraper,

i have read your posts, but i couldn't figure out in which file i need to do the swap. is it share-header.lib.js?
i am also wondering how i can properly overwrite that file using alfresco sdk 2.

[jaeni]

wow - great!
i switched both wigdets and it instantly worked. but i did change the file share-header.lib.js directly inside the exploded share.war. which is what i dont want to do.
can you tell me how i can extend/create a module for overwriting that file with the sdk?

[darkredd]

Hi Jaeni,

In my little experience, I have found that copying the file and editing where required and putting it in the shared/extension folder to work. I however do not know how effective or architecturially right that is but it works; as the bootstrap lastly load the files in the extension folder there-by overriding the original.

Hope that help. But ofcourse you will have to regiter a bean for the new file.

Regards
Vusani

[jaeni]

tomcat/shared will work, but not for sdk-use. i would really like to know how the lib.js can be overwritten there.

[ddraper]

No, you don't want to be copying and editing the file - the whole point is that you can write an extension module that targets the specific widgets in the header. This is detailed with examples in the blog posts that I linked to so I won't repeat the information here again.

[hardik1512]

Hello Jaeni,

I think you should not change share-header.lib.js file. You can see that this file is imported through the import directive  in share-header.get.js file which is webscript controller file.

So first you can create a extension module using link http://blogs.alfresco.com/wp/developer/2013/09/04/customizing-the-share-header-menu-part-1/.

Then you can write logic something like below in your extended share-header.get.js file to swap two widgets.

var siteWidget = widgetUtils.findObject(model.jsonModel, "id", "SHARE_VERTICAL_LAYOUT");
var jsonObject=siteWidget.config.widgets;
var temp=jsonObject[0];
jsonObject[0]=jsonObject[2];
jsonObject[2]=temp;