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
BedrockMission!

Learn More

View all

Sign in to view all badges

Include responsivegrid component in angular SPA AEM 6.5

Avatar

Avatar
Validate 1
Level 3
alissonxavier01
Level 3

Likes

16 likes

Total Posts

36 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 3
alissonxavier01
Level 3

Likes

16 likes

Total Posts

36 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
alissonxavier01
Level 3

11-06-2019

Hello Guys,

Does anyone know how I can include response grid inside angular component?

It is possible in HTL.

<sly data-sly-resource="${'responsiveContent' @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

Thanks

Alisson Xavier

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
Level 3
alissonxavier01
Level 3

Likes

16 likes

Total Posts

36 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 3
alissonxavier01
Level 3

Likes

16 likes

Total Posts

36 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
alissonxavier01
Level 3

17-06-2019

I have resolved the problem using this component.

We need to include

<aem-responsivegrid> in component template.

AEMResponsiveGridComponent

@adobe/cq-angular-editable-components - npm

Answers (3)

Answers (3)

Avatar

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

250 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

250 likes

Total Posts

262 posts

Correct Reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
Nikhil-Kumar
MVP

26-08-2020

@Jörg_Hoh  @Arun_Patidar @vanegi @BrianKasingli 

Do we anything similar for react as well ?

As mentioned by @alissonxavier01 we have libraries in Angular to have responsive grid component.

But I couldn't find Class: AEMResponsiveGridComponent as part of react libraries.

Arun_Patidar

you can find that in npn module ui.frontend.react\node_modules\@adobe\cq-react-editable-components

 

class ResponsiveGrid extends AllowedComponentsContainer {

    /**
     * The attributes that will be injected in the root element of the container
     *
     * @Returns {Object} - the attributes of the container
     */
    get containerProps() {
        let containerProps = super.containerProps;
        containerProps.className = (containerProps.className || '') + ' ' +  this.props.gridClassNames;
        return containerProps;
    }

    /**
     * The properties that will go on the placeholder component root element
     *
     * @Returns {Object} - the properties as a map
     */
    get placeholderProps() {
        let props = super.placeholderProps;
        props.placeholderClassNames = (props.placeholderClassNames || '') + ' ' +  PLACEHOLDER_CLASS_NAMES;
        return props;
    }

    /**
     * Returns the properties to add on a specific child component
     *
     * @Param   {Object} item     The item data
     * @Param   {String} itemKey  The key of the item
     * @Param   {String} itemPath The path of the item
     * @Returns {Object} The map of properties to be added
     */
    getItemComponentProps(item, itemKey, itemPath) {
        let attrs = super.getItemComponentProps(item, itemKey, itemPath);

        attrs.className = attrs.className || '';
        attrs.className += this.props.columnClassNames && this.props.columnClassNames[itemKey] ? ' ' + this.props.columnClassNames[itemKey] : '';

        return attrs;
    }
}

ResponsiveGrid.defaultProps = {
    title: 'Layout Container',
    // Temporary property until CQ-4265892 is addressed, beware not rely it
    _allowedComponentPlaceholderListEmptyLabel: 'No allowed components for Layout Container'
};

MapTo('wcm/foundation/components/responsivegrid')(withComponentMappingContext(ResponsiveGrid));

 

 

Nikhil-Kumar
Hey Arun, I have only 3 files and one folder... i.e. dist, CHANGELOG..md, package.json and README.md
Arun_Patidar
It is a minified file inside dist.
Nikhil-Kumar
Ok got it thanks 🙂

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,358 likes

Total Posts

3,228 posts

Correct Reply

918 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,358 likes

Total Posts

3,228 posts

Correct Reply

918 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

31-08-2020

<p>you can find that in npn module ui.frontend.react\node_modules\@adobe\cq-react-editable-components</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<li-code lang="javascript">class ResponsiveGrid extends AllowedComponentsContainer {

/**
* The attributes that will be injected in the root element of the container
*
* {Object} - the attributes of the container
*/
get containerProps() {
let containerProps = super.containerProps;
containerProps.className = (containerProps.className || '') + ' ' + this.props.gridClassNames;
return containerProps;
}

/**
* The properties that will go on the placeholder component root element
*
* {Object} - the properties as a map
*/
get placeholderProps() {
let props = super.placeholderProps;
props.placeholderClassNames = (props.placeholderClassNames || '') + ' ' + PLACEHOLDER_CLASS_NAMES;
return props;
}

/**
* Returns the properties to add on a specific child component
*
* {Object} item The item data
* {String} itemKey The key of the item
* {String} itemPath The path of the item
* {Object} The map of properties to be added
*/
getItemComponentProps(item, itemKey, itemPath) {
let attrs = super.getItemComponentProps(item, itemKey, itemPath);

attrs.className = attrs.className || '';
attrs.className += this.props.columnClassNames &amp;&amp; this.props.columnClassNames[itemKey] ? ' ' + this.props.columnClassNames[itemKey] : '';

return attrs;
}
}

ResponsiveGrid.defaultProps = {
title: 'Layout Container',
// Temporary property until CQ-4265892 is addressed, beware not rely it
_allowedComponentPlaceholderListEmptyLabel: 'No allowed components for Layout Container'
};

MapTo('wcm/foundation/components/responsivegrid')(withComponentMappingContext(ResponsiveGrid));</li-code>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Avatar

Avatar
Validate 1
Level 3
alissonxavier01
Level 3

Likes

16 likes

Total Posts

36 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 3
alissonxavier01
Level 3

Likes

16 likes

Total Posts

36 posts

Correct Reply

3 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
alissonxavier01
Level 3

11-06-2019

smacdonald2008

Can you help me ask it for product developers?

I need this so much because I am developing a component which needs to add component inside another one.

Like Carousel component included on AEM 6.5.