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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Adding two placeholders in responsiveGrid in AEM SPA.

Avatar

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

Avatar

Correct answer by
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

2 Replies

Avatar

Correct answer by
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.

Avatar

Level 1

Hi @Deleted Account,

 

calling my grid twice from parent react component wont work and is not working because placeholder(container) renders based on the AEM component "new" node, so my-grid has to be called from parent aem component which cannot happen directly in case of spa.

 

I can think of a workaround to add new my-grid or responsive-grid node programmatically when author authors the parent component  and display it from spa script as child components.

 

is there any proper way to do this?