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

[JulioRo]

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 data-sly-test="${wcmMode.edit || wcmMode.design}">

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>

<sly data-sly-call="${clientlib.css @ categories='mySite.author'}"/>

</sly>

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

[Lokesh_Vajrala]

@JulioRo  I recommend checking this thread - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/needs-to-add-custom-js-on-... where similar question was asked and there are some good points shared.

[Shiv_Prakash_Patel · Accepted solution]

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,

[Uppari_Ramesh]

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

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

[Julkar__Naim]

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]

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.