Customizing Person card actions

You can use the theme to add items to the Person card's More actions menu in any portlet that uses the AJAX person tag. I wanted to try this feature and it seems that there is one error in the steps provided in Info center

  • First i had to add following code to the theme_en.html(theme_en.html is static html page used by PageBuilder2 theme to decide layout of the page), this code declares Test Action


    <div class="com.ibm.portal.action" style="display:none;">
    <span class="action-id">test.action1</span>
    <span class="action-impl">/javascript/TestAction.js</span>
    <span class="action-context">person</span>
    <span class="action-label">Test Action</span>
    <span class="action-description">This is a test for extending Person menu</span>
    <span class="action-showif">TestAction.showif</span>
    <span class="action-url">javascript:TestAction.execute(@@@ARGS@@@)</span>
    <span class="action-order">0</span>
    </div>


  • Next create TestAction.js file like this

    var TestAction = {
    showif: function(person) {
    return true;
    },
    execute: function(person) {
    alert("TestAction executed for: " + person.fn);
    }
    }

    The showif function gets called by the theme to decide if the TestAction should be displayed for persontag. I am returning true always, so the Test Action will always get displayed.

    The execute function will get called when user clicks on the Test Action. Here i am displaying alert with user name

  • As per Info center i can copy the TestAction.js in the JavaScript folder on webserver but it seems that part does not work,



    When i tried accessing the Person Tag, i could see that it was making a request to /wps_semanticTag/javascript/TestAction.js?language=en_US URL and that was failing so the Test Action did not get displayed.

  • I did some debugging to figure out what is happening and it seems that the logic related to read the com.ibm.portal.action micro-format is part of semanticTagService.js, there is JavaScript function which reads value of action-impl, which is /javascript/TestAction.js in my case adds /wps_semanticTag to it and includes that javascript using script tag in the page

    loadScript: function() {
    var scriptElem = document.createElement("script");
    var url = SemTagSvcPortal.connUrl;
    url += (url.indexOf("?")==-1)? "?": "&";
    url += "lang=" + SemTagSvcPortal.lang;
    scriptElem.src = url;
    document.body.insertBefore(scriptElem, document.body.firstChild);
    }

    Since i dont have anything in that directory it fails
  • So i spent some time trying to figure out which application is mapped to the /wps_semanticTag url and it seems that there is liveobjects.war file like this


    So i copied my TestAction.js to /software/IBM/WebSphere/PortalServer/ui/wp.tagging.liveobject/semTagEar/Live_Object_Framework.ear/liveobjects.war/javascript folder and tried again and now it works







YOu can also extend the person tag at portlet level by adding the <div class="com.ibm.portal.action" style="display:none;"> inside the portlet markup. I changed my persontag.jsp so that it looks like this

<%@page language="java" contentType="text/html; session="false"%>
<%@taglib prefix="person" uri="/WEB-INF/tld/people.tld"%>
<%@taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model"
prefix="portlet-client-model"%>
<portlet-client-model:init>
<portlet-client-model:require module="ibm.portal.xml.*" />
<portlet-client-model:require module="ibm.portal.portlet.*" />
</portlet-client-model:init>
<portlet:defineObjects />

<h3>PersonTag Portlet</h3>

<person:person value="uid=sunil,o=defaultWIMFileBasedRealm" valueType="LDAPDN" displayName="Sunil Patil" /> <br/>
<person:person value="uid=jiya,o=defaultWIMFileBasedRealm" valueType="LDAPDN" displayName="Jiya Patil" />

<div class="com.ibm.portal.action" style="display:none;">
<span class="action-id">test.action2</span>
<span class="action-impl">/javascript/TestAction.js</span>
<span class="action-context">person</span>
<span class="action-label">Test Portlet Action</span>
<span class="action-description">This is a test for extending Person menu inside portlet</span>
<span class="action-showif">TestAction.showif</span>
<span class="action-url">javascript:TestAction.execute(@@@ARGS@@@)</span>
<span class="action-order">0</span>
</div>



Now when i try accessing the person tag i see Test Action contributed by theme.html and Test Portlet Action contributed by portlet, but the second menu shows up only when i access the persontag inside the portlet.

4 comments:

zhangsanlisi said...

First i had to add following code to the theme_en.html(theme_en.html is static html page used by PageBuilder2 theme to decide layout of the page), this code declares Test Action

srjwebsolutions said...

We are leading responsive website designing and development company in Noida.
We are offering mobile friendly responsive website designing, website development, e-commerce website, seo service and sem services in Noida.

Responsive Website Designing Company in Noida
Website Designing Company in Noida
SEO Services in Noida
SMO Services in Noida

Vikas Chaudhary said...

Battery Mantra is Authorized exide car battery dealer in Noida and Greater Noida. We are providing our service in Indirapuram, Delhi, Ashok Nagar.

Exide Battery Dealer in Noida
Battery Dealer in Noida
Authorized Battery Dealer in Noida
Car Battery Dealer in Noida
Car Battery Dealer
Exide Battery Dealer

EG MEDI said...

Egmedi.com is online medical store pharmacy in laxmi nagar Delhi. You can Order prescription/OTC medicines online.
Cash on Delivery available. Free Home Delivery


Online Pharmacy in Delhi
Buy Online medicine in Delhi
Online Pharmacy in laxmi nagar
Buy Online medicine in laxmi nagar
Onine Medical Store in Delhi
Online Medical store in laxmi nagar
Online medicine store in delhi
online medicine store in laxmi nagar
Purchase Medicine Online
Online Pharmacy India
Online Medical Store