Adobe CQ5 Global Component

Question

Some background: I'm trying to create a sliding navigation component on the left for a responsive website. I want to include an image, configured using a design_dialog, next to all items in the menu.

I am running CQ 5.6.1

The problem I'm running into, is I currently have "homepage", "contentpage" and "contactpage" templates. All 3 are being rendered with their like-named components, which are being derived from a base "page" component.

In this page component, I have a body.jsp that is including my navpanel component. Everything works fine, but when setting the images in the navpanel while on the home page, they do not show on the other two.

I know the reason for this is because the navpanel design path is: /etc/designs/testsite/jcr:content/homepage/navpanel

In body.jsp, when including navpanel, I tried setting the path variable in the cq:include to an absolute path (ie /etc/designs/testsite/jcr:content/navpanel), since according to the API, it should take an absolute path and not modify it at all. Instead, when outputting currentStyle.getPath(), it continues to show the first path (which includes homepage).

To achieve my goal, I need to be able to configure the design path for this component to be on a 'global' level and not nested within the templates design.

Is there a programmatic way of changing this value? Does it sound like there is a bug with the cq:include path not behaving as intended?

Answer 1

cq:include was not made to load in design paths as a component (which sounds like what you're trying to do).

cq:include was made to either include a static script (using the script property) e.g:

or a component (using the path and resourceType property) e.g:

currentStyle will still fetch the style this component for the designPath of the current template.

You will notice the same thing on the geometrixx demo site for example when you switch the logo (design mode) to something else, and next go to another template. The old logo will still be there on the pages using the other template. That's why it's recommended to do as little as possible in design mode unless you intend your actions to be limited to the template for which you are in design mode for. For example, limiting the components that can be used on a specific template is a great use of the design mode.

It's not really that straight forward to make a "global" component that uses the same data as a source. In your case it you could try to solve this issue by saving/loading the images to/from a common location in the repository. Perhaps you could even implement a service to make this "common location" configurable. Or you could take it even further and have the service load/save the images as well.

Answer 2

a little bit late but wanted to share how we made a component global (authorable component).

Using absolute paths didn't work at all (well, almost). For multiple pages to share a global component, we worked path properties this way:

Let's say we have 10 pages sharing a menu component:

1. make all of them extend from a default page component.
2. make only one page (call it myapp/components/pages/A) to extend page and have a relative path to the shared component you want to include (ie: <cq:include path="mysharedcomponent" resourceType="myapp/components/mysharedcomponent" /> ).
3. make the remaining pages to extend page and use an absolute path to the shared component (ie: <cq:include path="/myapp/A/jcr:content/mysharedcomponent" resourceType="myapp/components/mysharedcomponent" /> ).

This method may be use to have global component under CQ shared among multiple template pages, and also does support drag & drop functionality when working on EDIT mode: drag any child into shared component and get that component available on all pages.