Header dialog implementation | Community
Skip to main content
Mani_kumar_
Community Advisor
Community Advisor
February 13, 2016
Solved

Header dialog implementation

  • February 13, 2016
  • 7 replies
  • 3395 views

Hi All,

We have a requirement to implement a header navigation all the configurations should be given by author dialog it is not like getting all child pages from the parent values should populate from the author dialog only.

We have some approach to implement it by having it in data page(global page for header configuration) but design of the dialog is complicated any idea or thoughts that can make our dialog design easy for the authors.

I am also attaching the screenshot for the header.

Thanks,

Mani Kumar K

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by edubey

Hi Mani,

These type of menus or header depends on CSS/HTML/JS to a great extent. I hope you have all these things with you.

Second, As you can see, you have one main navigations on top. Then each main navigation is again having some sub navigations.

I would recommend you to implement using your own custom XTYPE having nested multifield. It will not restrict authors and will help them to author navigations with 2 level easily and any number of links.

7 replies

edubey
edubeyAccepted solution
Level 10
February 13, 2016

Hi Mani,

These type of menus or header depends on CSS/HTML/JS to a great extent. I hope you have all these things with you.

Second, As you can see, you have one main navigations on top. Then each main navigation is again having some sub navigations.

I would recommend you to implement using your own custom XTYPE having nested multifield. It will not restrict authors and will help them to author navigations with 2 level easily and any number of links.

smacdonald2008
Level 10
February 13, 2016

AEM nav components are driven by JCR structure and CSS/JS. Creating a dialog fir a nav conponent may be possible using a menu plugin such as a JQuery plugin.

Level 3
March 14, 2016

Hi Mani,

Could you please let us know what approach did you take to implement this functionality?

I am looking to implement at similar requirement. Also is there any possibility to cache the entire navigation mega menu so that we need not repeat the steps to fetch the list of menu items on every page load? 

 

Thanks & Regards,

Srikanth Pogula.

Mani_kumar_
Community Advisor
Community Advisor
March 14, 2016

srikanth pogula wrote...

Hi Mani,

Could you please let us know what approach did you take to implement this functionality?

I am looking to implement at similar requirement. Also is there any possibility to cache the entire navigation mega menu so that we need not repeat the steps to fetch the list of menu items on every page load? 

 

Thanks & Regards,

Srikanth Pogula.

 

Hi Srikanth,

Can you please provide any screenshot of your header so that i can tell how exactly we can do it.

 

Thanks,

Mani Kumar K

Level 3
March 14, 2016

Hi Mani,

I have attached the screenshot here.

Primary navigation menu items are Services, Industries, Careers.

Under each primary nav item, there can be multiple Level 1 menu items, for example Audit, Consulting, Enterprise Risk etc...

Under each Level 1 menu item, there can be multiple Level 2 menu items, for example under Audit there are two Level 2 menu items a) Financial Transactions b)Regulatory, Forensics & Compliance

 

Thanks & Regards,

Srikanth Pogula.

Mani_kumar_
Community Advisor
Community Advisor
March 14, 2016

srikanth pogula wrote...

Hi Mani,

I have attached the screenshot here.

Primary navigation menu items are Services, Industries, Careers.

Under each primary nav item, there can be multiple Level 1 menu items, for example Audit, Consulting, Enterprise Risk etc...

Under each Level 1 menu item, there can be multiple Level 2 menu items, for example under Audit there are two Level 2 menu items a) Financial Transactions b)Regulatory, Forensics & Compliance

 

Thanks & Regards,

Srikanth Pogula.

 

Hi Srikanth,

So may be you can follow below implementation

1.Make datapage only with parsys (Header global configuration page) here you ll be configuring all the primary navigation ,level 1 and level 2 components.

2.Make a component where you will configure primary nav title(Services) and mention how may level-1 components required.

3.Based on the value configured populate(include) that many Level-1 components into the page.

4.Now Level-1 Component will contain a texfiled which is name of the level-1(Audit) and multifield(financial transactions)

In these way i think you can implement the header.

Read all the values from the datapage to actual header component.

 

Thanks,

Mani Kumar K

2.

Level 3
March 15, 2016

Thanks for the reply Mani. I will try out this approach.

 

Thanks & Regards,

Srikanth Pogula.