Placing results from Name Picker into a read only control

Question

I'm using the Name Picker from the Extension Library in XPages and I'm placing the results into a multi line Edit Box.

How can I make the Edit Box read-only so that the end user cannot edit the names selected except with the Name Picker?

I tried setting the read-only property but that hides the control as well.

I also tried placing the results into a hidden field and then displaying the results in a computed field using a line feed as the delimiter, but making the target control not visible also makes the control not visible.

score 4 · Answer 1 · answered Feb 14 '13 at 19:08

You can combine the namePicker with the djextNameTextBox control from the Extension Library. This control only allows the user to delete a name (and not edit it).

<xe:djextNameTextBox id="testField" value="#{document.TestField}"></xe:djextNameTextBox>
<xe:namePicker id="namePicker1" for="testField" dialogTitle="Pick a name">
    <xe:this.dataProvider>
        <xe:dominoNABNamePicker addressBookSel="all-public" nameList="people"></xe:dominoNABNamePicker>
    </xe:this.dataProvider>
</xe:namePicker>

I understand if you want to use an edit box instead of the djextNameTextBox because of the way it looks. If that is the case then a little bit of custom CSS can probably help you :-)

I had the same problem as Bill. Thank you for the tip - but unfortunately the namepicker-dialog does not close after clicking on "ok". I figured out, that the behaviour of the namepicker depends on what target has been given to display the selected names. Any ideas? — CarpeTempus_, Jan 28 '14 at 10:49

score 3 · Answer 2 · answered Mar 29 '13 at 20:40

3

Use the maxlength property. This will stop people typing into the field directly

<xp:inputText id="inputText1"
value="#{viewScope.adminOwner_Tx}" maxlength="0"
style="width:300px">
</xp:inputText>

answered Mar 29 '13 at 20:40

Sean Cull

503
3
17

score 1 · Answer 3 · edited May 23 '17 at 12:07

I use workaround using hidden field <xp:hidden> and computed field. I described this on my blog http://naveegator.blogspot.com/2012/06/displaying-common-names-of-user-with.html.

Below is the code snippet:

<?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>

You could also look into Sven's answer in this question "ReadOnly field in Xpage not submitted" on how to make read only fields.

score 1 · Answer 4 · edited Feb 17 '13 at 20:55

Thanks for the responses. I used a bit of several responses here and in the XPages Lotus Forum.

I created the dojo Names PIcker and pointed it at a text control called Approvers and set the MultipleSeparator to "," in the Approvers Control
Add a Multi Line Text Box that I called ApproversDisplay, Set this to read-only and don't bind it to the data object and the default value of
```
var Rel = getComponent('Approvers').getValue();
return @Implode(Rel,"\n")
```
which separates each value with a new line.
Set the onchange event on the Approvers control to do a Partial Refresh on ApproverDisplay.
in the source I set the style property display:none this does not hide the Name Picker like the visible property does.

I'm pretty new to XPages so some might consider that there is a better way, but after more hours than I really want to count !It Works!

score 1 · Answer 5 · answered Apr 29 '15 at 06:59

A workaround for these cases I tend to use, similar to Bill F & Naveen (but maybe a little more cleaned up):
enclose your picker target field in a div, and hide it by applying "display:none" as style. This way, it is rendered on the page which makes it accessible, but not visible.
For displaying any changes made by the picker to this field, I add an onchange event refreshing a panel which includes a computed field. Additionally, you can style the display of the names in the computed field as you like (two examples in the code).

<xp:div style="display:none;">
    <xp:inputText id="yourfield" value="#{yourdocument.yourfield}" multipleSeparator=";">
        <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="surroundingpanel"></xp:eventHandler>
    </xp:inputText>
</xp:div>

<xp:panel id="surroundingpanel">

    <!-- displaying names abbreviated, separated by default multi-separator , -->
    <xp:text escape="true" id="computedFieldExample1" value="#{yourdocument.yourfield}">
        <xp:this.converter> <!-- converter is optional -->
            <xp:customConverter>
                <xp:this.getAsString><![CDATA[#{javascript:@Name("[ABBREVIATE]", value)}]]></xp:this.getAsString>
                <xp:this.getAsObject><![CDATA[#{javascript:@Name("[CANONICALIZE]", value)}]]></xp:this.getAsObject>
            </xp:customConverter>
        </xp:this.converter>
    </xp:text>

    <!-- displaying names abbreviated one below each other -->
    <xp:text escape="false" id="computedFieldExample2">
        <xp:this.value><![CDATA[#{javascript:@Implode(@Name("[ABBREVIATE]", yourdocument.getItemValue("yourfield")), "<br />")}]]></xp:this.value>
    </xp:text>

    <xe:namePicker id="namepicker1" for="yourfield">
        <xe:this.dataProvider>
            <xe:dominoNABNamePicker nameList="peopleByLastName"></xe:dominoNABNamePicker>
        </xe:this.dataProvider>
    </xe:namePicker>
</xp:panel>

Placing results from Name Picker into a read only control

5 Answers5