In Authoring environment for adding components on multiple tabs we need to click multiple times preview and edit

[#1]

Hi,

In order to view edit the contents for multiple  tab  to add components under parsys of multiple tabs that requires that section of the page to be clicked, the author must:

switch to preview mode
click on the tab or accordion where the content is to be authored to view the parsys
switch to edit mode
This can be very time consuming especially since the page refreshes and defaults to the first tab or closes the accordion after authoring some components.


Observations:-


Whenever the author needs to edit the page , edit mode is selected and authoring activities are performed.

During this edit mode , the click functionalities / user interactions on the actual links will be blocked by an overlay in touch UI enabling only authoring activities in components.

 Here the issue mentioned is - when multiple tabs are present the author is having no choice but to go to preview mode in order to navigate to tab2 then again needed to move to edit mode to do authoring tasks,
which is the only way in touch UI whereas the classic UI enables the user interaction in edit mode as well. 

Could some provide inputs as how to resolve this issue and just using only edit mode

Thanks

[srinivas_chann1 · Accepted solution]

Hello, 

This issue is common for older components that were created back in 6.1. Since then, things have changed and a number of newer best-practices help to make components much more user-friendly to edit and configure for authors.

The problem here is that you do not have any javascript that can be triggered from the Editor overlay to change the selected tab. You could write this yourself by:

1. Creating a clientlib which swiiches tabs
2. Adding it to the edit dialog by using the extraClientlibs - String[] property on the cq:dialog node

But the easiest thing to do (and the most future-proof) would be to update your Tabs component. I suggest you migrate towards AEM Core Components - Tabs which already has a tab-switching feature in Edit mode:

[srinivas_chann1 · Accepted solution]

Thanks for your inputs.

It get me  insights as how this could be solved. In case you have sample code / links for this could you post ,that will be really helpful for me in solving this.

Thanks

[Theo_Pendle · Accepted solution]

You can download AEM Core Components from here: https://github.com/adobe/aem-core-wcm-components/releases

[Theo_Pendle · Accepted solution]

You can then proxy those components to use them in your site: https://docs.adobe.com/content/help/en/experience-manager-core-components/using/get-started/using.ht...

[Theo_Pendle · Accepted solution]

More on the Proxy pattern here: https://docs.adobe.com/content/help/en/experience-manager-core-components/using/developing/guideline...

[srinivas_chann1 · Accepted solution]

Hi,

It seems to much of content is available, not sure where to start . I am using AEM (6.3.3.5) so Should i install core.wcm.components.all-2.8.0.zip and  should i change the cq_dialog of component i am using or should i change *.html files of the component

Thanks

[Theo_Pendle · Accepted solution]

It sounds like you are a beginner, there are many things to learn. I suggest you start with this tutorial: https://docs.adobe.com/content/help/en/experience-manager-learn/getting-started-wknd-tutorial-develo...

[srinivas_chann1 · Accepted solution]

Hi, 

Few things i am not clear upon. Could you please provide your inputs will help me.

1>Should i install to aem package manager  the https://github.com/adobe/aem-core-wcm-components/releases

.core.wcm.components.all-2.8.0.zip

2>Should i add the below jar to AEM bundles .What will the maven code for this 

core.wcm.components.core-2.8.0-javadoc.jar

3> Then add the client library and update cq_dialog fro below link

https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/...

Thanks

[srinivas_chann1 · Accepted solution]

Hi , Any inputs on my previous query will help

[Theo_Pendle · Accepted solution]

1. and 2: Rather than installing the package and bundle manually, you should add the bundle as a Maven dependency and the package as an embed

Then:

• Create a proxy component of the Core Tabs component
• If you have any customization to add, add them to this new proxied component

Could you also please mark my question as accepted, since it is correct.