Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
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.



Arun Patidar

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.



Arun Patidar

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?