Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to create a custom container component with functional component in React and AEM Cloud SDK

Avatar

Level 1

Hey people, so I'm trying to create a custom container component with responsive grid or parsys inside of it, so I can have a dialog to change the container background color and still be able to put others custom components inside the container. I tried several tutorials but had no success, could someone help me on doing this custom container component using the functional components in React and the latest AEM Cloud SDK?

Topics

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @caiosheperd 

Set up your development environment:

Install Node.js and npm.
Install the AEM Cloud SDK CLI.
Create a new project using the AEM Cloud SDK CLI:

aem-sdk init
shell
Create a new functional component for your custom container:

Create a new file called CustomContainer.js in the src/components directory.
Implement your custom container component using functional components and hooks. Here's an example:
import React from 'react';

const CustomContainer = ({ backgroundColor, children }) => {
const containerStyle = {
backgroundColor: backgroundColor || 'transparent',
padding: '20px',
};

return <div style={containerStyle}>{children}</div>;
};

export default CustomContainer;
jsx
Create a dialog for your custom container:

Create a new file called CustomContainerDialog.js in the src/dialogs directory.
Implement your dialog using the Coral UI components. Here's an example:
import React from 'react';
import { Dialog, TextField } from '@adobe/react-spectrum';

const CustomContainerDialog = ({ isOpen, onClose, onChangeBackgroundColor, backgroundColor }) => {
return (
<Dialog isOpen={isOpen} onClose={onClose}>
<TextField
label="Background Color"
value={backgroundColor}
onChange={onChangeBackgroundColor}
/>
</Dialog>
);
};

export default CustomContainerDialog;
jsx
Use your custom container component in a page:

In your page component, import and use your custom container component. Here's an example:
import React, { useState } from 'react';
import CustomContainer from '../components/CustomContainer';

const MyPage = () => {
const [backgroundColor, setBackgroundColor] = useState('`#ffffff`');

const handleBackgroundColorChange = (value) => {
setBackgroundColor(value);
};

return (
<div>
<CustomContainer backgroundColor={backgroundColor}>
{/* Add your custom components here */}
</CustomContainer>
</div>
);
};

export default MyPage;
jsx

Build and deploy your project:

Run npm run build to build your project.
Deploy the built project to AEM using the AEM Cloud SDK CLI.

Please refer 
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/cont... 
https://github.com/adobe/aem-project-archetype/issues/415 



View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @caiosheperd 

Set up your development environment:

Install Node.js and npm.
Install the AEM Cloud SDK CLI.
Create a new project using the AEM Cloud SDK CLI:

aem-sdk init
shell
Create a new functional component for your custom container:

Create a new file called CustomContainer.js in the src/components directory.
Implement your custom container component using functional components and hooks. Here's an example:
import React from 'react';

const CustomContainer = ({ backgroundColor, children }) => {
const containerStyle = {
backgroundColor: backgroundColor || 'transparent',
padding: '20px',
};

return <div style={containerStyle}>{children}</div>;
};

export default CustomContainer;
jsx
Create a dialog for your custom container:

Create a new file called CustomContainerDialog.js in the src/dialogs directory.
Implement your dialog using the Coral UI components. Here's an example:
import React from 'react';
import { Dialog, TextField } from '@adobe/react-spectrum';

const CustomContainerDialog = ({ isOpen, onClose, onChangeBackgroundColor, backgroundColor }) => {
return (
<Dialog isOpen={isOpen} onClose={onClose}>
<TextField
label="Background Color"
value={backgroundColor}
onChange={onChangeBackgroundColor}
/>
</Dialog>
);
};

export default CustomContainerDialog;
jsx
Use your custom container component in a page:

In your page component, import and use your custom container component. Here's an example:
import React, { useState } from 'react';
import CustomContainer from '../components/CustomContainer';

const MyPage = () => {
const [backgroundColor, setBackgroundColor] = useState('`#ffffff`');

const handleBackgroundColorChange = (value) => {
setBackgroundColor(value);
};

return (
<div>
<CustomContainer backgroundColor={backgroundColor}>
{/* Add your custom components here */}
</CustomContainer>
</div>
);
};

export default MyPage;
jsx

Build and deploy your project:

Run npm run build to build your project.
Deploy the built project to AEM using the AEM Cloud SDK CLI.

Please refer 
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/cont... 
https://github.com/adobe/aem-project-archetype/issues/415 



Avatar

Administrator

@caiosheperd Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni