Alfresco 5.0 UI Customization

[bigmclargehuge]

Hey Everyone,

I have currently using Alfresco 5.0 Community and I am looking for some information about customizing the share UI. I have been searching around the forums and the internet, but I am only finding out dated information. Most of the fixes do not carry across to 5.0 it seems.

- The first UI change I am trying to make is to display more than 50 items per page. I have found plenty of information for 4 and earlier but nothing for 5.

- The second UI change I am looking to make is the side bar has a tree view of all the folders below the share, when you click on a folder this expands automatically. I am looking to make this independent from where you are in the share. Ideally I would like this to not expand automatically since the list is very long. If I cant actually stop it from expand is there a way to put the tags above the tree view on the side bar so it does not get lost in the fray.

If anyone can point me in the right direction that would be awesome.

Thank you in advanced!

[steven_okennedy]

Hi bigmclargehuge,

The best place to look for information like this is the Alfresco-provided documentation, which is up to date for Alfresco 5 (http://docs.alfresco.com/community/concepts/dev-for-developers.html). They can give the basics to understand how the Share UI is put together so you understand what you need to do. 

Each page in Share is controlled by a template and split into regions.  Each region is rendered by a webscript, which runs on the server and defined and configures the client-side widgets that are used to create the DOM structure and provide the UI behaviours.  In order to make a change to how the UI behaves, you have to first know what region (and so what webscript) it is in. The surfbug tool (which can be activated using http://--server--/share/page/surfBugStatus).

Once you identify the webscript and potentially the JS widgets involved in that drawing that region, you can look at the code to understand what needs to be changed to achieve your desired effect. 

E.g. your first question talks about the number of items per page in the document library.  This is on the documentlibrary page, in the documentlist_v2 region, so we'd end up looking at the documentlist_v2 webscript (share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\documentlibrary\documentlist-v2.get.*).  This shows that the region is built on the client side using the widget Alfresco.DocumentList (share\components\documentlibrary\documentlist.js).  This js widget can take as an initialisation option the number of items to show per page, but that value is not provided by the webscript, but has a default value of 50.  To do the customisation you're looking for here, you would need to augment the webscript controller to pass an extra options argument to set the page size you want. 

How to do that is given here (http://docs.alfresco.com/community/tasks/dev-extensions-share-tutorials-js-customize.html) and in this case you'd need to add something like

model.widgets[1].options.pageSize = 100;‍

Basically, this code will get the widget definition for the documentlist widget (which is just a JSON object) and add an extra option called pageSize, which is one of the options the widget is already built to handle.

Your second query is easier (thankfully!) although it sounds like it might be more complex.  There is a particular configuration setting exposed for controlling how the folder tree behaves, that can just be changed using a share-custom.config file, or other config extension file.  Simply providing something like:

<config evaluator="string-compare" condition="DocumentLibrary">

      <!– Document List –>
   <doclist>
…
      <tree>
         <!–
            Whether the folder Tree component should enumerate child folders or not.
            This is a relatively expensive operation, so should be set to "false" for Repositories with broad folder structures.
         –>
         <evaluate-child-folders>false</evaluate-child-folders>
      </tree>
…
   </doclist>
</config>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Setting the evaluate-child-folders parameter to false will stop share from automatically opening subfolders in the tree.

Extending share can be complex, because it is a large application but there a lot of very flexible extension points available both in the Share configuration and via the Spring Surf framework's extension mechanisms.  I'd recommend doing a little reading of the Alfresco docs, the 5.0 version of the Share development area seems to have just undergone some good updates, so it's worth spending a little time to understand the architecture and the options available

Regards

Steven