AEM Cloud Service - Custom Branding Logo Title And Env Indicator in Unified Shell

Adobe Experience Manager 2024.7.17258.20240726T172406Z-240700

Add a Custom Logo, Title and Environment Indicator in Unified Shell header of Cloud Services AEM. This configuration is provided in env variable EAEM_US_CONFIG_JSON

Demo | Package Install | Github 

1) Create a project using maven archetype...

set JAVA_HOME=C:/Progra~1/Java/jdk-11.0.6

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate -D archetypeGroupId=com.adobe.aem 
-D archetypeArtifactId=aem-project-archetype -D archetypeVersion=50 -D aemVersion="cloud" 
-D appTitle="Experience AEM Unified Shell Logo" -D appId="eaem-unified-shell-logo" 
-D groupId="apps.experienceaem" -D frontendModule=none -D includeExamples=n -D includeDispatcherConfig=n

2) Set the env variable EAEM_US_CONFIG_JSON with config data as json...

{
    "logo": "/apps/eaem-unified-shell-logo/clientlibs/custom-logo/logo.png",
    "title": "Experiencing Adobe Experience Manager",
    "env": "eaem rde"
}

3) Create a servlet apps.experienceaem.core.servlets.UnifiedShellCustomConfigServlet to read the config data and return as json response...

package apps.experienceaem.core.servlets;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.osgi.service.component.annotations.Activate;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Modified;
import org.osgi.service.metatype.annotations.AttributeDefinition;
import org.osgi.service.metatype.annotations.AttributeType;
import org.osgi.service.metatype.annotations.Designate;
import org.osgi.service.metatype.annotations.ObjectClassDefinition;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;

@Component(
    immediate = true,
    service = Servlet.class,
    property = {
        "sling.servlet.methods=GET",
        "sling.servlet.paths=/bin/eaem/usconfig"
    }
)
@Designate(ocd = UnifiedShellCustomConfigServlet.USConfiguration.class)
public class UnifiedShellCustomConfigServlet extends SlingAllMethodsServlet {
    private static final Logger LOGGER = LoggerFactory.getLogger(UnifiedShellCustomConfigServlet.class);

    private String usConfigJson = "{}";

    @Activate
    @Modified
    protected void activate(final USConfiguration config) {
        usConfigJson = config.usConfigJson();
    }

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)
        throws ServletException, IOException {

        try{
            response.setContentType("application/json");
            response.getWriter().println(usConfigJson);
        }catch(Exception e){
            throw new ServletException("Error getting unified shell config json", e);
        }
    }

    @ObjectClassDefinition(name = "Experience AEM Unified Shell Custom Configuration")
    public @interface USConfiguration {
        @AttributeDefinition(
            name = "Config Json",
            description = "Json Configuration of logo, env etc",
            type = AttributeType.STRING
        )
        String usConfigJson() default "{}";
    }
}

4) The osgi config for reading unified shell configuration env variable is added in ui.config\src\main\content\jcr_root\apps\eaem-unified-shell-logo\osgiconfig\config.author\apps.experienceaem.core.servlets.UnifiedShellCustomConfigServlet~eaem.cfg.json

{
  "usConfigJson": "$[env:EAEM_US_CONFIG_JSON]"
}

5) Add the clientlib /apps/eaem-unified-shell-logo/clientlibs/custom-logo with categories=aem.unifiedshell and following code in customize-logo.js

(function () {
    if (!window.UNIFIED_SHELL || !window.UNIFIED_SHELL.isChildOfUnifiedShell()){
        return;
    }

    const US_CONFIG_URL = "/bin/eaem/usconfig";

    let usHeader = window.parent.document.querySelector("header");

    usHeader.style.display = "none";

    $.ajax(US_CONFIG_URL).done( json => {
        let heroTitle = usHeader.getElementsByClassName("hero-title");

        if(json["title"] && heroTitle && heroTitle.length > 0){
            heroTitle[0].innerHTML = json["title"];
        }

        let heroImage = usHeader.getElementsByClassName("hero-svg");

        if(json["logo"] && heroImage && heroImage.length > 0){
            heroImage[0].src = json["logo"];
        }

        if(json["env"]){
            const INTERVAL = setInterval(function(){
                let envLabel = usHeader.getElementsByClassName("colorBadge");

                if(envLabel && envLabel.length > 0){
                    clearInterval(INTERVAL);
                    envLabel[0].innerHTML = json["env"];
                    usHeader.style.display = "block";
                }
            }, 250);
        }else{
            usHeader.style.display = "block";
        }
    });
}());