Creating Oracle UCM Portlet in Easy Steps

I recently faced a requirements when the customer needed to display a custom portlet of Oracle UCM specific Document Type in WebCenter Interaction, and those who don’t know WebCenter Interaction aka WCI aka AquaLogic User Interaction aka ALUI, should read about it!

Anyway so I went through UCM Content Portlet Suite (CPS), and I found the search but, the customer wanted a thumbnail (Rendition) of the document to be displayed!

After searching online I found an amazing article on different ways to integrate WebCenter application with Oracle ECM, of course the author was talking about Oracle WebCenter not Oracle WebCenter Interaction -There are differences, huge ones!- but one of the ways specifically interested me, that is using JSON output of the UCM services to be parsed using Javascript and do the work needed.

So HTML pages, can display content from UCM using Javascript and JSON Parsing, COOL!

So instantly -actually 2 weeks later!- I started to dig out how to deal with this JSON object returned, and how can I use it to fulfill my needs.

The author of the Video/Article gave 2 simple examples, Showing the folder structure of the UCM and to search UCM, using the Ajax way!

So as I wanted to get the result of a specific document type, so I was interested in his last example,

1- How can I tune his search query to give me what I need?,

2- How can I actually get the rendition of the file? and

3- How can I know the image path using the rendition?

All that questions poped-up, along with other questions like security concerns and other stuff -those other stuff still unsolved pieces!-, and here is the results…

1- How can I tune his search query to give me what I need?

 I answered that question by watching the behavior of the UCM site itself, how can it gets documents of a specific document type, and I found it was by using
(dDocType+<matches>+`requested Document Type`)

that was easy!

And I figured out some other things like Sort order and Sort field (I wanted them to be sorted descending by date!) using the following


So now what, well I discovered a little bit of a problem, that the query only displays 20 items by default!, and I wanted the whole list, I found a variable called ResultCount, setting it to -1 didn’t help me out, so I gave it a very very long number! like this
But I use
ResultCount=1 in case I’m getting the last item only!

Okay great, so now we are ready to go, the final path to  request my search is like the following:
idcurl+"?IdcService=GET_SEARCH_RESULTS&QueryText=(dDocType++`"+documentDocType+"`)&ResultCount=9999999&SortField=dInDate&SortOrder=Desc&IsJson=1Of course the documentDocType is my javascript value that determines the document type

So now I have a JSON object with all documents in the “DocumentDocType” Document Type, so now I made a search to give me exactly what I need, time for Question 2

2- How can I actually get the rendition of the file?

That was actually simple, as I was searching the JSON Object returned I found two interesting columns “Rendition1” at column #16 and “Rendition2” at column #17 -It’s count depends on the number of rendition you give for the specific document type, and that first one “Rendition1” returned with “t” letter or “g” (“t” for images that has the extensions “jpg”,”png”,”pmp”,”tiff” and also is for documents rendition, “g” is for images that has the extension “gif”), Great now I have the rendition? NO YOU DON’T!

what does the letter “t” or “g” help me achieving in here?!!, so that bring me to the last question

3- How can I know the image path using the rendition?

So I took a little breath, and came back to UCM to see the displayed thumbnail images, and I found the image property to be as the following: docname@t~1.jpg or docname@g~1.gif , so I was like guyz seriously!!!

so what is this!!, lets put it that way

So Okay, now what?
well it was easy after that, giving a javascript file to remove the real extension of the file download url, and replace it with the above code
So the final result was like this

var version=data.ResultSets.SearchResults.rows[i][8];
var rendition=data.ResultSets.SearchResults.rows[i][17].toLowerCase();
var docUrl=data.ResultSets.SearchResults.rows[i][21];
var docName=
var extension=".jpg";
var imageUrl=ucmurl+docUrl.substring(0,docUrl.indexOf('.'))+"@"+rendition+"~"+version+extension;

Okay, so I added just one line of code for fail back rendition to show a not-fount image like the following


So that’s great, Now I have the url of the image #column 21 and I have the Rendition image, viewing is so easy using the following in javascript

<a href=”&quot;+ucmurl+docUrl+&quot;” target=”_blank”>”+

“<img src=”&quot;+imageUrl+&quot;” border=”0” alt=”” />

and in HTML file as the following

<div id=”thePortlet”></div>
, and here are the results application -don’t mind the look!-

There is one thing thou!

It won’t work if the ucmurl has “http://” in it, it only works on IE, as the rest of browsers prohibits cross domain JSON calls, so I went around this thing with creating a servlet that does the JSON calling, while in the Javascript I called the servlet!

Enjoy, and looking forward for your comments