Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Implementing Custom Hello World React Component in WKND Events

Avatar

Level 2

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,

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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

View solution in original post

5 Replies

Avatar

Level 10

I have asked the team that wrote this to answer here.

Avatar

Employee Advisor

Hi! Are you using AEM 6.5? I believe the Template Editor Support is only available in AEM 6.5+. The SPA Editor works in 6.4.2, 6.4.3 but does not have Template Editor Support ( the policies would need to be manually updated at the node level...)

Avatar

Level 2

I am using 6.4.4, how would I go about updating polices on the node level? Apologies, I am relatively new to AEM.

Avatar

Correct answer by
Employee Advisor

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

Avatar

Level 2

Thank you, updating the array in the xml file published the component.