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

Implementing Custom Hello World React Component in WKND Events

Avatar

Avatar
Validate 1
Level 1
johna91
Level 1

Likes

0 likes

Total Posts

12 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
johna91
Level 1

Likes

0 likes

Total Posts

12 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile
johna91
Level 1

25-04-2019

Hey All,

I'm trying to integrate Getting Started with the AEM SPA Editor - Hello World Tutorial

with the finished version of the app from the WKND Events for React and AEM SPA Editor tutorial but I’m running into a road block adding the hello world component, I’ll explain details below:

  • I have completed the WKND Events for React and AEM SPA Editor and the code for that can be found here Chapter 3 on GitHub
  • Here is my Helloworld.java for the sling model and its location: 1739997_pastedImage_0.png1739998_pastedImage_1.png
  • Here is /helloworld/.content and its location:
    • 1740026_pastedImage_5.png
    • 1740027_pastedImage_6.png
  • Here is the react component HelloWorld.js:
    • 1740028_pastedImage_8.png
  • My roadblock is in the Getting Started with the AEM SPA Editor - Hello World Tutorial at the beginning of the section titled Putting it all together.
  • When I use template mode to add the policy for the custom react component there is no layout to add it too.

Can anyone help me with this?

Thanks All,

View Entire Topic

Avatar

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Employee
dgordon86
Employee

Likes

49 likes

Total Posts

73 posts

Correct Reply

26 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
dgordon86
Employee

25-04-2019

Hey no problem!

So in your source code look at: ui.content/src/main/content/jcr_root/conf/wknd-events/settings/wcm/policies/.content.xml this is the node representation of all the policies for that template

You should see an XML node like the following:

<default

  jcr:lastModified="{Date}2017-12-07T15:43:22.777+05:30"

  jcr:lastModifiedBy="admin"

  jcr:primaryType="nt:unstructured"

  jcr:title="WKND Event (React) Template Root Policy"

  sling:resourceType="wcm/core/components/policy/policy"

  components="[/libs/wcm/foundation/components/responsivegrid,group:WKND Events - Content]">

This is the policies for the Layout Container, You would want to update the components array [ ] to include your hello world component, So something like:

components="[/libs/wcm/foundation/components/responsivegrid,group:WKND Events - Content,/apps/wknd-events/components/content/helloworld]">

An alternative is you could also change the componentGroup for your HelloWorld component to be "WKND Events - Content" and then it will get pulled in automatically.

Below is editing it in CRXDE Lite manually (although keep in mind, I think the way the project is structured, anything in /conf will get overwritten automatically by the next code deployment)

1740185_pastedImage_4.png