Recent Wiki Activity

This post is in continuation of the previous one where we added a component to display the upcoming events of a calendar.

Here we would create a similar component and try to display the status of the recent wiki activity.


As usual go ahead and create a new component using the component wizard in the CRXDE.


Once done open up the JSP page and add following piece of code to retrieve the nodes.

String queryStatment = "select * from wiki:Topic where jcr:path like '"+currentPage.getPath()+"/wiki/%'order by wiki:lastModified desc";
Query q = currentNode.getSession().getWorkspace().getQueryManager().createQuery(queryStatment,Query.SQL);
NodeIterator nodeIter = q.execute().getNodes();

Iterate through the node entries and retrieve the version history like

VersionHistory vh = node.getVersionHistory();
long size = vh.getAllVersions().getSize();

For newly added wiki entries the version size would be 1 and for all other updated entries it will be greater than 1.


After adding valid wiki entries and adding the component to the page it should resemble like given below.




Share on Facebook

Upcoming Events

The Calendar functionality in the CQ5 can be leveraged to build an intuitive portal experiencing for the users. One such experience would be to display the list of upcoming events.

I would provide a simpler approach to achieve the same.

  • Create a new component let’s say upcoming events.

  • Open up the newly created JSP and add the following logical steps
    • Retrieve the Calendar Source in the desired page either by looping through the child pages or parametrize the calendar location as a dialog entry for the component. In our case we shall assume that the dialog entry exists and proceed.
    • if(calendarLocation == null || calendarLocation.equals(""))
      PageFilter filter = new PageFilter(request);
      Iterator iter = currentPage.listChildren(filter);
      Page currPage =;
      Resource r = currPage.getContentResource("par/calendar");
      if( r != null) {
      calendarManager = currPage.getContentResource().getResourceResolver().adaptTo(CalendarManager.class);
      if(calendarManager != null){
      calendar = calendarManager.getCalendar(currPage.getPath());
      calendarUrl = currPage.getPath()+".html";
      }// resource check
      else {
      calendarManager = currentPage.getContentResource().getResourceResolver().adaptTo(CalendarManager.class);
      if(calendarManager != null){
      calendar = calendarManager.getCalendar(calendarLocation);
      calendarUrl = currentPage.getPath()+".html";
    • Retrieve all the Calendar events using calendar API
    • Iterate over all the events and for each event , read the event properties.
    • If the event happens in future then display the event along with its read properties.
  • Add the component to your webpage using the sidekick after enabling it.
  • The component should resemble like given below once its published or previewed with appropriate data

Share on Facebook

Custom Color Coding for CQ5 Calendar

The CQ5 Calendars by default have color codes fixed for the derived events and the events that can be created.

However we can also customize the color for certain event types. Lets take a scenario where we can define new meeting types ( for our reference) and color code them.

This provides an intuitive experience for the user to decide the kind of event he/she is going to attend.


To achieve this we have to perform the following steps.


          1. Copy the Calendar folder structure (/libs/collab/calendar)  to your local apps folder to customize the features.
          2. Customize the Calendar edit form to include a meeting type, in our case its defined as four (Meeting,Seminar,Speech and Conference)
            • Create a new Event Edit Form and associate that for the Calendar.
            • Create a new Event View Form and repeat the same except that now it is a read only mode.
          3. We have to modify the java script which renders the color for the various event types. This is available under the file MonthLens.js file
            • The function createAllDayEventDiv retrieves the color for the all day event in question  like given below.
              • var color =;
                Replace the default function with a custom one like
                var color =;
            • Perform the same changes for renderTimeEvents function too ( i.e. replace the default one with the custom function getEventColorFor).
          4. The Event Type to the color code can be done in multiple ways, but here we will take a look at the simplest approach of matching the event Type with predefined color.
            • Open the Calendar.js file and add the following piece of code

* Returns the color to use for an event. This color will be the same
* for all events from the same calendar/subscription.
* @return {String} a hex color value in the form of "FF0000"
getEventColorFor: function(event) {
var colorValue = "40864B";
var eventType = event.get("eventType");
if(eventType == "seminar") {
colorValue = "ED1C24"; // RED
else if (eventType == "meeting") {
colorValue="00A2E8"; // BLUE
else if (eventType == "speech") {
colorValue="FF7F27"; // orange
else if (eventType == "conference") {
colorValue="22B14C"; // GREEN
return colorValue;

            •  Edit the calendar and add events of each type.
            • Once completed the calendar should looking similar to what is displayed here.
Color Coded Calendar

Color Coded Calendar

Share on Facebook