Expand my Community achievements bar.

SOLVED

Component is showing in content tree but not on page in AEM

Avatar

Level 3

Hi all

I am working on Touch UI and created a new simple component "New Hire".

The problem is this component is not showing on page when I drop it on the page but its showing in content tree.

I have verified template policies and enabled component for the template but still this component not showing on page. I am stuck with issue for many days.

 

Can you please suggest some idea to fix it

 

touseefk2181136_0-1676967035755.png

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@touseefk2181136 :

It seems you are integrating AEM with react js. You can check in react dev tools as whether the new hire react component is loading on to the page or not.

 

when it comes to react , you might be collating all the js files into 1 file and deploys to AEM under /etc or /app. Please check that configuration as your new component is part of that config as well.

 

Thanks,
Siva

View solution in original post

6 Replies

Avatar

Community Advisor

@touseefk2181136 

 

Hi , 

 

From your screenshot, i can see your component is added on page successfully. 

You can add below code to your sightly component, you can see .

<sly data-sly-test="${wcmmode.edit}">
<div class="cq-placeholder cq-marker-start" data-emptytext="New Hire Component">
</div>
</sly>

 

 

Thanks,
Siva

Avatar

Level 3

Thanks for replying @SivakumarKanoori 

 

This is my sightly component. Should I add your suggested code above my <a> tag ?

touseefk2181136_0-1676969955524.png

 

Avatar

Community Advisor

Yes. add it above <a> tag. That code executes only in author.

Thanks,
Siva

I have added. Now it is showing text "New Hire Component" only. 

touseefk2181136_0-1676970461410.png

Another thing, I noticed, this component is not initializing, I stuck with this issue for many days.

touseefk2181136_1-1676970686458.png

 

 

 

Avatar

Correct answer by
Community Advisor

@touseefk2181136 :

It seems you are integrating AEM with react js. You can check in react dev tools as whether the new hire react component is loading on to the page or not.

 

when it comes to react , you might be collating all the js files into 1 file and deploys to AEM under /etc or /app. Please check that configuration as your new component is part of that config as well.

 

Thanks,
Siva

Avatar

Level 5

One of the reason for this is when you have a sling model for your component and it is having some issues with the backend code. Try checking error logs or debug.