06 October 2014

Updating existing Version Creator Module

Hi Folks,

Because of some requirement I need an Sitecore module which can create language version of  Sitecore content based on selection from content tree and including sub-items if selected. The tool contributed by Nehemiah J is fit to bill.

But my project has new requirement that while creating the language version for the entire website from root node(Home Node) user should be able to select few items to exclude. This was due to the point that there will be certain items which are not required to be version for example environment specific items or certain settings items etc.,

Now from design POV, I just need to provide and TreeView List using which user can select items which need to be part of the exclude list. Saying is simple but doing this is another story as due to limitation we have in dialog boxes provided in Sitecore Shell Sheer UI.
Following are the hurdles which i faced:
a) A out of box control which can render a tree view in left hand side and can render list view at right hand side so that user can navigate through the tree while selecting the items. It is something similar to Item selection while creating package using static item selection but in left-right orientation. Remember Dialog boxes are crafted in XAML.
--- No such control.
b) So I planned to use existing tree view control and render it on left hand side and create a custom list view which i will render from server side having selected item list. But then what about whenever some item get clicked in tree view a Postback will be fired.
--- But can't handle this Postback as it required me to make 'enableEventValidation="false"' which is strictly no go.
--- Can't use simple Repeater or .NET List View or any server side control will not render as there is no page event life cycle present in context of dialog box. Dialog box has only following events: OnLoad, OnPreRender, OnOK, OnCancel.
c) Then i thought I will use jQueryAjax based Get request to the dialog box URL and differentiate between initial request based on query string.
--- Well this is the approach i have taken, but again I can't use my good old jQuery syntax straightaway. As Sitecore uses its own jQuery and overwrite the handler. So from Jhon West blog i found we can use it but first need to get my own custom handler for jQuery like following:
var $j = jQuery.noConflict();

Finally to conclude I used plain simple HTML generation at server side and flush that HTML string using jQuery Ajax request. For delete and add jQuery request works like charm. Following are the results of work.


Lesson Learned: Sheer UI customization is not easy always. I hope this is solved in SPEAK where jQuery and HTML have more say. One Open question I didn't put much brain into it but this jQuery based approach doesn't work at all in IE browser, but who likes IE ;-) ?
I will be happy if someone can let know about this open question

You can download the updated Sitecore package from here. You can also read the user manual here.
You can also find the source code for the same.

18 June 2014

Auto Translation An Myth Sitecore

Hi Friends,

After long time I am back in technical writing and it feel good.
We do have best CMS for content authors to draft there content but once the main website is created all author crave to have "some tool which can help them translate there main website in as many as versions possible without any human intervention".
We developer too have such fancy where we can build such tool. But in our hearts we know that there is no such technology exist which can translate well human emotions written in one language and translate to another perfectly without loosing its sense.

So do we have any way out there !!
I respect the challenge as I know that doing 100% automation is not the answer but building something which can help them translate the content well with ease and control.  May be end of the day we can achieve 60-70 % of content translation automation. Still whatever is translated need to go for moderation by relevant author. May be translating a poem/phrase using any existing auto translation technique is not the way but translating basic information still can be done and may be chance to reduce the workload of translating agency.

So what is the technique ?
I will use Google Translation Service and provide simple tool in Sitecore using simple custom built add-on to give an attempt in my way. (May not be correct).

Let's Start !!
First I need to create a Sitecore Solution in which web project is out of web root directory and I will use File publish method to update the Sitecore web root directory. In same solution I also have a library project where I can put most of my action.
So my visual studio solution look like this
Figure 1.1
I will not list all the code here but if need to put some important code snippet, then will do so.
The approach we need to take is to create two action button which will translate the given text. Following they are :

  1. Figure 1.2 :-  A button in Rich Text Editor toolbar will be clicked while some text is selected. Here the point is that author can select the text (Only Text, Ctrl + A will not work) which he want to translate and click on that button. That button will raise an jQuery Ajax request in background to our own web service which can pass the baton to Google API Service. The Source language will be detected automatically by the Google and target language will be passed as parameter which will be caught by current language selected in Sitecore using version tab. This approach make sure that most of the text will be manually and carefully translated by the author / translator itself and can be moderated at same time.
  2. Figure 1.3 :-A button near to translate under version tab of Sitecore Ribbon. This button will only target the Single Line and Multi-line text field and will translate all of them in current context item. Using settings you may choose to opt out few fields which you may not need to translate such as ProductID or SKU etc., This approach make sure that all simple text field get translated and still can be moderated as only done for particular item in context.
You may also notice in Figure 1.2 near Germany Flag Icon we have another faded button namely 'Copy From', this package is one of the recommended addon to install which will give you a facility of creating a new language version from choice of your language. Which eventually become the fodder for your translation text.  Another point you may translate from German to Danish or any language. But the most recommended way is to translate from English to whatever language you may have. Another point Rich text based translation may not work well for few east Asian language like Japanese because they don't have a concept of spaces.

Following is the way it should look for use after installation of our package.
Figure 1.2
In both approaches we will use common service in background. The way data get delivered is different as output expected location is different.
The most typical is making a selection based translation tool. Which is still have few shortcomings for ex., while translating, approach should be selecting chunks of text top to bottom and move in same way till end of content arrive. In other words don't do random selection and then try translation.
This is something because of limited client side API functionality exposed by the RAD Rich Text Editor. May be some one can overcome this issue by writing extensive jQuery based functions.

Figure 1.3
Can I select Image and text together and then try to translate?
- No, Tool will give you error saying "please select text only".
In background during selection we get the text (plain simple text - the RAD API helps to get that), then we broke that text into multiple words based on space, then send that string array for translation. Once we received the translated text we replace word by word finding in whole content present in editor, but the key is we do it for length of text what user had selected. For example following is the function which do server side job.
public string Translate(string sourceText, string targetLanguage)
        {
            string result = string.Empty;
            try
            {
                string key = GetAPIKey();
                if (key == null || key.Length <= 0)
                {
                    result = "error: Google API Key is Not Defined";
                    return result;
                }
                // Create the service.
                var service = new Google.Apis.Translate.v2.TranslateService(new BaseClientService.Initializer()
                {
                    ApiKey = key,
                    ApplicationName = base.itmSettings.Fields["GoogleApplicationName"].Value,
                    MaxUrlLength = System.Convert.ToUInt32(base.itmSettings.Fields["MaxUrlLength"].Value)
                });
                //Splitting string for better translation
                string[] srcText = sourceText.Split(" ".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
                TranslationsResource.ListRequest lr = service.Translations.List(srcText, GetLanguage(targetLanguage));
                lr.Format = TranslationsResource.ListRequest.FormatEnum.Html;
                var response = lr.Execute();
                var translations = string.Empty;
                foreach (Google.Apis.Translate.v2.Data.TranslationsResource translation in response.Translations)
                {
                    translations += translation.TranslatedText + "|||";
                }
                if (translations != null && translations.Length > 0 && translations.Contains('|'))
                {
                    translations = translations.Substring(0, translations.LastIndexOf("|||"));
                    result = translations.Trim();
                }
            }
            catch (Exception ex)
            {
                result = "error:" + ex.Message;
                if (ex.InnerException != null)
                {
                    result += System.Environment.NewLine + ex.InnerException.Message;
                }
            }
            return result;
        }
This is the client side action which is basically configured in the button in toolbar of rich text editor.
RadEditorCommandList["Translate"] = function (commandName, editor, tool) {
    var selection = editor.getSelection();
    var selectedText = jQuery.trim(selection.getText());
    var wholeText = editor.get_html(true);
    if (selectedText.length > 1 && scLanguage.length > 1) {
        jQuery.ajax({
            type: "post",
            url: "/Sitecore/Service/Translate.aspx/TranslateText",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: '{"text":"' + selectedText + '","lang":"' + scLanguage + '"}',
            success: function (result) {
                if (result != null) {
                    var resultData = result.d;
                    if (resultData != null) {                      
                        var source = selectedText.split(/\s+/);
                        resultData = jQuery.trim(resultData);
                        var target = resultData.split("|||");
                        if (source.length == target.length) {
                            for (var i = 0; i < source.length; i++) {
                                wholeText = wholeText.replace(source[i], target[i]);
                            }
                            editor.set_html(wholeText);
                        }
                        else {
                            alert("Translation is not possible. Please select only text.");
                        }
                    }
                    else {
                        alert("Translation is not possible.");
                    }
                }
                else {
                    alert("Translation is not possible.");
                }
            },
            error: function (xhr, status, error) {
                alert('Error' + error + status);
            }
        });
    }
    else {
        alert("Please select some text, which should be greater then 2 character.");
    }
};
In case of ribbon based button we do find all fields in current item based on type of single line text and multi line text and minus the fields specified in exclude list under settings, we go for whole translation field by field. Here we don't split the words. Exclude list and settings for this module is defined as follows:

Complete Source code you may find at following GitHub link.
The package you may download from the Sitecore Market place.
Following concept is not part of this post but I used in my endeavour so I am referencing them back.
How to add button in rich text editor of Sitecore ?
- Xcentium Blog and Brian Pedersen's Blog.
How to add simple button in ribbon of content editor ?
- Huge Inc. Blog (I Followed from 'Next, we will describe how to add a button to Sitecore client... ')
To use this package in your Sitecore Installation there are few lengthy steps to follow, which you may find in ReadMe of package and at documentation in Sitecore Market Place.

Let me know folks how much this approach is appropriate for auto translation. Your feedback will help in improving this package and end of the day Sitecore Community.

11 April 2014

A Digital Trend : From the eyes of developer

This is my first Linked In article, i will hope it is interesting and give some insight in digital world.
I have started my career back in 2007 and have passion for web application development since school days, 2007 was exciting time for being developer because if you are in Microsoft web practice, then just two year back Microsoft launched .NET framework 2.0 with new improved Visual Studio IDE in compare to VS 2003.
Being beginner at that time I was in my infancy stage "where a child learn how to converse and how to walk observing the world with a mindset to grasp everything". So those days are days when I learn more and follow the order from TL/PM, so at my stage we do not have right to think much. We have only duty to code and deliver on time that's what almost all developer supposed to do even today. You can think or innovate but limited to your task, platform and team boundary.
That was also an time where client site technologies started emerging strongly but Microsoft was still adamant to recognize them and harping on Microsoft Ajax so was my seniors.
Gradually i realize the challenges faced by companies and products owner from business prospective that they want something more from just informal website or a product catalog website but i don't have any solution and neither they do, probably I was looking from the prism of a normal web application developer.
But something about to change very soon and the way I saw web application development from routine SRS, feature list based website, admin panel, etc., to holistic approach whichrevolve around content and more focused towards creating experience for both business users and their respective customers.
So end of 2008 I luckily get into a project for an Australian retail giant which wanted to build an E-retail website but on CMS or to be precise Sitecore. It was their choice. It is not that first time I used CMS, earlier we delivered a nice event management website using Kentico. But Sitecore was altogether from different breed of CMS.
A way this project was executed and how client perceive its website and targeted experience is totally different from traditional website for example when they want to sell a product like refrigerator than they not only 'sell' that but they also want to engage that customer beyond sales, they want to make sure that their website is capable of getting customer feedback real and easy, able to provide the relevant expert articles and advice, quick tips, reviews and they have videos to tell customer how to use it, so overall get best out of that product. It is all about making gradually brand loyalty. In end of the day that website is still huge catalog of products but put together in such a sleek way which is remarkable like faceted search, social integration though that point of time was very limited.
This project had changed my view towards the website application development and later projects in my career replace the word of web development to "Digital Experience Development". Because in all other later ventures clients are looking for deeper reach using online interface which could mean as follows:
1) Omni Channel delivery (One Code source for Mobile, Desktop and tablet device)
2) COPE (Create Once and Publish Everywhere)
3) Globalized and Localized content out of Box
4) Minimum effort to bring content live still compliance with Corporate and legal policies.
5) Easy to use emerging client side technology and RIA(Rich Interactive Application) Frameworks
6) Ability to integrate with Enterprise applications.
7) Support of product in ability to scale from one server to CDN and Cloud Delivery model.
8) Multisite/Multi Domain/Sub Domain Support
9) Most important personalized/targeted content delivery on variety of factor.
To fulfill these kinds of ambition there are very few products which able to cover length and breadth of digital landscape like Adobe CQ-5, Sitecore and few other.
5 years back in India there are hardly 50 people which are Sitecore or Adobe CQ5 certified with experience range of 3-7 years, though using my trainer skills i trained almost 100 people in Sitecore alone from all experience group in last two years. Big services companies like Cognizant, Infosys, Wipro, TCS not even know about such products. There are few small or mid-level IT services companies which have fewer engagements with their clients.
Let's come back from flash to reality and now if we realize today out of top 20 company almost every company have some or other HR requirements in ECMS/WCMS skills. Given the surge in the requirement we can notice two exciting/emerging facts:
a) Enterprise are waking after financial crisis era and ready for big makeover and want to progress or start their true digital journey.
b) Due to surge in this digital scope lot of Indian companies are bagging big digital transformation deals, and in my prediction this surge is to stay for atleast upcoming 2-3 years.
To analyses these facts I have few question which I will answer myself.
1) Are all requirements sounds similar in terms of scope?
  1. No not at all, in digital world there is one digital maturity model put by Sitecore that tell where the organization today stands in term of digital. So there are level of digital maturity. Getting content managed website is just at first step towards getting into digital foray. Remember this maturity model implies on both parties Customer and Implementer(Technical Agency), So right matching level of both parties can compliment and wrong level and make digital experience ugly. Please view following diagram.
2) Are these requirement are product specific?
  1. Sometimes yes but sometime no. This depends upon the multiple factor like:
i. Organization inclination towards particular brand, for example is it Microsoft or Java shop.
ii. Organization budget which not only include product license cost but also include development and maintenance in coming years.
iii. Who Consulted them and what is the outcome of that consultation.
3) Which platform get adopt most by the clients?
  1. If you look only mid-tier organization (Worth of 10 Million Dollar) to large enterprises (Billions Dollar Company) then .NET and Java would be most implementation with very few exception of going with PHP based CMS.
i. In .NET leading is Sitecore and then products like Ektron, EPI etc.,
ii. In Java leading is Adobe CQ5.
  1. If you look from quantity perspective which comes from SME (Worth less than 1 Million Dollar) is going with PHP CMS like Drupal, WordPress etc., which anyway handled by Tier 3 or lower strata IT services companies.
  2. To give you current prospective of CMS positioning I will refer Gartner's Magic Quadrant digram.
4) So these deals are very product centric?
  1. No, 60% of times these deals are enterprise level implementation where bridging with CRM, ERP, Ecommerce, Social and Big Data are part of it and that's where the money is but the driver are these products.
5) What are the domains from which clients are coming?
  1. Virtually every possible domain expect a core transnational website like net banking or trading. For example retail eCommerce to airliner, insurance group to medical world, entertainment to Consumer products group and manufacturing to government organisations.
6) Does development model and typical time-frame changes by using such products?
1. Yes people and companies are adopting agile methodologies in big way apart from that these products offer many features and ways which actually reduce the total time-frame of delivery of project if compares to typical development in traditional technologies.
7) So are these deal people centric / Or what is in for developers?
  1. Yes, as these are emerging technologies and given the fact that there are few people available who have length and bread of experience in these products. Because of this fact whatever people there are get very nice career growth. Still there is lot of scope for routine developers to get into these technologies and make themselves available.
8) So this sounds like only for those people who are actual code behind developers?
  1. 60% yes but there are other sphere also like UX designing, Business Analysts, IT administration of such products, Project management etc.,
9) Are you making all this facts up?
  1. My best bet is you put Sitecore or Adobe CQ or any other WCMS/ECMS kind of product experience in your resume and update it on job portal. You should definitely get one call within day or a week from any of these big companies.
10) Is this trend you see in Indian market also?
  1. Unfortunately a big NO, I guess Indian market is a decade back where companies are still building there web presence the way organization in developed countries build back in time. For this trend I see two reasons one is awareness or maturity level of understanding digital and another is cost. For example procuring Enterprise Sitecore license cost 120K Dollar and Adobe CQ5 cost around 3 times of it.
Last important conclusion i want to made is those days are about to go where clients demand website to build from scratch for formal and informal online presence(At least gone in developed countries, from where most of IT business comes to India). This is summary of digital trend which I experience in my last 7+ years. In coming months I will write about specific experiences in this journey to share my experience and learn from feedback I receive from your guys.