how to programmatically add a new entry?

Question

I have a name picker attached to the input but also want to allow type-ahead in a second field attached to the name picker, and then add the selected entry in the type-ahead control to the dojo name text box control.

In the typeahead onchange event, I can get the value of it and I can get the values in the Name Text Box control, but each entry in the NameTextBox is a spanned link like this:

<SPAN tabIndex=0 val="**abbreviatedNotesName**"><A class=lotusFilter tabIndex=-1 href="javascript:;">**commonNotesName**<SPAN class=lotusClose>x</SPAN></A></SPAN>

Do I need to re-write the innerHTML of the NameTextBox, and guess at the commonname from the typeahead result? Or, is there a better way? Thanks for any help/suggestions.

Here's the code:

<div id="copyToRow">
    <div class="namePickerContainer">
        <xe:namePicker id="namePicker1" for="fld_copyto_recipients">

            <xe:this.dataProvider>
                <xe:namePickerAggregator>
                    <xe:this.dataProviders>
                        <xe:dominoNABNamePicker addressBookSel="all"
                            nameList="peopleAndGroups">
                        </xe:dominoNABNamePicker>
                        <xe:dominoViewNamePicker labelColumn="$1"
                            viewName="($VIMPeople)" databaseName="#{javascript:viewScope.personalNAB;}"
                            label="#{javascript:viewScope.personalNABTitle;}">
                        </xe:dominoViewNamePicker>
                    </xe:this.dataProviders>
                </xe:namePickerAggregator>
            </xe:this.dataProvider>
        </xe:namePicker>
<xp:div id="copyToContainer" styleClass="addresseeContainer">
    <xe:djextNameTextBox id="fld_copyto_recipients"
        value="#{sendFilesDoc.file_CopyToRecipients}" multipleSeparator=","
        style="min-height:1.5em;" multipleTrim="true">
    </xe:djextNameTextBox>
    <xp:inputTextarea id="copyto_typeahead">
        <xp:typeAhead mode="partial" minChars="1"
            preventFiltering="true">
            <xp:this.valueList><![CDATA[#{javascript:getComponent("namePicker1").getTypeAheadValue(this)}]]></xp:this.valueList>
        </xp:typeAhead>

        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="copyToRow">
            <xp:this.script><![CDATA[var copyTo = XSP.getElementById("#{id:copyto_typeahead}");
var result = XSP.getElementById("#{id:copyToTA}");
var newEntry = '<SPAN tabIndex=0 val="' + copyTo.value + '"><A class=lotusFilter tabIndex=-1 href="javascript:;">' + copyTo.value + '<SPAN class=lotusClose>x</SPAN></A></SPAN>';
//Format: <SPAN tabIndex=0 val="<abbreviated NotesName>"><A class=lotusFilter tabIndex=-1 href="javascript:;">common NotesName<SPAN class=lotusClose>x</SPAN></A></SPAN>

result.value = copyTo.value;
var copyToRecipients = XSP.getElementById("#{id:fld_copyto_recipients}");
//<INPUT style="MIN-HEIGHT: 1.5em" id=view:_id1:include1:fld_copyto_recipients type=text name=view:_id1:include1:fld_copyto_recipients dojoType="extlib.dijit.NameTextBox">
var copyToValue = copyToRecipients.innerHTML;
alert('copytorecipients innerHTML = ' + copyToValue);
alert('copytorecipients value = ' + document.getElementById("#{id:fld_copyto_recipients}").value);  <-- undefined

var copyToArray = new Array();
var a = document.getElementsByName("#{id:fld_copyto_recipients}");
copyToArray = (a[0].value.split(','));

copyToArray.push(result.value);
//copyToRecipients.value = copyToArray.join(',');   <-- this does not work
alert('copyToArray value = ' + copyToArray.join(','));
result.value = copyToArray.join(',');

copyTo.value = "";
return;]]></xp:this.script>
        </xp:eventHandler>
    </xp:inputTextarea>
</xp:div>

<xp:inputText id="copyToTA">

</xp:inputText>
</div></div>

score 0 · Accepted Answer · edited May 23 '17 at 12:27

What I think was tripping me up was required validation on the NameTextBox seemed to prevent the onchange event in the typeahead from firing. Who knows? Went through a lot of iterations ... I ended up adding Tommy Valand's JS function to control when validation is triggered & that seemed to fix things.

Bound the NameTextBox to the datasource field. Bound the typeahead to a requestScope variable. The typeahead onchange event code below also does a partial refresh on a container panel that wraps the 2 inputs.

/* append the typeahead name to those already selected */
var curVals:java.util.Vector = sendFilesDoc.getItemValue("file_SendToRecipients");
curVals.addElement(requestScope.sendToTypeAhead);
sendFilesDoc.replaceItemValue("file_SendToRecipients",curVals);
requestScope.sendToTypeAhead = null;

Then in the NameTextBox onChange event that also partial refreshes the container panel:

    /*
    remove duplicates that can be picked if the format of the displayed name in the right panel of the 
    name picker dialog doesn't match the column returned from the picker -- for instance, this will
    happen on internet-style names stored in the user's personal names.nsf
    e.g. FName LName <user@somecompany.com>
*/

    var thisField:javax.faces.component.UIInput = getComponent("fld_sendto_recipients");
    var theNames = @Unique(thisField.getValue());
    thisField.value = theNames;

So you end up with something similar to how MSN hotmail works. Just have one final issue to try to resolve and that's how to get the cursor to return to the typeahead field after either using the namepicker or making a typeahead choice. Added this code as per this post on the client onchange event of the NameTextBox but the cursor just jumps into the typeahead field but then immediately jumps out:

    /* set focus back on the typeahead input -- the input is a child of the typeahead dojo widget */
/* matches any <input> that is a child of the .dijitInputField class of the <div> for the typeahead */
var el = dojo.query('div[widgetid*="sendto_typeahead"] .dijitInputField > input').at(-1)[0].focus();

Any help??? Or, suggestions for solution improvement??

how to programmatically add a new entry?

1 Answers1