cancel
Showing results for 
Search instead for 
Did you mean: 

common/page.ftl

mizage
Champ in-the-making
Champ in-the-making
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) ?
4 REPLIES 4

bremmington
Champ on-the-rise
Champ on-the-rise
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.

mizage
Champ in-the-making
Champ in-the-making
Thanks for the in-depth reply. I will try the second option!

mizage
Champ in-the-making
Champ in-the-making
It worked! Thanks.

bremmington
Champ on-the-rise
Champ on-the-rise
Excellent. You're welcome.
Getting started

Tags


Find what you came for

We want to make your experience in Hyland Connect as valuable as possible, so we put together some helpful links.