Customize the person menu through services

You can use services to add custom items to the person menu in any portlet that uses the AJAX person tag.

1. In the PortalServer_root\ui\wp.tagging.liveobject\semTagEar\Live_Object_Framework.ear\Live_Object_Framework.war\javascript directory, locate the service file, service.entries.js.

2. Open the file in a text editor.

3. Add an entry for the service that should be invoked for a particular semantic tag. For example, to invoke the ask.js service on finding the semantic tag hcard, the new entry might look like this:

   ,{"id":"hcard","test":"(node.className.match(SemTagSvc.hcardRE))","js":"/javascript/ask.js"}
   

4. Modify the semanticTagPerson.js file by adding code that pushes the new menu item.

   For example:

   menuitemJsons.push(SemTagSvc.getMenuItemJson("Ask.com...", "http://www.ask.com/web?q=" + person.fn, -10));    
   

   Add this line to the update function section of the semanticTagPerson.js file as shown in the example below:

    update: function (person, currElem, event) {    
        if (SemTagSvc.trace) SemTagUtil.log("Person.update");    
               
   
   SemTagPerson.currentPerson = person; // for extenders to access    
       
        var parentVcard = SemTagSvc.getParentByClassName("vcard", currElem);    
       
        var headerOnly = SemTagUtil.getHcardAttributeValue("X-person-header-only", parentVcard);    
        if (headerOnly) person._headeronly = true;    
        SemTagPerson.readHcardContext(parentVcard, person);    
       
       // OKOETH    
   
   SemTagSvc.setSemanticTagValue("hcard", currElem, person);    
               
        if (SemTagPerson.isInline(parentVcard)) {    
            var out = new SemTagPerson.out();    
            SemTagPerson.getInlineMarkup(person, SemTagSvc.bidi, out);    
            parentVcard.innerHTML = out.buffer;    
            //var dom = SemTagPerson.getInlineMarkup2(person, SemTagSvc.bidi, out);    
            //parentVcard.appendChild(dom);    
       
            var classAttrs = SemTagUtil.getNodeClassValue(parentVcard);    
            SemTagUtil.setNodeClassValue(parentVcard, classAttrs.replace(/vcard/, "vcard-done"));    
            if (headerOnly) {    
                var inner = SemTagSvc.getElementsByClassName("vcard", parentVcard, 1);    
                if (inner) SemTagPerson.processHcards( inner );    
           }    
       }    
        else {    
            var menuitemJsons = new Array();    
            var cssSelector = "personMenuActions";    
            var headerHtml = new SemTagPerson.out();    
            var footerHtml = new SemTagPerson.out();    
       
            menuitemJsons.push(SemTagSvc.getMenuItemJson("Ask.com...", "http://www.ask.com/web?q=" + person.fn, -10));    
       
            SemTagPerson.getMarkup(person, SemTagSvc.bidi, menuitemJsons, cssSelector, headerHtml, footerHtml);    
       
            SemTagSvc.setMenuData(event, menuitemJsons, cssSelector, SemTagSvc.getMenuHeaderJson(headerHtml.buffer, "text/html", -100), SemTagSvc.getMenuFooterJson(footerHtml.buffer, "text/html", -100));    
       }    },    
   

5. Create a JavaScript™ file named ask.js. In the example below, this file acts as the service for the semantic tag hcard, and is initialized when the hcard tag is found in the document object model, opening the Ask.com Web page:

   var AskSvc = {
       init: function() {
           SemTagSvc.setCallback('hcard',AskSvc.hcardsAdded);
           AskSvc.processHcards(SemTagSvc.getNodes('hcard'));
       },
   
       hcardsAdded: function() {
           AskSvc.processHcards(SemTagSvc.getNodes('hcard'));
       },
   
       processHcards: function(hcards) {
           for (var i=0; i<hcards.length; i++) {
               var nameElem = SemTagSvc.findNameElementInHcard(hcards[i]);
               SemTagSvc.addHover(nameElem, AskSvc.showHover, AskSvc.showMenu);
           }
       },
   
       showHover: function(event) {
           SemTagSvc.showHover(event, AskSvc.showMenu);
       },
   
       showMenu: function(event) {
           var nameElem = SemTagSvc.getLiveElementFromEvent(event)
           var nameStr = SemTagSvc.getTextValue(nameElem);
           var miJsons = new Array();
           miJsons.push(SemTagSvc.getMenuItemJson("Ask.com...", "http://www.ask.com/web?q=" + nameStr, 0));
           SemTagSvc.setMenuData(event, miJsons);
       }}
    AskSvc.init();
   

6. Restart the portal server.

7. To verify that the new menu item was added to the person menu, open a portlet such as the People Finder that supports people awareness and then open the person menu for a selected user. Verify that the menu displays the item you added (for example Ask.com) and that the item performs the expected action.

Parent topic:

Collaborative Services API

---