Adobe Experience Manager Sites & More

SiriusRex · 1/26/21

We have a unique situation where our AEM content is reverse proxied into an HTML container. This outer container holds the <head> tags for the page, as well as all the CSS and JS calls for the site.

While authoring in AEM, I want to be able to use one of the CSS files to help authors see the final styling. I have a solution that is 90% of the way there, however, it fails when an author chooses the "View as published" option. I'm using this conditional statement:

This works for editing and the preview mode that's available on the editing page. I initially thought I could add in a condition for wcmmode.disabled, as the "view as published" mode sets the wccmmode.disabled cookie to "true." However, I've discovered that when you actually publish the page, the wcmmode.disabled cookie is also set to "true." So the CSS include gets added to the final page HTML, meaning that I now have two calls for the same CSS - one in the <head> of the container HTML, and one from my page template.

I'm hoping someone might have an idea of how to separate the "view as published" experience from the actual published experience. I haven't found any documentation, and the "view as published" option seems to bypass any connection to the authoring environment.

VeenaVikraman · 1/26/21

@SiriusRex

Thanks for the detailed query. It helps to get to the issue more precisely. So as you understood correctly , since the AEM WCMMode disabled and preview are mirrors of each other. It is provided so that we can see the Author changes in preview mode before actually going to Publish. So what I feel which will help you differentiate between Author and Publish is to check the runmode. If you are using sightly , we cannot get it directly in the HTL file, instead you can write a server side JS and get this fixed . I could pull some sample from www for you https://aem4beginner.blogspot.com/how-to-check-aem-server-runmode-in

So once you have your runmodes, you can add the clientlibs for the author server and publish server in the test condition so that it will load only when the right servers are running.

Hope this helps . Let me know if you need more help on this.

Thanks

Veena

View solution in original post

VeenaVikraman · 1/26/21

@SiriusRex

Thanks for the detailed query. It helps to get to the issue more precisely. So as you understood correctly , since the AEM WCMMode disabled and preview are mirrors of each other. It is provided so that we can see the Author changes in preview mode before actually going to Publish. So what I feel which will help you differentiate between Author and Publish is to check the runmode. If you are using sightly , we cannot get it directly in the HTL file, instead you can write a server side JS and get this fixed . I could pull some sample from www for you https://aem4beginner.blogspot.com/how-to-check-aem-server-runmode-in

So once you have your runmodes, you can add the clientlibs for the author server and publish server in the test condition so that it will load only when the right servers are running.

Hope this helps . Let me know if you need more help on this.

Thanks

Veena

lucian_nicolaescu · 2/4/21

You will need to make your logic based on the runmodes.

The run modes are available like:

org.apache.sling.settings.SlingSettingsService.getRunModes() (it will return a Set, so you can check with getRunModes().contains("publish"))

kautuk_sahni · 3/10/21

@lucian_nicolaescu, Thank you for posting the solution with AEM Community. This helps in posterity. Keep the wonderful contribution going (both as learner and contributor).

Adobe Experience Manager Sites & More

Distinguishing between "view as published" and actually published for custom CSS

Kautuk Sahni

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe