Hi @user47402 ,
To prevent the auto-scroll behavior in a TouchUI dialog when clicking on a nested multifield add button and maintain the current scroll position, you can indeed use JavaScript along with the Coral UI event handling mechanism provided by Adobe Experience Manager (AEM). Here's how you can achieve this:
(function ($, window, document, undefined) {
"use strict";
$(document).on("coral-collection:add", function (event) {
var $nestedMultifield = $(event.target);
var $nestedMultifieldItem = $(event.item);
// Check if the added item is inside a nested multifield
if ($nestedMultifield.hasClass("your-nested-multifield-class")) {
// Calculate the scroll position before adding the item
var scrollPosition = $(window).scrollTop();
// Add the item to the nested multifield
// Your logic to add the item goes here
// Restore the scroll position after adding the item
$(window).scrollTop(scrollPosition);
}
});
})(jQuery, window, document);
This JavaScript code listens for the coral-collection:add event, which is triggered when an item is added to a Coral UI collection (such as a multifield). It then checks if the added item is inside a nested multifield by inspecting the DOM hierarchy. If it is, it calculates the current scroll position before adding the item, adds the item to the multifield (you'll need to implement this logic), and then restores the scroll position to its original value.
To integrate this JavaScript code into your AEM project, you can create a client library that contains this script and include it on the appropriate pages where your TouchUI dialog is used. You can use a client library folder under /apps to organize your client-side scripts.
Regarding your question about using servlets, the example provided in the initial response demonstrates how you can create a basic servlet in AEM using the Sling framework. Servlets are typically used for server-side processing and handling of HTTP requests. While they are not directly related to preventing auto-scroll behavior in a TouchUI dialog, you can use servlets in conjunction with client-side JavaScript to perform server-side operations, such as saving data submitted from the dialog, validating input, or interacting with external systems.
If you have specific requirements or use cases where you need to utilize servlets in your AEM project, please provide more details, and I can provide further guidance or examples tailored to your needs.
