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.

1 comment:

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