how to automatically enable drag/drop spots on my page (edit mode)?

[jayv25585659]

So I have the HTL code below.

<div>
    <div class="left">
        <div data-sly-resource="${'content-left' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    <div class="right"">
        <div data-sly-resource="${'content-right' @ resourceType='wcm/foundation/components/parsys'}"></div>
    </div>
    <div data-sly-resource="${'content-bottom' @ resourceType='wcm/foundation/components/parsys'}"></div>
</div>

On first use, I cannot drag/drop any component into the drop spots.

To make it to work, I have to:

1. go to design mode

2. click on a drop spot (example: content-left).

3. Select the icon that appears (looks like a newspaper icon to me)

4. Select the next icon that appears (wrench icon) and tick all the components that I want to show up.

5. Repeat steps 2 to 4, for the other drop spots

Can someone please tell me on how to fix this?

[smacdonald2008]

There is no fix - what you have done is correct.

For a Parsy to work like this - you can go into Design mode to select the Components.

Configuring Components in Design Mode

Once done, the components show up in the side rail where yo can drag and drop them - when in Edit Mode:

[Ratna_Kumar · Accepted solution]

Hi,

In AEM, there is no automatic drag and drop the components on to the page. You need to go to design mode and select the components which you need - Thats what you have done is correct.

As scott stated, once you selected components in design mode, then components will show up in side rail on Edit mode.

Thanks,

Ratna Kumar.