Level 3

Solved

Include responsivegrid component in angular SPA AEM 6.5

9 replies
5600 views
Translate

Hello Guys,

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

It is possible in HTL.

Thanks

Alisson Xavier

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

A

alissonxavier01Accepted solution

Level 3

I have resolved the problem using this component.

We need to include

<aem-responsivegrid> in component template.

AEMResponsiveGridComponent

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

arunpatidar

New Participant

you can find that in npn module ui.frontend.react\node_modules\@adobe\cq-react-editable-components
 
 
<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 && 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>

Translate

Arun Patidar

Nikhil-Kumar

New Participant

@joerghoh @arunpatidar @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.

Translate

arunpatidar

New Participant

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
     *
     * @2527888 {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
     *
     * @2527888 {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
     *
     * @90521   {Object} item     The item data
     * @90521   {String} itemKey  The key of the item
     * @90521   {String} itemPath The path of the item
     * @2527888 {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));

Translate

Arun Patidar

A

alissonxavier01AuthorAccepted solution

Level 3

I have resolved the problem using this component.

We need to include

<aem-responsivegrid> in component template.

AEMResponsiveGridComponent

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

Translate

A

AshishUp

New Participant

how did you do it exactly? <aem-responsivegrid> needs some props to be passed, how did you get the required props in the ts file? can you share some lines of code please. It would be really helpful.

Translate

A

alissonxavier01Author

Level 3

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.

Translate

AEMResponsiveGridComponent

AEMResponsiveGridComponent

Sign up

Login with SSO

Login to the community

Login with SSO