common/page.ftl

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

mizage

I'm trying to add breadcrumb functionality and have been able to make it work in individual webscripts. Now I'm trying to put in the page.ftl and make it common for the whole site. I added a common/page.js to handle this logic. Not working. Should it (the javascript works in other webscripts) ?

bremmington

No, page.ftl is just a block of FreeMarker (in fact containing a single FreeMarker macro) - nothing would cause page.js to be run. I think there are a couple of options for you - without knowing what the logic is that you need it's difficult to say which is the better one.

The first option is to move the logic into an interceptor similar to the ApplicationDataInterceptor. This provides an opportunity for you to build up any data structure you want and place it in the request context so it's available to all FreeMarker fragments anywhere - this is what we do with the "webSite", "section", and "asset" objects, for instance. You can add custom interceptors into the chain by altering the "interceptors" property on the various Spring controller mappings (surf-config.xml and wcmqs-webapp-context.xml).

The second option is to add a new region into the template, define your breadcrumb functionality as a component, and wire that component into that region globally so it is populated automatically on every template (like the "menu" region is). As an example, alter page.ftl so that the part that currently looks like this:

    <div class="main-menu-wrapper">
        <@region id="menu" scope="global"/>
    </div>
  
    <#nested>
     
    <div id="footer">
        <div class="copyright"><a href="http://www.alfresco.com">Alfresco.com</a></div>
    </div>
‍‍‍‍‍‍‍‍‍‍‍

changes to look something like this:

    <div class="main-menu-wrapper">
        <@region id="menu" scope="global"/>
    </div>
    <div class="breadcrumb-wrapper">
        <@region id="breadcrumb" scope="global"/>
    </div>
  
    <#nested>
     
    <div id="footer">
        <div class="copyright"><a href="http://www.alfresco.com">Alfresco.com</a></div>
    </div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then, to map that new breadcrumb region to a particular component globally you would add a new file named "global.breadcrumb.xml" in the "surf/site/components" folder (alongside the existing one "global.menu.xml"). If you're going to give your breadcrumb component a URI of "menu/breadcrumb" then global.breadcrumb.xml would look something like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<component> 
  <guid>global.breadcrumb</guid>  
  <component-type-id>webscript</component-type-id>  
  <title>global.breadcrumb</title>  
  <description>global.breadcrumb</description>  
  <url>/menu/breadcrumb</url>  
  <resources/>  
  <scope>global</scope>  
  <source-id>global</source-id>  
  <region-id>breadcrumb</region-id>  
  <properties/>
</component>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now create your breadcrumb component in the "WEB-INF/webscripts/menu" folder by adding three new files: breadcrumb.get.desc.xml, breadcrumb.get.js, and breadcrumb.get.html.ftl. The javascript file is probably the same as what you've just tried in page.js. The ftl file is just the FreeMarker to render your breadcrumb. The XML file is your webscript descriptor - just copy it from menu/top.get.desc.xml and adjust the three properties in it.

Obviously, I don't actually know whether where I placed the region corresponds with where you need to place it in your HTML, but hopefully this gives a starting point. I favour the second option over the first, as it keeps things nice and modular.