A simple code compare functionality

One of the most important aspect of any development cycle is deployment and while deployment, it is very important to note the changes done before pushing your code bits to production environment. Although WCS does provides as way to manage code repository with eclipse plugin, it does not have any simple utility to compare code changes done within Admin UI itself. One has to always compare with repository code and versions for the changes, which is little bit time consuming if you want to just want to simply compare a single elements.
In past I used to use Notepad++ or other editors to compare code or version repository with or without some IDE like eclipse. But what to do when you suddenly need to compare code and make the changes & publish? That's where I thought to develop compare functionality within WCS Admin UI itself.

If you check the source code of compare plugin of editors, you will find that mostly they use simple JS functions to compare and thus, you really don't need very complex plugins to compare code. After some search, I found the following project quite useful: jsdifflib which presents a simple user interface and 2 options to check the differences between texts: Inline differences and Side-by-Side differences. You may want to fetch 2 JS files and 1 CSS file mentioned in that library.

Now, the point of customization is while checking the version history of CSElement and Template (It is understood that this functionality which I have presented, one needs to enable Revision Tracking for CSElement and Template assettype). When you check the version history of any asset in Admin UI, following element is called: OpenMarket/Xcelerate/Actions/RevisionTracking/ShowTrackedHistory.xml. So it is obvious that you would need to customize this element as presented below. In this element, it only checks if current assettype is Template/CSElement and if yes, just enable the compare button. Code can be simply as show below:
Once you create this custom element, you should you see compare button for CSElement / Template when you click on "Show versions" toolbar button:



Now, the magic part comes from the plugin: jsdifflib. Create a SiteEntry + CSElement: Tools/CompareFront and copy the same HTML code from this demo page within CSElement. Deploy the JS and CSS files to your app directory under /cs/ folder. Make small changes like call to JS and CSS files within Tools/CompareFront and add the following code to fetch the current version of code and the requested revision to compare with.

Now, when you click on compare button with any old version, you would be presented with similar kind of page as in demo but with pre-filled code of current and selected version. Just click on any of the options which would display the differences as shown below.

I hope this simplifies compare task for many developers.

Disclaimer: The code and/or the configurations posted are not official recommendations and should be used at sole's discretion with proper testing before deploying on live WebCenter Sites systems. Cheers!!