Expand my Community achievements bar.

max min items core tabs component

Avatar

Level 3

Hi All,

 

Could you please let me know if it's possible to limit the addition of components to the core tabs component(proxy component )? If so, could you provide the process for doing so?

Satish2info_0-1724400144776.png

 

 

Thank you,

5 Replies

Avatar

Community Advisor

Hi @Satish2info 
The item is a type of multifield, you can try min max for multifield 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/multifield-max-and-min-ite... 

 

Since the Item is added from common, place, so you may need to add a hidden field in the tab, just to define min-max value otherwise hardcode in clientlibs js of tab dialog.
https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc... 



Arun Patidar

Avatar

Level 3

Hi @arunpatidar ,

Thank you for reply ,

Yes, it is a multifield, but it is rendering from  childreneditor.html instead of the dialog. I will define the maximum and minimum length, but where should I restrict these values and how should I display messages to authors indicating the allowed items?

Is there a built-in way to handle this in JavaScript, or do we need to write custom JavaScript to enforce these restrictions?

Avatar

Community Advisor

you need to write a custom javascript and load in the tab dialog using extraclientlibs property.

write a check on click event of ADD button and show a popup/inline error message or disable add button.

 



Arun Patidar

Avatar

Level 3

Hi @arunpatidar 

 

As per your previous communication where should i do the below changes

"Since the Item is added from common, place, so you may need to add a hidden field in the tab, just to define min-max value otherwise hardcode in clientlibs js of tab dialog.
https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc... "

which client lib you are referring above to restrict min and max?

 

Avatar

Community Advisor

Hi @Satish2info 
1. Proxy the tab component

2. update only the dialog with your clientlib(to perform min-max check) and hidden field with granite:data to configure limit.

3. Read min-max value from hidden fields data attribute in js and show either popup or inline message. 



Arun Patidar