How can I add teaser component in multifield

[Ronnie09]

I need to add text tab of teaser component into multifield and write sightly for that using Sling model I cant get teaser text tab displayed in multifield

[B_Sravan · Accepted solution]

Hi @Ronnie,

Do you mean that you want to make the text field in the teaser component a multifield?

Steps to follow:
1. you can't make changes to core components directly, so create a proxy teaser component and add resourceSuperType to the core components teaser.

2. Add a cq:dialog to the new proxy component and add teaser.html too

3. Customize the above two files (dialog's content.xml and teaser.html) to hold your authored properties.

4. Make your text field to multifield and use a sling model to retrieve those values.

your text field dialog may look something like this,

<multitext
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                            composite="{Boolean}true"
                                            fieldLabel="Multi Text fields"
                                            useFixedInlineToolbar="{Boolean}true">
                                        <field
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                                name="./multitexts">
                                            <items jcr:primaryType="nt:unstructured">
                                                <postThumbnailText
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                        fieldDescription="Enter Thumbnail Text"
                                                        fieldLabel="Text"
                                                        name="./text"/>
                                            </items>
                                        </field>
                                    </multitext>

In your sling model,

@ChildResource
List<TextFieldData> multitexts;

public List< TextFieldData > getTeaserTexts() {
        return multitexts;
    }

In your data class,

public class TextFieldData {

    @ValueMapValue
    String text;

    public String getText() {
        return text;
    }

}

In your HTML,

<sly data-sly-list.teaserTextsItems= "${model.teaserTexts}" >
${teaserTextsItems.text}
</sly>

Note:

DO NOT make any changes to core components.