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
BedrockMission!

Learn More

View all

Sign in to view all badges

Unable to see Allowed Components list in custom layout container

Avatar

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
srikanthp689160
Level 3

24-01-2019

Hi Team,

We are trying to create custom Layout Container(wcm/foundation/components/responsivegrid) component in AEM 6.4 to have fixed width and full width layouts in our project. Below are the steps i followed to create an editable template but unable to see Allowed Components even after creating a policy and configuring components.

  1. Create an editable template, open it to find a Layout Container(wcm/foundation/components/responsivegrid)
  2. Create a policy at Layout Container root level to allow custom Layout Container
  3. Drag and drop custom Layout Container
  4. Create and set another policy to allow project specific components for example, title, text, etc...
  5. Unlock custom Layout Container, i do not see allowed components here, whereas for OOTB Layout Container, am able to see Allowed Components list.
  6. I believe this section is necessary to edit component policies where style system configurations can be set

Attached screenshot of we.retail hero-page template where it works

1675370_pastedImage_1.png

Note: sling:resourceSuperType of our custom layout container component is wcm/foundation/components/responsivegrid, we have just added dialog fields for full-width and fixed-width to add bootstrap classes container-fluid and container respectively.

Can someone please let us know if the above approach is correct or could you please point me to references to achieve our requirement.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 50
Employee
berliant
Employee

Likes

207 likes

Total Posts

315 posts

Correct Reply

98 solutions
Top badges earned
Give Back 50
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile

Avatar
Give Back 50
Employee
berliant
Employee

Likes

207 likes

Total Posts

315 posts

Correct Reply

98 solutions
Top badges earned
Give Back 50
Give Back 5
Give Back 3
Give Back 25
Give Back 10
View profile
berliant
Employee

24-01-2019

As per your post, the goal is to have "have fixed width and full-width layouts".

I don't think that you really need a custom layout component. In your editable template, you can add a layout container and then set teh width in Layout mode.

More staff can be applied to a layout container with a style. You can review this approach in WKND sample project:

https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-wknd-tutorial-develop/part...

Answers (10)

Answers (10)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,282 likes

Total Posts

3,156 posts

Correct Reply

891 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,282 likes

Total Posts

3,156 posts

Correct Reply

891 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

14-09-2019

Hi,

The container core component is meant to be used to combine 2 or more components like lego blocks.

To set policies and allow components, you should be using Layout Container component, this component can be found inside  General group.

Avatar

Avatar
Boost 1
Level 1
jerfree
Level 1

Like

1 like

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
jerfree
Level 1

Like

1 like

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
jerfree
Level 1

13-09-2019

I'll mention if you use ArchType 20 (I haven't checked earlier versions) to create an AEM project it will create a container component in your project's apps directory that uses a sling:resourceSuperType of the core components container object.

If you try to use that container you see the issues mentioned above.

If the OOTB layout container should be used, then why is the container component generated within the project when it lacks the functionality to show the allowed components within the container and doesn't let you set policies on those components?

It also doesn't work with the content exporter, if I view the model.json of a page, any components in my apps container aren't included, while they are when using the OOTB layout container.

Avatar

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
srikanthp689160
Level 3

30-01-2019

Thanks everyone for the response. Followed the approach to handle it with the help of style system.

Thanks & Regards,

Srikanth Pogula.

Avatar

Avatar
Give back 300
MVP
Gaurav-Behl
MVP

Likes

243 likes

Total Posts

1,145 posts

Correct Reply

281 solutions
Top badges earned
Give back 300
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Give back 300
MVP
Gaurav-Behl
MVP

Likes

243 likes

Total Posts

1,145 posts

Correct Reply

281 solutions
Top badges earned
Give back 300
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile
Gaurav-Behl
MVP

25-01-2019

Just use your custom classes on OOB layout container as mentioned by Leo/Scott above, it would work fine

1675951_pastedImage_0.png

Avatar

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
srikanthp689160
Level 3

24-01-2019

Hi,

It works if i remove the class(container/container-fluid) applied to the wrapper, but it does not serve my purpose because then custom layout component is exact copy of OOTB layout container.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

24-01-2019

I agree with Leo - you should be able to use the OOTB layout container to address your requirements.

Avatar

Avatar
Establish
Level 6
antoniom5495929
Level 6

Likes

90 likes

Total Posts

212 posts

Correct Reply

39 solutions
Top badges earned
Establish
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
Level 6
antoniom5495929
Level 6

Likes

90 likes

Total Posts

212 posts

Correct Reply

39 solutions
Top badges earned
Establish
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile
antoniom5495929
Level 6

24-01-2019

Hi,

have you tried to remove the style applied to the class that you are using in your wrapper?

Avatar

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
srikanthp689160
Level 3

24-01-2019

I do not see this issue with OOTB Layout component

Avatar

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 3
srikanthp689160
Level 3

Likes

20 likes

Total Posts

95 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
srikanthp689160
Level 3

24-01-2019

Hi smacdonald2008,

I just added a wrapper div with class="container" or class="container-fluid" in custom layout container sightly html script based on selection in component's dialog.

<div class="${properties.layoutClass == undefined ? 'container-fluid' : properties.layoutClass}">

<<-- OOTB code from responsivegrid.html -->>

</div>

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

24-01-2019

What changes in the code did you do in your custom layout container?

I assume if you use the OOTB Layout component - you are not seeing any issue.