Call Custom JS logic from my specific Content Fragment Model

[Mahesh_Gunaje]

Hello Team,

I have an rte field in my Content Fragment models.(Note: Which is present in many CF models).

I want to call some custom js file whenever I open the CF. So, below article worked for me.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/ootb-validation-options-fo...

So, whenver I create a CF from  a CF model, my custom logic is execture.

Now, my query is I want to execute this logic from say: 10 CF models out of my 20 CF models (where rte field is present). How can I restirct my custom logic? Note: Custom js categories has: dam.cfm.authoring.v2, companyName.rte

cc @arunpatidar @BrianKasingli  @giuseppebaglio  @SantoshSai  @HrishikeshKagne 

Thanks in advance

[arunpatidar]

Hi @Mahesh_Gunaje 

You can find the model associated with multi-field and restrict execution of logic based on model. The JS will be loaded for all the model but your code will be executing only when field matches the model. 

[SantoshSai]

Hi @Mahesh_Gunaje,

You could do this in 2 ways:

1. Check the active CF model path before running your JS

When a Content Fragment opens in the editor, AEM passes the model path in the page’s URL or in the editor’s internal data.
You can use that to conditionally execute your script.

(function(document, $) {
    "use strict";

    // Execute only when CF authoring is active
    $(document).on("cf-editor-loaded", function() {
        try {
            // Retrieve model path (AEM adds it as `model` param in URL)
            const params = new URLSearchParams(window.location.search);
            const modelPath = params.get("model"); 
            // e.g. /conf/company/settings/dam/cfm/models/article

            // Allowed models list
            const allowedModels = [
                "/conf/company/settings/dam/cfm/models/modelA",
                "/conf/company/settings/dam/cfm/models/modelB",
                "/conf/company/settings/dam/cfm/models/modelC"
            ];

            // Run only if the current CF model is in the allowed list
            if (allowedModels.includes(modelPath)) {
                console.log("Running custom logic for allowed CF model:", modelPath);
                runCustomRTELogic();
            } else {
                console.log("CF model not in allowed list:", modelPath);
            }
        } catch (e) {
            console.error("Error reading model path:", e);
        }
    });

    function runCustomRTELogic() {
        // Your custom JS logic goes here
        alert("Custom logic triggered for this CF model!");
    }

})(document, Granite.$);

Here: cf-editor-loaded is a common safe hook if you’re using AEM 6.5’s CF Editor.

• If you use the OOTB category (dam.cfm.authoring.v2) + your custom clientlib (companyName.rte), ensure your clientlib includes a dependency on it, not vice versa.

• You can also check via Granite.author.ContentFragmentEditor.getModelPath() in newer versions.

2. Conditional load via extraClientlibs in model editor (AEM 6.5+)

If you have only a few specific CF models, you can assign a custom clientlib per model directly in CRXDE:

Path:

/conf/<project>/settings/dam/cfm/models/<modelname>/jcr:content

Add property:

Name: extraClientlibs
Type: String[]
Value: [ "companyName.rte" ]

That way, your JS runs only when editing those models.
No need for runtime filtering.

[Syed_Shaik · Accepted solution]

Hi @Mahesh_Gunaje, 

Check CF Model Path in JS (Recommended)

Since the same clientlib (dam.cfm.authoring.v2) loads for all CFs, you can conditionally run your JS only when the opened CF belongs to a specific model.

Step-by-step solution

(function ($, $document) {
"use strict";

$document.on("cfm-editor-loaded", function (event) {
// Get the Content Fragment model path
var editor = Granite.author.ContentFragmentEditor;
if (!editor) return;

var modelPath = editor.model.id; // e.g. /conf/we-retail/settings/dam/cfm/models/article
console.log("CF Model Path:", modelPath);

// Allow logic only for specific models
var allowedModels = [
"/conf/company-name/settings/dam/cfm/models/article",
"/conf/company-name/settings/dam/cfm/models/blog",
"/conf/company-name/settings/dam/cfm/models/news"
// add your 10 model paths here
];

if (allowedModels.includes(modelPath)) {
console.log("Executing custom RTE logic for:", modelPath);
// ✅ Your custom JS logic goes here
} else {
console.log("Skipping custom logic for:", modelPath);
}
});
})(Granite.$, jQuery(document));

Approach 2: Split Clientlibs (Optional Enhancement)

If you want cleaner separation (instead of conditionally checking inside JS):

1. Create two separate clientlibs:

   • /apps/companyName/clientlibs/rte-custom-limited

   • /apps/companyName/clientlibs/rte-custom-global

2. For your 10 specific models, reference the limited one manually via overlay (but this is more complex and less flexible than JS-based filtering).

Approach 3: Check via Model Name (Alternative)

If your model paths are long and you prefer names:

var modelName = editor.model.title; // e.g., "Article" if (["Article", "Blog", "News"]. includes(modelName)) { // Execute logic }