Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,159 likes

Total Posts

6,260 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,159 likes

Total Posts

6,260 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

09-05-2021

BlogImage.jpg

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.

AEM AEMEBlogSeeding Experience Manager