AEM 6.5 retrieving Tag type fields in content fragment JSON

[MukeshAEM]

Hi,

I'm new to AEM and working on a react application to use AEM content heedlessly using Graphql query. We have a few fields of type Tag in our content fragment model. While retrieving the Content fragment JSON Graphql response only returns the Tag path with the ID(in format Tag namespace: parent tag/tag ID) and not the title for all the Tag type fields. Wondering how can we fetch the tag title with content fragment JSON?

Also, I need to fetch the JSON containing Tags with all its children separately as well to show on the webpage. Wondering what could be the best practice to handle both scenarios?

Thanks in advance.

[Umesh_Thakur · Accepted solution]

@MukeshAEM ,

Below code fragment will give you the tag title:

 ContentFragment caseStudyCf = contentFragmentResource.adaptTo ( ContentFragment.class );
                                Iterator<ContentElement> elementIterator = caseStudyCf.getElements ();
                                while (elementIterator.hasNext ()) {
                                    ContentElement contentElelment = elementIterator.next ();
                                    if (contentElelment.getName ().equalsIgnoreCase ("somevalue"){
                                        TagManager tagManager = resourceResolver.adaptTo ( TagManager.class );
                                        Tag tag = tagManager.resolve ( contentElelment.getContent () );//Here we are pasing tag id.
                                        Optional<Tag> tagOptional = Optional.ofNullable ( tag );
                                        if (tagOptional.isPresent ()) {
                                            componentsJson.put ( contentElelment.getName (), tagOptional.get ().getTitle () );
                                        } else {
                                            componentsJson.put ( contentElelment.getName (), StringUtils.EMPTY );
                                        }

                                    } else {
                                        componentsJson.put ( contentElelment.getName (), contentElelment.getContent () );
                                    }

                                }

Once you have tag object you getlist of its child thru Resource and its iterator. generate a separate json for that and put in the main json object, that you are using for react UI generation.

one thing I would like to highlight here is: JSONObject using HashMap behind the scene, so if you need the in insertion order then JSONObject will not give you the proper order due to HashMap.

Hope this helps

Umesh Thakur

[aanchal-sikka]

Hello @MukeshAEM 

Please refer to the discussion on https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-5-graphql-query-to-f...

[MukeshAEM]

Hi @aanchal-sikka , thanks for pointing out the discussion thread. I'm afraid if my content model contains multiple Tags type fields, getting the data using JSON exporter API, may cause a performance impact. I wonder if fetching the Tags utilizing this method is the best practice or if there is another way as well.

[Umesh_Thakur · Accepted solution]

@MukeshAEM ,

Below code fragment will give you the tag title:

 ContentFragment caseStudyCf = contentFragmentResource.adaptTo ( ContentFragment.class );
                                Iterator<ContentElement> elementIterator = caseStudyCf.getElements ();
                                while (elementIterator.hasNext ()) {
                                    ContentElement contentElelment = elementIterator.next ();
                                    if (contentElelment.getName ().equalsIgnoreCase ("somevalue"){
                                        TagManager tagManager = resourceResolver.adaptTo ( TagManager.class );
                                        Tag tag = tagManager.resolve ( contentElelment.getContent () );//Here we are pasing tag id.
                                        Optional<Tag> tagOptional = Optional.ofNullable ( tag );
                                        if (tagOptional.isPresent ()) {
                                            componentsJson.put ( contentElelment.getName (), tagOptional.get ().getTitle () );
                                        } else {
                                            componentsJson.put ( contentElelment.getName (), StringUtils.EMPTY );
                                        }

                                    } else {
                                        componentsJson.put ( contentElelment.getName (), contentElelment.getContent () );
                                    }

                                }

Once you have tag object you getlist of its child thru Resource and its iterator. generate a separate json for that and put in the main json object, that you are using for react UI generation.

one thing I would like to highlight here is: JSONObject using HashMap behind the scene, so if you need the in insertion order then JSONObject will not give you the proper order due to HashMap.

Hope this helps

Umesh Thakur

[MukeshAEM]

Hi @Umesh_Thakur, thanks for your prompt response. We are directly using Graphql query response in our React application. I believe the above code can work as a backed API only. I wonder if it's possible to fetch Tags using GraphQL API or directly from react application without impacting the performance?

[MukeshAEM · Accepted solution]

There could be another way to get tag value directly from AEM is to add an extra field as Tag_Value in the content fragment model and populate its value using an event handler.