Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Avoid Override when save cq Dialog

maynors2427659
Level 2
Level 2

I am developing a TABS component, in the cq dialog I have a multifield where you can add the TAB title, then in the HTL it will create a responsive grid inside the item# path of the multifield (as shown below)

rg.PNG

The problem is when I try to do anything later on the cq dialog, I go and for example, I add a new Tab, and somehow the responsivegrid(tabcontent) is gone for all the tabs, I am guessing that the cq dialog overrides the items of the multifield everytime you close it.

I need to prevent this "tabcontent" from being deleted, how can I do that?

HTL:

<sly data-sly-list.tabItem="${tabs.items}">

   <section data-title="${tabItem.title}" class="cmp-tabs__tabSection
  ${tabItemList.first ? 'is-active' : ''} ${wcmmode.edit ? 'author' : ''}"
   id="${uniqueElemId.uniqueId}-tab-${tabItemList.index}-tabsection" role="tabpanel" aria-labelledby="${uniqueElemId.uniqueId}-tab-${tabItemList.index}"
   aria-hidden="${tabItemList.first ? 'false' : 'true'}"
   aria-selected="${tabItemList.first ? 'true' : 'false'}">

   <div class="tabContent" data-sly-resource="${'tabs/item{0}/tabcontent' @ format=tabItemList.index,
  resourceType='wcm/foundation/components/responsivegrid'}"></div>

   </section>

</sly>

CQ DIALOG

<tabs
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
   composite="{Boolean}true"
   fieldLabel="Tabs">

   <field
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/container"
   name="./tabs">

   <items jcr:primaryType="nt:unstructured">

   <title
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
   fieldDescription="Enter the tab title"
   fieldLabel="Title"
   name="./title"
   required="{Boolean}true"/>

   </items>

   </field>

</tabs>

1 Reply
smacdonald2008
Level 10
Level 10

Can you post a video of your component so we can understand how its functioning.  I am not completely sure what you mean by: "

I need to prevent this "tabcontent" from being deleted, how can I do that?"

See this article that works with Multifield and Sling Models - i am seeing no issue here working with Multifield -- Adobe Experience Manager Help | Creating a HTL Repeating Data Set 6.4 Component that uses Sling Mode...

maynors2427659
Level 2
Level 2

Thanks for answering, here is a video with current behavior, I tried setting the flag deleteHint to false  to the multifield, keeps the content but the problem is when I try to delete something, does not delete anything.

maynors2427659
Level 2
Level 2

HTL CODE:

<sly data-sly-list.tabItem="${tabs.items}">

   <section data-title="${tabItem.title}" >

        <div class="tabContent" data-sly-resource="${'/tabs/tab{0}/tabcontent' @ format=tabItem.index,
  resourceType='wcm/foundation/components/responsivegrid'}"></div>

   </section>

</sly>

smacdonald2008
Level 10
Level 10

Can you wrap up your example into a package and place on Google drive so community can download it and use it. We may be able to find the solution with the package.  I want to test this.

与伦吴69010423
Level 1
Level 1

I have the same problem as you. Have you solved your problem? If so, can you tell me how.

maynors2427659
Level 2
Level 2

Hi, no i was unable, I saved the responsive grid out of the tabcontent and associated it with an id. That's the only way I found. However the problem with this approach is if you delete the tabcontent then the responsive grid associated with it won't be deleted.

ananta99
Level 2
Level 2

Hi maynors2427659​,

I am facing the same problem. Did we get any solution to this problem?

Thank you for your time.

Best Regards,

Ananta

Arun_Patidar
Community Advisor
Community Advisor

If you will be saving tabcontent items inside multifield items node(tabs), it gets removed.

Save tabcontent item outside multifield property(tabs) node.

e.g.

<h2>This is a Tab component</h2>

<sly data-sly-use.tabs="com.acc.aem64.core.models.utils.MultifieldModel" data-sly-list="${tabs.items.listChildren}">

<div>

<h3>${item.title}</h3>

<div class="tabContent" data-sly-resource="${'{0}_tabcontent-{1}'   @ format=[resource.name, item.id],

resourceType='wcm/foundation/components/responsivegrid'}"></div>

</div>

</sly>

tab1.png

Java

package com.acc.aem64.core.models.utils;

import javax.inject.Inject;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.models.annotations.DefaultInjectionStrategy;

import org.apache.sling.models.annotations.Model;

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

public class MultifieldModel {

    @Inject

    private Resource tabs;

    public Resource getItems() {

        return tabs;

    }

}