AEM Cloud Service - Extend React SPA Sling Model for Page Style System support | AEM Community Blog Seeding

[kautuk_sahni]

AEM Cloud Service - Extend React SPA Sling Model for Page Style System support by Sreekanth Choudry Nalabotu

Abstract

Goal
AEM Cloud Version : 2021.5.5257.20210505T101930Z-210429 (May 05, 2021)

Extend the JSON model eg. /content/eaem-cs-spa-style-system/us/en.model.json for supporting Page Style System in a React SPA. The following extension adds page level css classes configured via Style System in the model's children cssClassNames property eg.spa page basicpage eaempage--background-aero and necessary logic on the react side to apply it...

Solution
1) Create the project using following maven archetype command


mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype
-D archetypeVersion=24 -D aemVersion=cloud -D appTitle="Experience AEM SPA Style System" -D appId="eaem-cs-spa-style-system"
-D groupId="apps.experienceaem.sites.spa" -D frontendModule=react -D includeExamples=n -D includeDispatcherConfig=n


2) Create the CSS file for Page Style System classes /apps/eaem-cs-spa-style-system/clientlibs/clientlib-base/main.css with the following code, add it in /apps/eaem-cs-spa-style-system/clientlibs/clientlib-base/css.txt


.eaempage--background-gray{
background-color: #f1f1f1;
}

.eaempage--background-white{
background-color: #ffffff;
}

.eaempage--background-black{
background-color: #000000;
}

.eaempage--background-beige{
background-color: #EEE1C6;
}

.eaempage--background-aero{
background-color: #CAF1DE;
}

Read Full Blog

AEM Cloud Service - Extend React SPA Sling Model for Page Style System support

Q&A

Please use this thread to ask the related questions.

[aemey]

Hi,

Is it possible to apply styles at layout level in SPA. I tried your above example without writing any code and worked as expected in SPA page level. Is there any reference/documentation to point out layout level for SPA.

Thanks.