container component allowed components

[sreedobe]

component htl .

<div itemprop="articleBody">
    <div data-sly-resource="${'container' @ resourceType='wcm/foundation/components/responsivegrid'}"></div>
</div>
<div data-sly-test="${(wcmmode.edit || wcmmode.preview)}"
     class="cq-placeholder ${classAppend}"
     data-emptytext="${component.properties.jcr:title}${emptyTextAppend && ' - '}${emptyTextAppend}">
</div>

When I put "articleBody" container component on template structure. I do not see 'allowed components' similar to other responsivegrid containers ( in above picture)

when I checked container responsivegrid policy - it is mapped to proper policy and needed component groups are checked in policy.

Any help?

Thanks,

Sri

[shelly-goel]

@sreedobe 

You would not see all the components added in the embedded responsivegrid on the UI because your component's script is getting executed. If you add the sling:resourceSuperType on your component to 'wcm/foundation/components/responsivegrid' and remove <component-name>.html then you would see it showing all the allowed components on the UI.

If I understand correctly, you've created a custom component to add a enclosing <div itemprop='articlebody'>. To achieve this, you can leverage 'Style System' to add an enclosing div class on this grid and then using javascript add those relevant custom attributes like 'itemprop'.

[sreedobe]

could you please point me to an example, I appreciate your help. @shelly-goel 

[shelly-goel]

Refer this link for how to use Style System: https://experienceleague.adobe.com/docs/experience-manager-learn/sites/page-authoring/style-system-f... . Similarly, you can add the styles to the layout container as well through it's policy.