Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

Design Header and Footer components that are drag and drop

Avatar

Level 4

How would I design Header and Footer components that use the drag and drop features of AEM, yet are smart enough to know to position themselves at the top or bottom of the page etc.? It seems that the typical convention is to simply design a content page and then include the header.jp, body.jp, footer.jsp etc., directly into your content/template. I've explained this to the stakeholders, but the drag and drop feature is a mandate/requirement. Please share your thoughts on the best way to accomplish this.

1 Accepted Solution

Avatar

Correct answer by
Level 10

I agree with @scott ! We shouldn't allow headers and footers to be dragged n dropped as they represent the brand of a site. If that's a req, u shud strongly go back n say that's shouldn't be followed !!

View solution in original post

5 Replies

Avatar

Level 10
That is not common. As you stated, best practice is using includes. I guess you would design the component like other para components and place on sidereal or sidekick. But when using DnD, they can be moved  hence very bad practice.     

Avatar

Correct answer by
Level 10

I agree with @scott ! We shouldn't allow headers and footers to be dragged n dropped as they represent the brand of a site. If that's a req, u shud strongly go back n say that's shouldn't be followed !!

Avatar

Level 4

We're all in agreement that it's a terrible practice, but as I said in the original post, it is a MANDATE. I've spent a lot of time explaining to management that it isn't a best practice and goes against the conventions of what I've seen, but I don't yet have the experience to lay out any major problems that it might cause, so I've been told by folks in my management chain that the headers and footers have to use drag and drop, and that they should be "smart enough" to figure out where to position themselves on the page. In my humble opinion, it's not worth the extra effort, time/cost it will take to build in that intelligence, (because it doesn't yield any real benefit that I can see), but at this point, I MUST go ahead and do it the way I'm told to do it unless I can come up with some ironclad reasons not to, (i.e. problems it will eventually cause). At this point, I have to stop debating, and just go ahead and build what I've been asked to build.

I guess I could have the component evaluate the page, and then render itself right before the closing </html>, (for the footer), and have the header, render itself right after the opening <html>, and before the <body> etc? Can I use the DOM, or is there some other way to build intelligence into the component so that it renders in the correct section of the page? Can anyone think of a way to do this? I'll continue to try to show why it's best to follow the established best practices, but in the meantime, I've got to find a way to implement the way it's been specified by those who sign my checks. smiley wink

Avatar

Level 10

Given your requirements - i suppose you will need to use the DOM and custom logic.  As this is not something that I have seen before - i cannot point you to any community articles that will show you how to do this (as its not best practice). All articles that use footers and headers use includes:

<cq:include script="head.jsp"/>