AnsweredAssumed Answered

How to define a custom Site layout

Question asked by alejandrogarciaseco on Nov 8, 2012
Latest reply on Nov 12, 2012 by alejandrogarciaseco
Hi folks,

I'm currently involved in a project which requires a high customization of Share. One of the thing I have been able to achieve is to create my custom site preset definition.

Nevertheless, it is not enough with only changing the site's default pages, dashboard and dashlets. I also need to show in the dashboard a menu or group of options on the left, very similar to the menu that the repository or document library have. At the same time, I would need to change the dashlets distribution and preserve the site's functionality that allows the user to customize the site.

I guess what I have described in the last paragraph can be achieved by defining your own 100% custom site dashboard, creating both a custom template-instance and FTL files.

I currently have created the next elements:

1. Custom site preset:

<?xml version='1.0' encoding='UTF-8'?>
<presets>
   <!– Well known preset used to generate the default Collaboration Site dashboard –>
   <preset id="custom-dashboard">
      <components>        
         <!– title –>
         <component>
            <scope>page</scope>
            <region-id>title</region-id>
            <source-id>site/${siteid}/dashboard</source-id>
            <url>/components/title/collaboration-title</url>
         </component>
         <!– navigation –>
         <component>
            <scope>page</scope>
            <region-id>navigation</region-id>
            <source-id>site/${siteid}/dashboard</source-id>
            <url>/components/navigation/collaboration-navigation</url>
         </component>
        
         <!– workgroups –>
         <component>
            <scope>page</scope>
            <region-id>workgroups</region-id>
            <source-id>site/${siteid}/dashboard</source-id>
            <url>/components/custom/workgroups</url>
         </component>
        
         <component>
            <scope>page</scope>
            <region-id>component-1-1</region-id>
            <source-id>site/${siteid}/dashboard</source-id>
            <url>/components/dashlets/colleagues</url>
            <properties>
               <height>504</height>
            </properties>
         </component>
         <component>
            <scope>page</scope>
            <region-id>component-2-1</region-id>
            <source-id>site/${siteid}/dashboard</source-id>
            <url>/components/dashlets/docsummary</url>
         </component>
         <component>
            <scope>page</scope>
            <region-id>component-2-2</region-id>
            <source-id>site/${siteid}/dashboard</source-id>
            <url>/components/dashlets/activityfeed</url>
         </component>
      </components>
      <pages>
         <page id="site/${siteid}/dashboard">
            <title>Collaboration Site Dashboard</title>
            <title-id>page.siteDashboard.title</title-id>
            <description>Collaboration site's dashboard page</description>
            <description-id>page.siteDashboard.description</description-id>
            <template-instance>custom-dashboard</template-instance>
            <authentication>user</authentication>
            <properties>
               <sitePages>[{"pageId":"documentlibrary"}]</sitePages>
            </properties>
         </page>
      </pages>
   </preset>
</presets>

2. Custom template-instance:

<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
   <template-type>my/package/custom-dashboard</template-type>
   <description>Custom Dashboard</description>
   <properties>
      <gridClass>yui-gd</gridClass>
      <gridColumn1>5</gridColumn1>
      <gridColumn2>5</gridColumn2>
   </properties>
</template-instance>

3. Custom custom-dashboard.flt:

<#include "/org/alfresco/include/alfresco-template.ftl" />
<#import "/org/alfresco/import/alfresco-layout.ftl" as layout />
<@templateHeader "transitional" />

<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region id="header" scope="global" />
      <@region id="title" scope="page" />
      <@region id="navigation" scope="page" />
   </div>
   </@>
   <@markup id="alf-full-width">
   <div id="alf-full-width">
      <@region id="full-width-dashlet" scope="page" />
   </div>
   </@>
   <@markup id="bd">
      <div id="bd">
         <#–
            LEFT PANEL
         –>
         <div class="yui-t1" id="alfresco-documentlibrary">
            <div class="yui-b" id="alf-filters">
               <@region id="workgroups" scope="page"/>
            </div>
         </div>
         <#–
            LEFT PANEL
         –>
        
         <@layout.grid gridColumns gridClass "component" />
      </div>
   </@>
</@>

<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global" />
   </div>
   </@>
</@>

And I also have created a webscript component for the menu on the left that I have explained before. It has been created by taking as an example /components/documentlibrary/filter. Any other better model to follow?

Well, everything is working now but the presentation in the UI is not right at all.

After all, I'm wondering these questions: Is this the right approach and Am I in the right direction? Any other better and easier way to do what I'm trying to do? I believe this modification goes further than a simple site preset definition, and despite of I'm trying to understand the Share code and I'm constantly searching for posts or articles regarding this kind of customization I'm not making some more progress.

I hope I have explained clear enough. I would really appreciate some help to be guided in the right way.

Thanks in advance.

Outcomes