In part 1 of this series, I discussed a method for getting AEM Asset Collection items into the JSON representation of a page. This uses the Sling model + HTL component pattern to obtain the collection items and display their values in the JSON, based on asset type. Specifically, the Sling model enables the JSON renderer to display markup in content fragments and SVGs, and the AEM path to binary formatted assets.
With this method, third party apps and services can consume the JSON, using AEM in a headless manner. With this approach, authors can update the collections, while the content consumers see those collection updates in their JSON feed. This is a powerful solution already, but we can add some automation in updating the JSON and making it available on the customer/consumer facing dispatcher domain.
Let’s start with automating the JSON updates. When an author adds or removes items in one of the collections, this should be automatically reflected in the JSON. To do this, we need to add a JCR Event Listener class to our project which will listen for changes and request the page with our components. You can find such a class here: