Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Extending the ListItems of Teaser Component

topemabs
Level 1
Level 1

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

 

 

 

 

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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.

 

 

 

View solution in original post

3 Replies
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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.

 

 

 

View solution in original post

topemabs
Level 1
Level 1
Thanks for this! One last thing, can you give me the properties of the TeaserAction class
Arun_Patidar
Community Advisor
Community Advisor
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class TeaserAction {

	@Inject
	public String link, text, style;

	public String getURL() {
		return ModelHelper.getLink(link);
	}

	public String getTitle() {
		return text;
	}

	public String getStyle() {
		return style != null ? style : "";
	}

}