Extending the ListItems of Teaser Component

Avatar

Avatar
Validate 1
Level 1
topemabs
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
topemabs
Level 1

Likes

0 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile
topemabs
Level 1

08-04-2021

I have been trying to add an additional textfield in the getActions of the Teaser component.

See the highlighted picture below

topemabs_0-1617878365904.png

 

topemabs_2-1617880840551.png

 

 

But I am unsure on how I should override the List<ListItem> getActions of the Teaser component since I did not find any articles online. Can someone tell me on how the link and text properties are being passed to the ListItem

topemabs_1-1617878439587.png

 

 

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,326 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,326 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

08-04-2021

Hi,

I also extended the teaser component CTA to add dropdown for CTA type. To achieve this - 

1. Extend the dialog

<actions
                                                granite:class="foundation-toggleable cmp-teaser__editor-multifield_actions"
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                composite="{Boolean}true">
                                                <field
                                                    granite:class="cmp-teaser__editor-action"
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                                    name="./actions">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <style
                                                            granite:class="cmp-teaser__editor-actionStyle"
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                            emptyText="Style"
                                                            name="style"
                                                            required="{Boolean}true"
                                                            Text="Style">
                                                            <granite:data
                                                                jcr:primaryType="nt:unstructured"
                                                                cmp-teaser-v1-dialog-edit-hook="actionStyle"/>
                                                            <datasource
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="myapp/components/includes/datasources/dl-dropdown"
                                                                options="/apps/myapp/components/includes/jsons/CTAStyles.json"/>
                                                        </style>
                                                    </items>
                                                </field>
                                            </actions>

 

2. Create CustomTeaser.java

@Model(adaptables = SlingHttpServletRequest.class, adapters = {Teaser.class,CustomTeaser.class}, resourceType = MYConstants.TEASER_RESOURCE_TYPE, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class CustomTeaser implements Teaser {

        @Self
	@Via(type = ResourceSuperType.class)
	private Teaser teaser;


private List<TeaserAction> customActions = new ArrayList<TeaserAction>();


	@PostConstruct
	protected void init() {
		Resource actionsNode = resource.getChild(Teaser.NN_ACTIONS);
		if(actionsNode != null) {
// this will return a list of action			
customActions = ModelHelper.getChildrenModels(actionsNode, TeaserAction.class);
		}
	}

public List<TeaserAction> getCustomActions() {
		return new ArrayList<TeaserAction>(customActions);
	}

 

3. Create override action.html to call custom action method

<div class="cmp-teaser__action-container" data-sly-test="${teaser.actionsEnabled}" data-sly-list="${teaser.customActions}" data-sly-use.actionTemplate="action.html">

 

 

Note : this is not the complete code, I just share the code which will give you idea how to map model, html and dialog changes.

 

 

 

Answers (0)