Solved

create component with subcomponent and display it correctly in the content tree

Forum|Forum|5 years ago
February 7, 2020
1 reply
1128 views

I have created a component and inside it have a text and a multifield with text. in the .html it shows the text components as a title component and in this way allows users a more personalized management once it is displayed in edit mode if they wish. this is the .xml of my 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"
    cq:isContainer="{Boolean}true"
    jcr:primaryType="cq:Component"
    jcr:title="test"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="WKND.Content"/>

<?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="Menu"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <container
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <externTitle
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                        fieldLabel="Extern Title"
                        name="./title/jcr:title"/>
                    <nestedTitle
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
                            name="./internTitles">
                            <items jcr:primaryType="nt:unstructured">
                                <container
                                    jcr:primaryType="nt:unstructured"
                                    jcr:title="Titles"
                                    sling:resourceType="granite/ui/components/foundation/container">
                                    <layout
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/layouts/collapsible"/>
                                    <items jcr:primaryType="nt:unstructured">
                                        <internTitle
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                            fieldLabel="Intern title"
                                            name="./title/jcr:title"/>
                                    </items>
                                </container>
                            </items>
                        </field>
                    </nestedTitle>
                </items>
            </container>
        </items>
    </content>
</jcr:root>

this is my html

Hello
<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
	<div data-sly-resource="${'title' @ resourceType='wknd/components/content/title'}">
	</div>
	<div data-sly-resource="${'internTitles/item{0}/title' @ format=0,resourceType='wknd/components/content/title'}">
	</div>
	<div data-sly-resource="${'internTitles/item{0}/title' @ format=1,resourceType='wknd/components/content/title'}">
	</div>
</div>

This code is adapted and simplified to show the problem, so it only shows two nested titles and their main title.

Here is the content tree and what I want.

once displayed, the title components can be treated like a title component, but they are outside their main component in the content tree. I hope my problem is understood, thanks for the answers

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 aperez_-_Jacidi

If we have subcomponents inside a multiple field, we need to create a component container with an empty cq: design_dialog (this allows to be a child element, otherwise the component will be a child at the root and not in the parent) and an html file to display the component.

This is the example to solve my problem.

Primary component: call to title and child container component

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
	${properties}
	<div data-sly-resource="${'title' @ resourceType='wknd/components/content/title'}">
	</div>
	<div data-sly-resource="${'internTitles' @ resourceType='wknd/components/content/nidhiMulti'}">
	</div>
</div>

container child: it is call two components for finally show the title component

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
	<div data-sly-resource="${'item0' @ resourceType='wknd/components/content/nidhiTest'}">
	</div>
	<div data-sly-resource="${'item1' @ resourceType='wknd/components/content/nidhiTest'}">
	</div>
</div>

last subcomponent:

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
	<div data-sly-resource="${'title' @ resourceType='wknd/components/content/title'}">
	</div>
</div>

This allows you to have a component with a multi-level hierarchy in the content tree.

It is the solution found by me, it may be simpler but it is just an example for more complex cases. if someone has a better method, please, I hope to read it. Thank you.

A

aperez_-_JacidiAuthorAccepted solution

If we have subcomponents inside a multiple field, we need to create a component container with an empty cq: design_dialog (this allows to be a child element, otherwise the component will be a child at the root and not in the parent) and an html file to display the component.

This is the example to solve my problem.

Primary component: call to title and child container component

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
	${properties}
	<div data-sly-resource="${'title' @ resourceType='wknd/components/content/title'}">
	</div>
	<div data-sly-resource="${'internTitles' @ resourceType='wknd/components/content/nidhiMulti'}">
	</div>
</div>

container child: it is call two components for finally show the title component

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
	<div data-sly-resource="${'item0' @ resourceType='wknd/components/content/nidhiTest'}">
	</div>
	<div data-sly-resource="${'item1' @ resourceType='wknd/components/content/nidhiTest'}">
	</div>
</div>

last subcomponent:

<div data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html">
	<div data-sly-resource="${'title' @ resourceType='wknd/components/content/title'}">
	</div>
</div>

This allows you to have a component with a multi-level hierarchy in the content tree.

It is the solution found by me, it may be simpler but it is just an example for more complex cases. if someone has a better method, please, I hope to read it. Thank you.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded