Solved

How to Load clientlibs-author.css Only in AEM Author, Not in Publish?

Forum|Forum|11 months ago
February 7, 2025
5 replies
1332 views

I’m trying to include an author-only client library in AEM so that it loads only on Author and never on Publish. Right now, it’s getting loaded on Publish unless I manually disable it with ?wcmmode=disabled, which isn’t ideal.

I've tried Checking wcmmode (Edit/Design Mode)

</sly>

This only works when ?wcmmode=disabled is used, but I need something that actually detects if it’s Author vs. Publish.

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 Shiv_Prakash_Patel

Hi @julioro ,

To load a client library only on the AEM Author instance and never on Publish, use a Sling Model to check the run mode.

Sling Model:

package com.mysite.core.models;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.OSGiService;
import org.apache.sling.settings.SlingSettingsService;

import java.util.Set;

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class RunModeModel {

    @OSGiService
    private SlingSettingsService slingSettingsService;

    public boolean isAuthor() {
        Set<String> runModes = slingSettingsService.getRunModes();
        return runModes.contains("author");
    }
}

Update your HTL file to conditionally load the client library:

<sly data-sly-use.runModeModel="com.mysite.core.models.RunModeModel">
    <sly data-sly-test="${runModeModel.isAuthor}">
        <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
        <sly data-sly-call="${clientlib.css @ categories='mySite.author'}"/>
        <sly data-sly-call="${clientlib.js @ categories='mySite.author'}"/>
    </sly>
</sly>

Regards,

Lokesh_Vajrala

Community Advisor

@julioro I recommend checking this thread - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/needs-to-add-custom-js-on-each-and-every-page-in-aem/m-p/594786/highlight/true#M148527 where similar question was asked and there are some good points shared.

Shiv_Prakash_Patel

Accepted solution

Community Advisor

Hi @julioro ,

To load a client library only on the AEM Author instance and never on Publish, use a Sling Model to check the run mode.

Sling Model:

package com.mysite.core.models;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.OSGiService;
import org.apache.sling.settings.SlingSettingsService;

import java.util.Set;

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class RunModeModel {

    @OSGiService
    private SlingSettingsService slingSettingsService;

    public boolean isAuthor() {
        Set<String> runModes = slingSettingsService.getRunModes();
        return runModes.contains("author");
    }
}

Update your HTL file to conditionally load the client library:

<sly data-sly-use.runModeModel="com.mysite.core.models.RunModeModel">
    <sly data-sly-test="${runModeModel.isAuthor}">
        <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
        <sly data-sly-call="${clientlib.css @ categories='mySite.author'}"/>
        <sly data-sly-call="${clientlib.js @ categories='mySite.author'}"/>
    </sly>
</sly>

Regards,

Shiv Prakash

Uppari_Ramesh

Level 5

@julioro @shiv_prakash_patel This should be the best approach as it gives greater flexibility to check custom runmodes created with different names instead of author

ManviSharma

Adobe Employee

Hi Julio,

To ensure that a client library loads only on the Author instance and not on the Publish instance, you can employ the following approaches:

1. Solution Overview

The issue arises because the wcmMode (used in your Sightly/HTL code) is only valid for authoring modes like edit, design, or preview. However, the Publish instance doesn't inherently have these modes, so your client library might unintentionally load there.

The solution is to use a configuration or runtime check to explicitly detect whether the environment is Author or Publish.

2. Using the runmode Check

AEM provides a "runmode" feature that allows you to differentiate between Author and Publish environments. You can use this to conditionally load the client library.

HTL Example:

<sly data-sly-test="${wcmmode.disabled || runmode.author}">
  <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" />
  <sly data-sly-call="${clientlib.css @ categories='mySite.author'}" />
</sly>

Here:

runmode.author checks if the environment is Author.
The client library will only load if the condition evaluates to true.

Alternatively, you can use a backend logic in a service or Sling model to expose the runmode to your HTL.

Regards,
Manvi Sharma

J

Julkar__Naim

Level 2

Hi @julioro,

You can load clientlib only for author like this -

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly
            data-sly-test="${wcmmode.preview || wcmmode.edit}"
            data-sly-call="${clientlib.css @ categories='your-project.author.lib'}"
    />

    <sly
            data-sly-test="${wcmmode.preview || wcmmode.edit}"
            data-sly-call="${clientlib.js @ categories='your-project.author.lib'}"
    />
</sly>

SreenivasBr

Level 4

I dont understand why you have to use wcmmode=disabled in publish. It is not necessary to append this. This means something is wrong with your publish environment.

1. Solution Overview

2. Using the runmode Check

HTL Example:

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded