Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

I am trying to create composite component in AEM SPA

Avatar

Level 1

I am unable to create composite component in SPA
I am trying the link below. If anyone has any example composite component please do share
https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa...

 

 

I have Image component

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

require('./Image.css');


export const ImageEditConfig = {

    emptyLabel: 'Image',

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

export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

export const AEMImage = withMappable(Image, ImageEditConfig);


Text Component

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2020 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

import sanitizeHtml from 'sanitize-html';
import sanitizeWhiteList from '../sanitize-html.whitelist';

import React, { Component } from 'react';
import extractModelId from '../../utils/extract-model-id';
import { withMappable } from '@adobe/aem-react-editable-components';


require('./Text.css');

const TextEditConfig = {
  emptyLabel: 'Text',

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

/**
 * Text React component
 */
class Text extends Component {
  get richTextContent() {
    return (
      <div
        id={extractModelId(this.props.cqPath)}
        data-rte-editelement
        dangerouslySetInnerHTML={{
          __html: sanitizeHtml(this.props.text, sanitizeWhiteList)
        }}
      />
    );
  }

  get textContent() {
    return <div>{this.props.text}</div>;
  }

  render() {
    return this.props.richText ? this.richTextContent : this.textContent;
  }
}

export default Text;
//export const AEMText = withMappable(Text, TextEditConfig);


On their own they are working fine but when I wrap them within my Composite component it fails

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

const ImageCard = () => {

  return (
    <Text/>
  );
};


export default withMappable(ImageCard);

MapTo('wknd-spa-react/components/imagecard')(ImageCard);



Please help me 

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

I understand that, if you are using existing code you still need to decide on an approach depending if your content exists or not:

How are you using the ImageCard component? Can you post your HTML, and confirm if you are adding the resourceType as I suggested?

 



Esteban Bustamante

View solution in original post

4 Replies

Avatar

Community Advisor

Hi, 

What option are you following? How is your project structured, and what does your content look like? 

Something that I think you are missing is the "resourceType" in the TextEditConfig from your Text and Image component. Besides that are you seeing any console errors? Did you try to use the code provided in the link you shared?



Esteban Bustamante

Component and its required content exist in the project.

I am able to add that Text and Image component on the page

 

No console errors

 

When I try to create a composite component combining image and text component to create a new component it fails.



My requirement is same as this GIF https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa...

Avatar

Correct answer by
Community Advisor

I understand that, if you are using existing code you still need to decide on an approach depending if your content exists or not:

How are you using the ImageCard component? Can you post your HTML, and confirm if you are adding the resourceType as I suggested?

 



Esteban Bustamante

Avatar

Administrator

@Rohan332552049n3r Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni