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

SOLVED

Adding two placeholders in responsiveGrid in AEM SPA.

Nikhil-Kumar
Community Advisor
Community Advisor

Hi All,

Somehow I was able to extend the OOTB responsivegrid component in my AEM SPA architecture. So now I have a draggable parsys component which looks something like below. I want to have two place holders but it doesn't work. 

Nikhil-Kumar_0-1598602988235.png




Following code I am using:

mport React, { Component } from "react";
import {ResponsiveGrid, MapTo, withComponentMappingContext} from "@adobe/cq-react-editable-components";

require('./MyGrid.scss');

export class MyGrid extends ResponsiveGrid {
/**
* 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 || '') + ' MyGrid ' + this.props.gridClassNames;
return containerProps;
}

render() {
return (
<div {...this.containerProps}>
{ super.childComponents }
{ super.placeholderComponent }
</div>
)
}

}

MapTo('wknd-events/components/content/mygrid')(withComponentMappingContext(MyGrid));




I tried using { super.placeholderComponent } twice in another div just below the first one. But it didn't worked.

Though I have some workarounds, but looking for solution which is more accurate and feasible.



Thanks,
Nikhil

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

Hi,
It is not gonna work like this, you need to create a parent component and inside that you need to call MyGrid twice.

View solution in original post

1 Reply
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

Hi,
It is not gonna work like this, you need to create a parent component and inside that you need to call MyGrid twice.

View solution in original post