Displaying common names of user with Name Picker

I have been trying out Extension Library and I must say I am really impressed with it. One of my favorite control there is Name Picker. The only problem with that is the input control whose value is set by name picker needs to be in edit mode and it shows the selected names in abbreviated format. In one of our application we wanted to show common names and the input control to be non-editable so that user could not play around with values.

So I created a simple work around for this one. First, create a hidden input  which will store the selected names in abbreviated format and set this in for property of name picker. Second, create a computed field which show common names from hidden input you just created. Now for the hidden input create an onchange event which will partial refresh the computed field. And you are done!

Below is the sample XPage code of the workaround.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:namePicker id="npUserNames" for="hdnUserNames">
        <xe:this.dataProvider>
            <xe:dominoNABNamePicker addressBookDb="names.nsf"></xe:dominoNABNamePicker>
        </xe:this.dataProvider>
    </xe:namePicker>
    <xp:inputHidden id="hdnUserNames" multipleTrim="true">
        <xp:this.multipleSeparator><![CDATA[#{javascript:","}]]></xp:this.multipleSeparator>
        <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="cfUserNames"></xp:eventHandler>
    </xp:inputHidden>
    <xp:text escape="true" id="cfUserNames">
        <xp:this.value><![CDATA[#{javascript:@Name("[CN]", getComponent("hdnUserNames").getValue())}]]></xp:this.value>
    </xp:text>
</xp:view>