How can I pull the Tags out of a Custom Component using the List SuperType? | Community
Skip to main content
S
SocialTaylor
Level 2
September 16, 2021
Solved

How can I pull the Tags out of a Custom Component using the List SuperType?

  • September 16, 2021
  • 2 replies
  • 1662 views

Hello!

 

I am working on a component that can pull pages out from underneath a path and have decided to use the List Core Component to extend into a component and change the front end for this. The only thing I am stuck on is finding a way to pull out the Tags from the post. I only need to return one and, I noticed that in the models used for the List Component, the list it is returning is using the core Page api, which I assumed will give us access to the getTags(); function in the model, but I'm unsure of how to implement it in the Models I am sharing below. Any help would be appreciated on understanding and pulling those out to display on the frontend!

 

Before, I had tried adding something similar to the Nullable getTitle(); functions, but it kept asking me to define Tag and I wasn't sure what to pull in for that or how to grab like, the first item of that function to return to the frontend

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 Lavanya_Pejjayi
HiSocialTaylor, 

You can use  below code to fetch the list of tags of the page.
@Inject
@Named("cq:tags")
private String[] tags;

 

protected void init() {

String[] eventTags = this.tags;
List<String> topicTags = new ArrayList<>();
final TagManager tagManager = resourceResolver.adaptTo(TagManager.class);
if (tagManager != null && eventTags != null) {
String[] values = new String[eventTags.length];
for (int i = 0; i < eventTags.length; i++) {
String eventTag = eventTags[i];
Tag tag = tagManager.resolve(eventTag);
if (tag != null) {
if (eventTag.contains(PAGE_TOPICS)) {
topicTags.add(tag.getTitle());
}
values[i] = tag.getTitle();
}
}
this.tagValues = values;

}

 

 

  <sly data-sly-use.objectOfModelClass="Modelclasspath"></sly>


       <div """>${objectOfModelClass.tagValues}</div>

 

2 replies

Lavanya_Pejjayi
Adobe Employee
Lavanya_PejjayiAdobe EmployeeAccepted solution
Adobe Employee
September 17, 2021
HiSocialTaylor, 

You can use  below code to fetch the list of tags of the page.
@Inject
@Named("cq:tags")
private String[] tags;

 

protected void init() {

String[] eventTags = this.tags;
List<String> topicTags = new ArrayList<>();
final TagManager tagManager = resourceResolver.adaptTo(TagManager.class);
if (tagManager != null && eventTags != null) {
String[] values = new String[eventTags.length];
for (int i = 0; i < eventTags.length; i++) {
String eventTag = eventTags[i];
Tag tag = tagManager.resolve(eventTag);
if (tag != null) {
if (eventTag.contains(PAGE_TOPICS)) {
topicTags.add(tag.getTitle());
}
values[i] = tag.getTitle();
}
}
this.tagValues = values;

}

 

 

  <sly data-sly-use.objectOfModelClass="Modelclasspath"></sly>


       <div """>${objectOfModelClass.tagValues}</div>

 

    S
    SocialTaylorAuthor
    Level 2
    September 17, 2021

    Hey!

     

    I tried what you have above in a new Model, but that didn't seem to work. It just didn't return anything. I wonder if I need to past the List item Page to that? Or do I need to create a new function within the model I was creating above?

      Lavanya_Pejjayi
      Adobe Employee
      Lavanya_PejjayiAdobe Employee
      Adobe Employee
      September 17, 2021

      Kindly correct/update the code as per your requirement. 

      1.Object reference is misplaced.

      2.Component path is missing from the Model

      3.create a model class with component reference path and fetch the page details 

       

       



      <sly data-sly-use.tagItems="com.movementmortgage.core.models.BlogTags">
                    <div>${objectOfModelClass.tagValues}</div>
                </sly>

       

      <sly data-sly-use.tagItems="com.movementmortgage.core.models.BlogTags">
                    <div>${tagItems.tagValues}</div>
                </sly>

      1. You should create a model class to fetch the list of tags

      2. update the below lines 

      @Model(adaptables = Resource.class,
             resourceType = {"pass your component path"},
             defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

        

      @ValueMapValue
      String yourPagePath;

      @PostConstruct 
        if (StringUtils.isNotBlank(yourPagePath) && Objects.nonNull(pageManager)) {
          Page yourPage = pageManager.getPage(yourPagePath);
          if (Objects.nonNull(yourPage)) {
            YourPageModelClass =yourPage.getContentResource().adaptTo(YourPageModelClass.class);
          }
        }

       

       

      I hope this will help.

        Kishore_Kumar_
        Kishore_Kumar_
        Level 9
        September 17, 2021

        Hi @socialtaylor ,

         

        Could you please check if this works.

         

        //Sling model

         

        @ScriptVariable
private Page currentPage;

public List<String> getPageTags() {
	if(currentPage.getTags().length > 0) {
		List<String> tagsList = new ArrayList<>();			
		Tag[] tags = currentPage.getTags();
		for(Tag tag: tags) {
			tagsList.add(tag.getTitle());				
		}
		return tagsList;
	} else {
		return Collections.emptyList();
	}
}

        In HTL

         

        <sly data-sly-use.tagsTestModel="com.sample.TagsTestModel"></sly>
<sly data-sly-test.pageTags="${tagsTestModel.pageTags}"/>

<p>${pageTags}</p>
          Terms & ConditionsAccessibility statement

          Loading footer...