XPages扩展库名称选择器遇含撇号名称无法添加问题求助

问题描述 #

使用XPages扩展库（extlib）的名称选择器（name picker），通过Domino视图（而非NAB）查询名称，可正常完成搜索、选择并添加名称操作，但当用户名称中包含撇号时，点击「添加」按钮无任何反应，且无报错日志输出。相关代码如下：

<xp:inputText id="lstPELName" value="#{document1.PELName}"
        maxlength="0" style="display: none;">
        
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="refreshResponse">
            <xp:this.action><![CDATA[#{javascript:try{
document1.save();
// Set People Leader details
var agent:NotesAgent = database.getAgent("SetPELDetails");
agent.runWithDocumentContext(currentDocument.getDocument());

}catch(e){
    openLogBean.addError(e,this.getParent());
}}]]></xp:this.action>
        </xp:eventHandler>

    </xp:inputText>
        

<div class="col-xs-3 no-border" id="divPELPicker">      
    <xe:namePicker id="approversNamePicker" for="lstPELName">
        <xe:this.dataProvider>
            <xe:dominoViewNamePicker databaseName="ppg\dpi.nsf"
                viewName="CurrentProfilesByOwner" labelColumn="SystemName">
            </xe:dominoViewNamePicker>
        </xe:this.dataProvider>
        
        <xe:this.pickerText><![CDATA[#{javascript:"Select your People Leader:";
}]]></xe:this.pickerText>
    </xe:namePicker>
    </div>
<div class="col-xs-9 no-border" id="divPELName">
<xp:text escape="true" id="cmpPELName"
                        value="#{document1.PELName}">
                    </xp:text>
</div>

解决办法 #

1. 转义视图返回的名称中的撇号 #

名称选择器的前端JavaScript会将撇号视为字符串闭合符号，导致逻辑中断。通过给dominoViewNamePicker添加转换器，对返回的标签和值进行转义：

<xe:dominoViewNamePicker databaseName="ppg\dpi.nsf"
    viewName="CurrentProfilesByOwner" labelColumn="SystemName">
    <xe:this.valueConverter>
        <xp:convertString>
            <xp:this.convert><![CDATA[#{javascript:
                var val = value;
                if(val) {
                    return val.replace(/'/g, "&#39;");
                }
                return val;
            }]]></xp:this.convert>
        </xp:convertString>
    </xe:this.valueConverter>
    <xe:this.labelConverter>
        <xp:convertString>
            <xp:this.convert><![CDATA[#{javascript:
                var label = value;
                if(label) {
                    return label.replace(/'/g, "&#39;");
                }
                return label;
            }]]></xp:this.convert>
        </xp:convertString>
    </xe:this.labelConverter>
</xe:dominoViewNamePicker>

2. 自定义前端选择事件处理逻辑 #

覆盖名称选择器默认的onItemSelected事件，手动处理含撇号的名称，避免JS解析错误：

<xe:namePicker id="approversNamePicker" for="lstPELName">
    <xe:this.dataProvider>
        <xe:dominoViewNamePicker databaseName="ppg\dpi.nsf"
            viewName="CurrentProfilesByOwner" labelColumn="SystemName">
        </xe:dominoViewNamePicker>
    </xe:this.dataProvider>
    
    <xe:this.pickerText><![CDATA[#{javascript:"Select your People Leader:";}]]></xe:this.pickerText>
    
    <xe:this.onItemSelected><![CDATA[#{javascript:
        function(selectedItems) {
            var inputField = document.getElementById("#{id:lstPELName}");
            var selectedNames = [];
            for(var i=0; i<selectedItems.length; i++) {
                // 用反斜杠转义撇号，避免JS字符串截断
                var safeName = selectedItems[i].label.replace(/'/g, "\\'");
                selectedNames.push(safeName);
            }
            inputField.value = selectedNames.join(", ");
            // 触发输入框的onchange事件，执行后续保存逻辑
            if(typeof inputField.onchange === 'function') {
                inputField.onchange();
            }
        }
    }]]></xe:this.onItemSelected>
</xe:namePicker>

3. 后端字段保存时处理撇号 #

Notes文档存储中，单个撇号需要用两个撇号转义，确保保存时不会出错。修改onchange事件的后端逻辑：

try{
    var pelName = document1.getItemValueString("PELName");
    // 将单个撇号替换为两个，适配Notes文档存储规则
    pelName = pelName.replace(/'/g, "''");
    document1.replaceItemValue("PELName", pelName);
    document1.save();
    // 执行Agent逻辑
    var agent:NotesAgent = database.getAgent("SetPELDetails");
    agent.runWithDocumentContext(currentDocument.getDocument());
}catch(e){
    openLogBean.addError(e,this.getParent());
}

内容的提问来源于stack exchange，提问作者Chris Richards