#Name within repeat - xpages

Question

I have an app I am build which will allow the users to enter the approvers for each document manually. I wanted to put this in a repeat control instead of hard coding all the fields in the xpage. All is working as I want, except the names are stored in the document in the Canonical format. I don't want to present this to the user, I want to just show the Abbreviated name. I can't seem to get it working. Below is my repeat. I want to put and #name around the value of ApproverName_#
Thanks in Advance
Walt
<xp:repeat
id="repeat4"
var="rowItem"
indexVar="indexVar">
<xp:this.value><![CDATA[#{javascript:["1", "2", "3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"]}]]></xp:this.value>
<xp:panel>
<xp:repeat
id="repeat3"
var="fieldName">
<xp:label id="label31"><xp:this.value><![CDATA[#{javascript:"Approver - " + rowItem}]]></xp:this.value></xp:label><xp:label id="label33" value="Name"></xp:label>
<xp:this.value><![CDATA[#{javascript:["ApproverName_"+rowItem]}]]></xp:this.value>
<xp:inputText id="nameinputText"
value="#{document1[fieldName]}"
style="width:333.0px" rendered="#{javascript:!document1.isEditable()}">
</xp:inputText>
<xp:inputText id="inputText9" value="#{document1[fieldName]}" style="width:333.0px">
</xp:inputText>
<xe:namePicker id="namePicker1"
for="nameinputText">
<xe:this.dataProvider>
<xe:dominoNABNamePicker
nameList="peopleByLastName"
addressBookSel="db-name" groups="false"
people="true">
<xe:this.addressBookDb><![CDATA[#{javascript:#Subset(#DbName(), 1) + "!!names.nsf"}]]></xe:this.addressBookDb>
</xe:dominoNABNamePicker>
</xe:this.dataProvider>
</xe:namePicker></xp:repeat>
<xp:repeat id="repeat5" var="fieldName">
<xp:this.value><![CDATA[#{javascript:["Title_"+rowItem]}]]></xp:this.value>
<xp:label id="label32" value="Title"></xp:label>
<xp:inputText id="inputText10"
value="#{document1[fieldName]}">
</xp:inputText>
</xp:repeat>
<xp:repeat
id="repeat6"
var="fieldName">
<xp:this.value><![CDATA[#{javascript:["ApprovalFlag_"+rowItem]}]]></xp:this.value>
<xp:inputText id="inputText11" value="#{document1[fieldName]}">
</xp:inputText>
</xp:repeat>
<xp:repeat
id="repeat7"
var="fieldName">
<xp:this.value><![CDATA[#{javascript:["Reason"+rowItem]}]]></xp:this.value>
<xp:inputText id="inputText12" value="#{document1[fieldName]}">
</xp:inputText>
</xp:repeat>
</xp:panel>
</xp:repeat>

Answer 1

Use the Dojo Name Text Box instead of Input Field. It prevents typing, gives a better UX for removing entries, and does what you want out-of-the-box.