Stacking AEM Components

[kashyap691]

Hi guys,

I have a situation where there needs to be multiple components stacked on top of each other in a given grid layout. 

The design follows by having a full width banner image in the background, having some text on the left (RTE component) and a form on the right with its own surrounding container (can be custom or extending core components). 

I was thinking to use a column control component to have these components on the left and on the right but how can the banner background be achieved? Column control layout containers will limit the components width that will be authored. 

Should I be creating a custom component that hosts column control by default (having cq include refered to the component path) and render the banner component next to it?

Would be happy to know what's the best and efficient way to achieve this.

[Sady_Rifat]

Hello @kashyap691 ,

From my experience, I faced this situation many times and was successfully supported by a simple component. What I did is, I created a new component called "flex container". This is 100% the width of the layout and has a paysys.
Features of this component:

• Different Background image support (Desktop, Tab, Mobile)
• Background Color Option
• Padding, Margin Option
• Border and minimum height option

This means this component will support very basic CSS support by authoring.

In your case you can create this type of component which will help you in the future and the combination you suggest column control, RTE, and Form is perfectly fine.

In you new component parsys drop column control and in column control drop RTE and Form.

Hope this helps you.

[kashyap691]

Hi Rifat,

Thanks for the suggestion. Do you have any links to an example that I can try making this component ?

I had done something similar to what you have mentioned, including a parsys on top of an image but since I am using editable templates, there is no way to configure the allowed components via policy for the parsys.

[Sady_Rifat · Accepted solution]

Hello @kashyap691 ,

The custom component making is fully internal. I just share the idea. Till now I haven't seen anything like this in any public blog.

However, the parsys allowed component is a different discussion. 

Since you mentioned you are facing trouble setting the component policy from the template, you might have missed _cq_design_dialog in your component. That's why you didn't find the policy icon with your component.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Flex Container"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <allowedcomponents
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Allowed Components"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <components
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/authoring/allowedcomponents"
                                name="./components"/>
                        </items>
                    </allowedcomponents>
                    <styletab
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"/>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

 An example of design dialog XML.

[arunpatidar]

Hi, you can follow the below:

1. core container component P with background mage

2. core container component L children of P with half of the left width (you can adjust this using responsive grid . layout mode)

3. core container component R children of P with half of the right width (you can adjust this using responsive grid . layout mode)

Now you have a layout, now you can drag and drop the components wherever you want.

[kautuk_sahni]

@kashyap691 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.