AEM Component dialog with 240 fields | Community
Skip to main content
A
antoname8
April 5, 2024
Solved

AEM Component dialog with 240 fields

  • April 5, 2024
  • 2 replies
  • 1861 views

Hello, 

I'm developing AEM component with 240 fields for AEM 6.5, and dialog opening takes about 5-6 seconds.
I suppose that It's not good practice to have such many field per one dialog?
Also there is some dependencies between fields, I mean show/hide logic which increases complexity. 
Is there any recommendations for number limit fields per one dialog?

Many thanks! 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Raja_Reddy

Hi @antoname8 

Yes, having too many fields in a single dialog can negatively impact the performance of the AEM component. It is recommended to split the dialog into multiple tabs or dialogs to improve the user experience and reduce the load time.

There is no specific limit on the number of fields per dialog, but it is generally recommended to keep the number of fields to a minimum and group related fields together. This will make it easier for users to find the fields they need and reduce the complexity of the dialog.

In addition, you can also consider using lazy loading or asynchronous loading of the dialog to improve the performance. This will allow the dialog to load faster and reduce the initial load time.

Regarding the dependencies between fields, it is recommended to use a JavaScript framework like jQuery or AngularJS to handle the show/hide logic. This will make it easier to manage the dependencies and reduce the complexity of the dialog.

2 replies

Kamal_Kishor
Community Advisor
Kamal_KishorCommunity Advisor
Community Advisor
April 5, 2024

@antoname8 : I am not sure if there is any official limitation for maximum number of fields on a dialog (as it allows you to do it currently as well).

However, as you have observed this will make performance of your component poor while authoring it.

What is this component meant to do with so many fields? If there are some fields which has static or environment specific values only, you can decide to make them configurable in OSGi configs etc.

If you can provide some clarity on your use-case, someone may be able to guide you better.

 

Finally, consider splitting this component into multiple smaller logically different components if possible.

thanks.

    A
    antoname8Author
    April 5, 2024

    @kamal_kishor This component is intended to be configured for three different breakpoints(desktop, tablet, mobile). Mostly fields are RTE, dropdowns and Assets for this component. This all fields are only going to be changed through the dialog by authors, so that I can't make them configurable using OSGI.

      Raja_Reddy
      Community Advisor
      Raja_ReddyCommunity AdvisorAccepted solution
      Community Advisor
      April 5, 2024

      Hi @antoname8 

      Yes, having too many fields in a single dialog can negatively impact the performance of the AEM component. It is recommended to split the dialog into multiple tabs or dialogs to improve the user experience and reduce the load time.

      There is no specific limit on the number of fields per dialog, but it is generally recommended to keep the number of fields to a minimum and group related fields together. This will make it easier for users to find the fields they need and reduce the complexity of the dialog.

      In addition, you can also consider using lazy loading or asynchronous loading of the dialog to improve the performance. This will allow the dialog to load faster and reduce the initial load time.

      Regarding the dependencies between fields, it is recommended to use a JavaScript framework like jQuery or AngularJS to handle the show/hide logic. This will make it easier to manage the dependencies and reduce the complexity of the dialog.

        A
        antoname8Author
        April 5, 2024

        @raja_reddy Could you please suggest how I can achieve lazy loading or asynchronous loading of the dialog? Maybe this is what will suit 0requirements. 

          Raja_Reddy
          Community Advisor
          Raja_ReddyCommunity Advisor
          Community Advisor
          April 7, 2024

          Hi @antoname8 

          To achieve lazy loading or asynchronous loading of the AEM dialog, you can use client-side techniques such as JavaScript to load the dialog content dynamically when needed.

           

          // JavaScript code to handle lazy loading of dialog content $(document).ready(function() { // Click event handler for the placeholder component $('.lazy-dialog-placeholder').click(function() { // Check if the dialog content has already been loaded if (!$('.lazy-dialog-content').length) { // If not, fetch the dialog content asynchronously $.get('/path/to/dialog/fragment.html', function(data) { // Append the loaded content to the placeholder component $('.lazy-dialog-placeholder').append(data); }); } }); });

           

           

            Terms & ConditionsAccessibility statement

            Loading footer...