Level 2

Solved

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

Forum|Forum|2 years ago
July 27, 2023
4 replies
1180 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by aanchal-sikka

hello @cnivaskallepalli

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

Go to the policies section of the template. Example: /conf/wknd/settings/wcm/templates/adventure-page-template/policies/jcr:content
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
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.

AsifChowdhury

Community Advisor

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

Adobe Employee

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>

C

cnivaskallepalliAuthor

Level 2

@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

Adobe Employee

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

Community Advisor

hello @cnivaskallepalli

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

Go to the policies section of the template. Example: /conf/wknd/settings/wcm/templates/adventure-page-template/policies/jcr:content
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
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.

Aanchal Sikka

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded