Cannot use style system for the components that are included in the html

[cnivaskallepalli]

The page rendering component of my template just contains like below and there is no layout container for drag-and-drop components.

<div class="container-class">
    <div class="container-class-child">
        <sly data-sly-resource="${'title' @ resourceType='abc/components/content/title', decorationTagName='div'}"></sly>
        <sly data-sly-resource="${'content' @ resourceType='abc/components/content/text', decorationTagName='div'}"></sly>
    </div>
    other html here
</div>

How could we use the style system for such components? as there is no way to add the policy for the title or text components in the template?

is there any other way to somehow load the policies for those kind of components which are included in html?

Thanks in advance.

[AsifChowdhury]

Hi @cnivaskallepalli 

If you are using an editable template then it's very easy to provide the component's policy at the template level.

Editable Templates: If you want to control the components used on your pages and apply policies, it's generally better to create editable templates. With editable templates, authors can only use specific components that you define, and you can set policies for those components within the template itself.

This may help you.

[Ekhlaque]

Hi @cnivaskallepalli , as @AsifChowdhury  mentioned If you are using an editable template then it's very easy to provide the component's policy at the template level. 

You can define policies at the component level itself, even if they are included directly in the HTML. To do this, create a .content.xml file for each component and define the policies in that file.

abc/components/content/title/.content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:Folder"
          sling:resourceSuperType="abc/components/content/title"
          jcr:title="Title">
  <!-- Define your policies here, e.g., style, allowedComponents, etc. -->
</jcr:root>

abc/components/content/text/.content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:Folder"
          sling:resourceSuperType="abc/components/content/text"
          jcr:title="Text">
  <!-- Define your policies here, e.g., style, allowedComponents, etc. -->
</jcr:root>

[cnivaskallepalli]

@Ekhlaque Thanks for your answer. Can you please provide an example of how could we add the policies to a component?

I tried below but I am sure that is not correct  

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:Folder"
          sling:resourceSuperType="abc/components/content/text"
          jcr:title="Text">
  <!-- Define your policies here, e.g., style, allowedComponents, etc. -->
<abc jcr:primaryType="nt:unstructured">
		<components jcr:primaryType="nt:unstructured">
			<content jcr:primaryType="nt:unstructured">
				<title
						cq:policy="abc/components/content/title/policy_255224064633300"
						jcr:primaryType="nt:unstructured"
						sling:resourceType="wcm/core/components/policies/mapping"/>
			</content>
		</components>
	</abc>
</jcr:root>

[Ekhlaque]

Can you test the below one .we define a policy with the cssClass attribute set to "my-text-style" and the style attribute containing the CSS styles that will be applied to the text component.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:Folder"
          sling:resourceSuperType="abc/components/content/text"
          jcr:title="Text">
  <!-- Define your policies here, e.g., style, allowedComponents, etc. -->
  <policies jcr:primaryType="nt:unstructured">
    <!-- Example policy for styling the text component -->
    <myTextStyle
        jcr:primaryType="nt:unstructured"
        sling:resourceType="wcm/core/components/policies/csseditor"
        cssClass="my-text-style"
        title="My Text Style"
        style="[CSS Styles Here]"/>
  </policies>
</jcr:root>

->In your component's HTL file (e.g., text.html), add the cq:policy property to the relevant elements, specifying the policy path you defined in step.

<div class="text-component" data-sly-use.text="com.example.TextComponent">
  <p class="${properties.cq:policy}" data-sly-unwrap>${text.text}</p>
</div>

Hope this helps !

[aanchal-sikka · Accepted solution]

hello @cnivaskallepalli 

Please follow the same pattern as the root container in templates.

1. Go to the policies section of the template. Example: /conf/wknd/settings/wcm/templates/adventure-page-template/policies/jcr:content
2. Create a policy mapping for the title component. Refer to the root container's policy /conf/wknd/settings/wcm/templates/adventure-page-template/policies/jcr:content/root
3. Create the policy under /conf/wknd/settings/wcm/policies, which the same path as the one configured in Step-2.

Please use root container for reference, it will help you understand the relative paths in mappings.