Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Extend a Text Component in React AEM SPA

Avatar

Community Advisor

Hello Folks,

 

I am trying to extend Text core component and want to add additional pulgins in RTE.

So, I did it using Adobe recommended approach as below,

 

My Component content xml

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Custom Text"
    sling:resourceSuperType="core/wcm/components/text/v2/text"
    componentGroup="My Project - Content"/>

 

I have created a mapping in React under ui.frontend folder import-components.js file

 

const TestPropsEditConfig1 = {
  emptyLabel: "Custom Text",
  isEmpty: (props) => {
    return !props;
  },
};
MapTo("myproject/components/customtext")(TestProps1, TestPropsEditConfig1);

 

Then I extended Sling model using Sling Delegation pattern

 

public interface CustomText extends Text {
    
}

 

Impl class: 

 

@Model(
        adaptables = SlingHttpServletRequest.class,
        adapters = { CustomText.class, ComponentExporter.class },
        resourceType = CustomTextImpl.RESOURCE_TYPE,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
public class CustomTextImpl implements CustomText{

    static final String RESOURCE_TYPE = "myproject/components/customtext";

    @Self
    @Via(type = ResourceSuperType.class)
    private Text text;


    @Override
    public String getResourceType() {
        return RESOURCE_TYPE;
    }

    @Override
    public String getText() {
        return text.getText();
    }

    @Override
    public boolean isRichText() {
        return text.isRichText();
    }
}

 

 

I have extended lots of core components in past, never faced this issue. 

The main issue with above implementation is, when I drag and drop the component on page, It should render empty dialog field text from config and author should able to configure.

 

But, nothing appears on Page after drag and drop.

What could be the reason, please help?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello,

 

I am able to resolve this, by tweaking Sling Model.

  1. Instead of extending Text core component model in Custom Text component Interface, extended with ComponentExporter.

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hello,

 

I am able to resolve this, by tweaking Sling Model.

  1. Instead of extending Text core component model in Custom Text component Interface, extended with ComponentExporter.