AEM Component dialog with 240 fields

[antoname8]

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! 

[Kamal_Kishor]

@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.

[antoname8]

@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 · Accepted solution]

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.

[antoname8]

@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]

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);
      });
    }
  });
});