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

Extending Responsive layout container to use webcomponent for UI rendering

aem_geek
Level 2
Level 2

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

 

3 Replies
mayank0928
Level 3
Level 3

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
Level 2
Level 2

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.