Extending Responsive layout container to use webcomponent for UI rendering | Community
Skip to main content
A
aem_savy
Level 3
November 25, 2021
Solved

Extending Responsive layout container to use webcomponent for UI rendering

  • November 25, 2021
  • 1 reply
  • 1059 views

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

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by mayank0928

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

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

1 reply

mayank0928
mayank0928
Level 3
November 25, 2021

Hi @aem_savy 

 

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

    A
    aem_savyAuthor
    Level 3
    November 25, 2021

    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
      mayank0928Accepted solution
      Level 3
      November 26, 2021

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

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

        Terms & ConditionsAccessibility statement

        Loading footer...