Avoid Override when save cq Dialog | Community
Skip to main content
maynors2427659
maynors2427659
Level 2
September 4, 2018

Avoid Override when save cq Dialog

  • September 4, 2018
  • 3 replies
  • 8067 views

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)

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>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

smacdonald2008
smacdonald2008
Level 10
September 4, 2018

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 Models

maynors2427659
maynors2427659Author
Level 2
September 4, 2018

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
maynors2427659Author
Level 2
September 5, 2018

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
smacdonald2008
Level 10
September 5, 2018

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.

maynors2427659
maynors2427659Author
Level 2
September 5, 2018

Sure, HERE is the code.

与伦吴69010423
与伦吴69010423
January 30, 2019

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

maynors2427659
maynors2427659Author
Level 2
February 1, 2019

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.

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
July 9, 2019

Hi maynors2427659​,

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

Thank you for your time.

Best Regards,

Ananta


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>

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;

    }

}

Arun Patidar
Terms & ConditionsAccessibility statement

Loading footer...