[Accordion/Tabs] Unable to add items into Accordion/Tabs component in an Angular project

[minhle8088]

Hi there,

Please reference to this issue: https://github.com/adobe/aem-core-wcm-components/issues/934

I have experienced the same issue as claudia even I made these:

• ./cq:isContainer - set to {Boolean}true, marks the Accordion as a container component

https://github.com/adobe/aem-core-wcm-components/issues/659

• add "the implementation of the Accordion Front-End component" per pfauchere

There might be not a call to the editor client library when clicking on the Add button in the dialog. I don't even see the "Select Panel" button for the Accordion or the Tabs component's toolbar, which suppose to be fixed in the next v2.9.

Please verify with an Angular project because I see it works with the core component example project and the pre-installed We.Retail. Please give me your generated testing source code (if possible) if you won't be able to replicate the issue.

• AEM 6.5
• Java SE 1.8
• Node 10.13
• npm 6.9
• Latest AEM project archetype with a fix on Feb 26, 2020, used archetypeVersion=23, frontendModule=angular
• Core component v2.8, and I also tried with v2.5, v2.7

[pfauchere]

Hi @minhle8088,

Within the editor, can you see and use the edit dialog to configure the Accordion component?

Once the Accordion dialog is saved, the editor is supposed to fetch the Sling Model for that component and pass it to the PageModelManager library via the iFrame which will, in turn, update the model of the app.

The FE Accordion component is then supposed to be re-rendered and get the updated fragment of the model. Could you please have a look at this workflow - starting with the FE component getting the updated model?

If you need more assistance from us you may have to create a DayCare ticket and share with us you implementation of the Accordion component.

Regards,

[minhle8088]

Hi @pfauchere ,

Thank you for your response.

To answer your questions:

"Within the editor, can you see and use the edit dialog to configure the Accordion component?" Yes, I am able to drag the Accordion from the sidebar and drop into the (spa) editor. I am also able to click on the Accordion to open the dialog to edit it. However, the toolbar doesn't show the Select Panel button (which is a bug soon be fixed in v2.9).

Since there is a template in ui.apps for the component, a list will show with Item 1 and Item 2 as step 4 in issue #934. However, there is no action called for the Add button.

When I edit the text in the textfields, such as update "Item 1" to "Option 1", then I will receive the updated text in the response model.json accordingly. However, because the Add button doesn't work, I can't add anything to the Accordion to get them populated in the FE.

I will try it again and upload my code if possible. I have to switch between my personal laptop and the company laptop because of the proxy settings.

[minhle8088]

Hi @pfauchere

I am wondering if you have ever had a chance to generate an Angular-base project to verify the Accordion and Tabs component?

I wanted to ask that question because I'm still confused about some things:

• The ability to add an element in the dialog which concerns the Add button doesn't relate to the FE. We only need to look into the FE after adding elements.
• In my FE, i just simply made a mapping Angular component for the Accordion/Tabs, used @Input to get the Accordion in the response model.json and map the child elements to the HTML markups.
• Is there a need of importing third-party libraries, such as jQuery, to have the editor hook work? I found that implementation in We.Retail and WKND Site.

I can't find any documentation for implementation of Angular-based project with the AEM project archetype, and the tutorial for SPA does not apply to this.

FYI, I can't create a daycare ticket because I don't have an Enterprise account as of now.

[cwuerzlhuber]

@minhle8088, did you manage to solve the issue? I have the same troubles with Tabs component not working in an angular based project.

You also mentioned, that the toolbar issue should be fixed with v2.9.

the toolbar doesn't show the Select Panel button (which is a bug soon be fixed in v2.9).

Where did you get the information? I have installed v2.10 on my AEM instance, but still the select panel button is not working.

I'm also wondering, how this panelContainer should work in general in case of SPA editor, since it is directly accessing the html markup of the component in the editorhook.js file. I guess in the case of SPA Editor, it should update the model and post the model to the SPA inside the iframe, so that the SPA can handle the switch of the current panel?

[asharron]

I am in the same boat, but with a React application.

I have successfully got the children editor working in the Tabs dialog, but the editor button for switching tabs is not showing up for me and I believe I have the correct class names on the React Tabs component.

Did you manage to get it working for an Angular Tabs component @cwuerzlhuber ?

[minhle8088]

@cwuerzlhuber "did you manage to solve the issue?" There have been no responses from the team for the issues. I created custom components to move forward with my project.

"Where did you get the information?" From the published version's milestone.

Looks like there are no updates for Angular projects.

[gabrielwalt]

There's now a React Core Component implementation, and we currently also plan to create an Angular set of Core Components.