Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

I have created one SPA component but it is not appearing on page

Avatar

Level 5

I have created spa component it is appearing in drag and drop section but in content tree I cant find my component. Even I checked content/ it is visible but on page it is not.​

 

Before writing react code I could see parsys of component and even author it but after writing react code and Java Code it is not comming 

 

 

Code

@Model(
    adaptables = SlingHttpServletRequest.class,
    adapters = { RonnieModel.class,
        ComponentExporter.class },
    resourceType = RonnieTestModelImpl.RESOURCE_TYPE,
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class RonnieTestModelImpl implements RonnieTestModel{
    
    static final String RESOURCE_TYPE = "wknd-spa-react/components/ronnietest";

    @ValueMapValue
    private String description;
    
    @Override
    public String getExportedType() {
        return RonnieTestModelImpl.RESOURCE_TYPE;
    }

    @Override
    public String getDecription() {
        return description;
    }


}

 

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

export const CustomEditConfig = {

    emptyLabel: 'RonnieTestComponent',

    isEmpty: function(props) {
        return !props || !props.description || props.description.trim().length < 1;
    }
};


export default class RonnieTest extends Component {
	
	render(){
		if(CustomEditConfig.isEmpty(this.props)) {
            return null;
        }
        
        return(
	<div className="ronnie-test-component">
		<div className="description-text">{this.props.description}</div>
	</div>
	
);
	}
}
MapTo('wknd-spa-react/components/ronnietest')(RonnieTest, CustomEditConfig);

 

Import component is also done as
RonnieTest Folder and RonnieTest.js is inside the folder

import './RonnieTest/RonnieTest';

1 Accepted Solution

Avatar

Correct answer by
Level 2

Please check the json response from the exported model once .. that your props are correct or not.. if your data is ready we can look into react component.. !!

..../content/..../../ page.model.json like this...

you can get into documentation page ..

 

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

 

 

RajarshiRoy_0-1662028212183.png

 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 2

Please check the json response from the exported model once .. that your props are correct or not.. if your data is ready we can look into react component.. !!

..../content/..../../ page.model.json like this...

you can get into documentation page ..

 

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

 

 

RajarshiRoy_0-1662028212183.png

 

Avatar

Community Advisor

Import components from 

/ui.frontend/src/components/import-components.js