restrict responsive grid to allow component once

Hi @sudarshanv1,

1. Use a Sling Model Validator or Custom JS Validation in the Author UI

• You can write a custom JavaScript validator that checks the child components under your container component when authors try to add a new one.

• If the same component (by resourceType) already exists, show a Coral UI alert and prevent the add.

Example (clientlib JS in your container component):

(function(document, $) {
    "use strict";
    $(document).on("foundation-contentloaded", function() {
        $(".your-container-selector").each(function() {
            const container = $(this);
            const existing = container.find("[data-resource-type='project/components/content/banner']");
            
            // disable adding Banner again
            if (existing.length > 0) {
                container.find("[data-type='project/components/content/banner']")
                         .attr("disabled", true)
                         .addClass("cq-Editable-dom--disabled");
            }
        });
    });
})(document, Granite.$);

2. Backend Validation — Using Sling Model or Workflow Step

You can implement a custom Sling Model validation that runs on page activation or save event, to ensure only one instance of that component exists.

Example check (in Sling Model or Servlet):

🧠 This approach ensures repository-level validation—useful for publishing workflows or page save hooks.

3. Use an AEM Content Policy Property

You can store a custom policy property (like maxCount.banner=1) and enforce it either:

• In dialogue JavaScript during authoring, or

• In backend validation before activation.

This makes it configurable per template — best for scalable projects.

hi @sudarshanv1,

I believe this article could assist you in achieving your goal: https://www.albinsblog.com/2022/05/how-to-limit-number-of-components-in-aem-container-components.html  

Hi @sudarshanv1 ,

Template policies can control which components are allowed, but they cannot restrict how many times a component is added. To allow a component only once, you must add a custom validation: either implement a server-side Sling Validator, add a custom Granite UI dialog validator, or add logic in the component’s drop/insert handler to check if an instance already exists in the container and then block additional drops. In short: AEM doesn’t support “add only once” out of the box — you need custom validation or custom JS to enforce it.