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

[touseefk2181136]

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

[SivakumarKanoori]

@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>

[touseefk2181136]

Thanks for replying @SivakumarKanoori 

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

[SivakumarKanoori]

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

[touseefk2181136]

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

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

[SivakumarKanoori · Accepted solution]

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

[Love_Sharma]

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.