Extending Responsive layout container to use webcomponent for UI rendering

[aem_geek]

Hi All,

Could some one guide me on how to use a web component  to extend AEM out of box responsive layout container. We have web components built using stenciljs and want to reuse Grid component to extend responsive container. 

You can refer to below link for Grid web component 

https://ionicframework.com/docs/api/grid

https://ionicframework.com/docs/layout/grid

Any help will be appreciated

[mayank0928]

Hi @aem_geek 

You can use the responsive container to create custom grids by selecting the layouts and also for mobile view, you can even set the breakpoints to have different look.

But, if your use-case is to extend the Responsive layout component, then you can extend the component by simply using the `sling:resourceSuperType` and override the HTML Script, and also you may need to use the Sling Model Delegation as well for overriding the back-end logic.

But I'd prefer you to first explore all the options around Responsive Layout Container Component, and then if you still have a requirement to override it, then you can do that too.

Have a look to this video also:

https://www.youtube.com/watch?v=OI3Eo4OAWCI

[aem_geek]

Hi Mayak,

Thanks for your response . I understand how to extend a component with sling resource type and sling model. What I would like to under stand is what are the specific properties/attributes in my custom grid web component I should take care of so that works in custom responsive layout component.

[mayank0928 · Accepted solution]

In that case, you can check the Git Repo for the functionality of responsive grid component

https://github.com/adobe/aem-core-wcm-components