search

Adobe-Marketing-Cloud / aem-guides-wknd-events

Step by Step guide to creating a Single Page Application to use with AEM
48 stars 34 forks source link

[React] HierarchyPage Sling Model Issues #51

Closed pjbrof closed 5 years ago

pjbrof commented 5 years ago

Implemented HierarchyPage.java in a custom template of our application with the updated RESOURCE_TYPE reference.

Describe the issue rootUrl is displaying as null and parsys does not show in wcm edit mode if the Hierarchy sling model is invoked.

Where in the tutorial are you experiencing an issue?

In Chapter 1 in Step (Bonus) HierarchyPage Sling Model ->

Items in JSON are returning empty after implementing the core java files and dependencies

{
"title": "Test React Page",
"lastModifiedDate": 1552326095010,
"templateName": "reactpage",
"cssClassNames": "page basicpage",
"language": "en-US",
":itemsOrder": [],
":items": {},
":type": "/apps/myapp/components/structure/page"
}

No console errors or errors in the logs

priyadarshisamanta commented 5 years ago

Hey, I am having the same issue here. Do I need to make any changes to the HierarchyPageImpl class apart from the RESOURCE_TYPE to make it compatible with another application? I am pointing the resource type to the current page template.

godanny86 commented 5 years ago

It should be as simple as switching to match the resource type of your custom application page. You can check the status of Sling Models here: http://localhost:4502/system/console/status-slingmodels to verify that your HierarchyPage sling model is mapping to your resource type.

I would also look into simply generating your new project from: https://github.com/adobe/aem-spa-project-archetype which should take care of that for you. Side note, we are also currently in the process of updating this tutorial to start from the aem-spa-project-archetype

priyadarshisamanta commented 5 years ago

Hi @godanny86 , I have modified the resource type to the project page template (myapp/components/structure/page) and can see the sling mappings correctly as below.

com.jh.jhas.core.internal.models.HierarchyPageImpl - myapp/components/structure/page com.jh.jhas.core.internal.models.HierarchyPageImpl exports 'myapp/components/structure/page' with selector 'model' and extension '[Ljava.lang.String;@102f654e' with exporter 'jackson'

I can also see the root URL appearing correctly on page as below,

<meta property="cq:pagemodel_root_url" content="/content/myapp-rootpage.model.json"/>

However, the json is still empty as before

{
":path": "/content/myapp-rootpage/myapp-article",
"title": "MyApp Article Page",
":itemsOrder": [],
":items": {},
":type": "myapp/components/structure/app",
":hierarchyType": "page"
}

Can you please explain how can we trouble shoot the below code as I believe this may be causing the empty json problem

<meta property="cq:datatype" data-sly-test="${wcmmode.edit || wcmmode.preview}" content="JSON"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.edit}" content="edit"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.preview}" content="preview"/>
 <meta property="cq:pagemodel_root_url" data-sly-use.page="com.myapp.core.models.HierarchyPage" content="${page.rootUrl}"/>
godanny86 commented 5 years ago

Hi @priyadarshisamanta in the component /apps/myapp/components/structure/app can you verify that it has a sling:resourceSuperType that points to myapp/components/structure/page ?

godanny86 commented 5 years ago

Also on /content/myapp-rootpage/myapp-article should have a sling:resourceType set to myapp/components/structure/page. Only the root of the app should have a sling:resourcetype of myapp/components/structure/app.

Lastly, the Template controls the policies to output things like responsive grid and its quite confusing to edit manually (Editable Template support is expected soon). I would recommend looking at https://github.com/adobe/aem-spa-project-archetype to start your new project...

priyadarshisamanta commented 5 years ago

Hi @godanny86 ,

The sling resourcetypes are both exactly the same as you mentioned because I had created two separate templates, one for the root page (/conf/myapp/settings/wcm/templates/myapp-root-page) and another for the child pages (/conf/myapp/settings/wcm/templates/myapp-page) as mentioned in the tutorial. Also, assigned isRoot={Boolean} true for the root template policy. My main issue is with the json being empty and the below three lines of HTML which seems to break the page on author making it non-editable in edit mode.

<meta property="cq:datatype" data-sly-test="${wcmmode.edit || wcmmode.preview}" content="JSON"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.edit}" content="edit"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.preview}" content="preview"/>

(If I remove these lines, the React SPA does not work but the parsys becomes editable) I was checking this help article for the meta property definitions. I am not sure how should I be troubleshooting this as the logs are not showing any error.

I am trying to avoid creating a new archetype as we are attempting to migrate an existing project with Archetype 11 to react SPA.

Ankurkhare7861 commented 5 years ago

Hi Team,

We were also facing same issue. Finally we were able to resolve this issue by importing below package in core pom.xml-

Import-Package javax.inject;version=0.0.0 Import-Package