Design Header and Footer components that are drag and drop | Community
Skip to main content
au4liferz
au4liferz
Level 4
December 11, 2015
Solved

Design Header and Footer components that are drag and drop

  • December 11, 2015
  • 5 replies
  • 3263 views

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.

    Best answer by Lokesh_Shivalingaiah

    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 !!

    5 replies

    smacdonald2008
    smacdonald2008
    Level 10
    December 11, 2015
    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.     
    smacdonald2008
    smacdonald2008
    Level 10
    December 11, 2015
       Here is a good community article that talks best practice.     http://antonyh.co.uk/2012/01/cq5-best-practices-for-component-development-html/
    Lokesh_Shivalingaiah
    Lokesh_ShivalingaiahAccepted solution
    Level 10
    December 11, 2015

    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 !!

    au4liferz
    au4liferzAuthor
    Level 4
    December 13, 2015

    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

    smacdonald2008
    smacdonald2008
    Level 10
    December 13, 2015

    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"/>

    Terms & ConditionsAccessibility statement

    Loading footer...