Implementing Custom Hello World React Component in WKND Events

johna91

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,

Accepted Solutions (1)

Accepted Solutions (1)

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

Answers (4)

Answers (4)

dgordon86

Employee

25-04-2019

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...)