Prevent auto Scroll to Top on touch ui Dialog

[user47402]

Hi,

How to Prevent auto Scroll touch ui Dialog to the top when we click on the nested multifield add button.

My nested multifield is under the accordion.

How to stop auto scroll to the top of dialog and focus on my current position on the dialog?.

Please help me.

Thanks.

@arunpatidar 

@lukasz-m 

[EstebanBustamante]

Hi, 

I am not fully understanding what you are trying to do, but the scroll is usually triggered when an element is "focused". In any case, you could customize it to scroll to any position by using something like:

function autoScroll() {
    var div = document.getElementById("mydiv");
    div.style.display = '';
    var top = div.offsetTop;
    if(window.scrollTop != top) {
        window.scrollTo(0, top);
    }
}

Hope this helps.

[aanchal-sikka]

@user47402 

Similar issue was also reported earlier. I am unable to find that thread right now.

• Which AEM version are you using?
• Is the issue reproducible in AEM without custom code?
  • Please raise an Adobe ticket, if its reproducible without custom code.

[user47402]

I have created three levels of nested multifield components with coral Ui 3. and my multifield comes under granite/ui/components/coral/foundation/accordion,  so here auto-scroll to the top is working. That auto-scroll should not work here, it should on the same place when clicking on the add button on multifields. But if I don't use accordion and only use container then it's fine that auto scroll is not worked here.

So, please help me to prevent the auto-scroll of the dialog under accordion for multifields.

@aanchal-sikka 

• AEM version 6.5.16.0
• Yes, this issue is reproducible in AEM without custom code.

@EstebanBustamante I tried your suggestion but it did not work for me.

Please let me know if you guys have any solutions.

Thanks.

[gkalyan]

@user47402 You can try event.preventDefault() for the button.

[HrishikeshKa]

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 use JavaScript along with the Coral UI event handling mechanism provided by Adobe Experience Manager (AEM). Below is an example of how you can achieve this:

package com.example.core.servlets;

import org.apache.sling.api.servlets.HttpConstants;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.apache.sling.api.servlets.SlingHttpServletRequest;
import org.apache.sling.api.servlets.SlingHttpServletResponse;
import org.osgi.service.component.annotations.Component;

import javax.servlet.Servlet;
import java.io.IOException;

@Component(service = Servlet.class,
           property = {
               "sling.servlet.methods=" + HttpConstants.METHOD_POST,
               "sling.servlet.resourceTypes=" + "your/resource/type",
               "sling.servlet.selectors=" + "your-selector",
               "sling.servlet.extensions=" + "html"
           })
public class YourServlet extends SlingAllMethodsServlet {

    @Override
    protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
        // Your servlet logic here
    }
}

This servlet code is a basic example of how you can create a servlet in AEM. Replace "your/resource/type" and "your-selector" with the appropriate values for your use case.

This servlet listens for POST requests with the appropriate resource type and selector and implements the doPost method where you can place your servlet logic.

Remember to deploy this servlet to your AEM instance and configure it according to your requirements.

Please note that this servlet is a basic template, and you may need to modify it to fit your specific use case and requirements. Additionally, ensure that you handle any exceptions and error cases appropriately in your servlet code.

[HrishikeshKa]

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.

[kautuk_sahni]

@user47402 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[user47402]

Hi @kautuk_sahni 

I haven't found solutions for this yet, so any help will be great for me.

Thanks.