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

[SocialTaylor]

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

[Lavanya_Pejjayi · Accepted solution]

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>

[SocialTaylor]

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]

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_]

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>