AEM and UGC – A Practical Example

05287_AEM-Podcast_AEM-and-UGC_A-Practical-Example

When speaking of User Generated Content (UGC) in Adobe Experience Manager, the documentation provided refers to writing comments, forums, blogs, reviews, and the rating system but lacks detail when it comes to actually implementing the system. One of our clients, Browning, wanted us to implement a custom rating system as a part of a bigger system called Show Us Your Buckmark contest—we decided to tackle this challenge with the use of workflows. In a podcast I did with Peter and Joey, I referred to it as a two-part system:

  • The submission of an entry, which includes basic information about the user and an uploaded image of their entry.
  • User provided feedback on other entries through a star rating system.

Entry Submission
To participate in the contest the user must fill out a form. After going through a validation process, they submit their entry. At this point, the entry is stored as a node in a folder (/content/usergenerated/content/browning/buckmark) in one of the Publish instances—this folder is designated as the destination of the form. The id of the created node is a random number, which is generated by AEM.

Buckmark Data Reverse Replication
The creation of this node is set to trigger a reverse replication from the Publish instance to the Author instance. We set up reverse replication as a workflow. The following images show the details of the launcher and the process for reverse replication:

ugcfig1
Fig 1: The launcher acts like an event handler. When an event (such as node creation) occurs and the “Nodetype”, “Path”, and “Run Mode(s)” criteria match, the workflow step is triggered.

ugcfig2
Fig 2: The data is processed by out-of-the-box steps “Reverse Replicate Content” (which copies the node to the system’s outbox) and “Deactivate Asset” (which deletes the Publish node for security purposes).

The new node in Author is created under the same folder (/content/usergenerated/content/browning/buckmark).

Buckmark Data Page Move
We needed to add some custom properties to the data node and felt that a custom workflow would be a simple solution. The launcher for this workflow is triggered when a resulting node from the reverse replication is created under the folder “/content/usergenerated/content/browning/buckmark”, as seen below:

ugcfig3
Fig 3

ugcfig4
Fig 4

Fig 3 & 4: This launcher calls the custom process step to move the node from the user generated folder to be under the project node (/content/browning/tools/buckmark-entries), deleting the node under the user generated folder, keeping just one instance of the node in Author.

Among the added properties, we have the “isWinner” property, which will be set by a reviewer as to whether or not this entry won the contest for this year.

Buckmark Pages Approval Request By
The creation of a page node under “/content/browning/tools” fires off a workflow which uses a participant step to send an email notification to the members of the group responsible for reviewing the UGC. The reviewer logs in to AEM, and from their inbox they have access to the details of the entry as a page. Within the same workflow, once the reviewer approves the entry, the data goes through the “Activate Asset” step. This process creates a node under the same path (/content/browning/tools/buckmark-entries) on all Publish instances.

ugcfig5
Fig 5

ugcfig6
Fig 6

Fig 5 & 6: The approval workflow results in the node being replicated to Publish or deleted from Author.

The next time a user accesses the “Show Us Your Buckmark” page, the approved entry is going to be displayed as the first list element on the top left (with the image, the submitter’s first name, and a star rating system).

User Ratings
When a user goes to the “Show Us Your Buckmark” page, they will see the list of existing entries with the rounded average of star ratings from previous votes (or just one star if there have been no votes yet on a given entry). When the user clicks on the item, they are presented with a pop-up containing details of the rating system allowing them to vote on the entry. If they vote, their vote will be included in the rounded average.

In order to get this process working in the back end, we implemented a servlet that keeps track of the ratings and a property “isGettingRated”, which is set to true when an entry has been rated. With regards to workflows, we have two workflows set up for the rating system: “Buckmark Ratings Reverse Replication” and “Buckmark Rating Activate”.

Buckmark Rating Reverse Replication
This workflow operates a bit like the out-of-the-box Reverse Replication, with an extra process step to make sure that the “isGettingRated” property is added to the workflow data before the reverse replication process completes.

ugcfig7
Fig 7

ugcfig8
Fig 8

Fig 7 & 8: The Author version of the node is also updated with the “isGettingRated” property set to true.

Buckmark Rating Activate
This workflow is responsible for pushing the updated entry node to the Publish instances, with an extra step that sets the “isGettingRated” property to null. This prevents an infinite loop of triggering workflows for reverse replication and reactivation of the updated node.

ugcfig9
Fig 9

ugcfig10
Fig 10

Fig 9 & 10: The “isGettingRated” property is set to null before the node is reactivated.

Obviously, we had more going on under the hood, and there are probably as many ways to implement this system as there are AEM developers. We hope that sharing our approach on User Generated Content with a custom AEM rating system will get you pointed in the right direction if ever you need to do something similar. If you do get a chance to implement one of these yourself, or have done so already, please let us know. We would love to feature it here on AEMPodcast.com.