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
Solved! Go to Solution.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Likes
Replies