We have a problem from the stakeholders with a complex component, the component has a multifield with a number of product fields like sku, image path, description, etc. The authors wanted to make it collapsible but also wished if they could see the sku number in the Collapsible title 'Collapse' to expand/collapse and edit a particular sku. We are using AEM 5.6.1 version.
I made the fieldConfig 'collapsible' but I am trying to find a way to update the Collapse name appending sku number to it. Any suggestions for this problem would be helpful.
Solved! Go to Solution.
Views
Replies
Total Likes
You should create a JS client library and define category property of the client library node to "cq.widgets" for classic UI and "cq.authoring.dialog" for touch UI.
I would suggest you write custom JS function which reads the value of the input field inside SKU and then appends the value in the "innerText" of the collpase element.
Just make sure to write a function which only executes for a particular dialog as you may have regression issues with other dialogs.
Have you tried exploring use of cq:listeners? http://www.sgaemsolutions.com/2019/01/ootbcustom-cqlisteners-in-cqeditconfig.html
Trigger a js function based on say 'beforeInsert' and update the 'Collapse' fields for all authored values based on the sku.
(For touchui this implementation will have to be changed/updated and may not work)
See this (AEM 6+ version)- https://experienceleague.adobe.com/docs/experience-manager-64/developing/components/components-basic...
Thanks @Shubham_borole ,
I went through the suggested links but they help in which listeners I can use and what can implemented in them. I would like to check if the field-name/title 'Collapse' can be updated for the collapsed items to something like 'Collapse-0254' (collapse-<<sku_field_value>>) for the given example before authors expand so that they do not have to open number of multifield items if they a looking to update a particular sku.
I tried getting the dialog values on loadcontent listener function to check but I was not able to modify the title text of 'Collapse'.
You should create a JS client library and define category property of the client library node to "cq.widgets" for classic UI and "cq.authoring.dialog" for touch UI.
I would suggest you write custom JS function which reads the value of the input field inside SKU and then appends the value in the "innerText" of the collpase element.
Just make sure to write a function which only executes for a particular dialog as you may have regression issues with other dialogs.