Programmatically Select Combobox Value

Question

I have a combobox on an xPage that is populated via a JavaScript file.

This xPage also has a postNewDocument event that calls a LotusScript agent which pre-populates most of the fields on the xPage from the in-memory document, which works for all but this type of field, since the values of the combobox aren't populated until the JavaScript file is called for that field.

The most efficient way I can see to select the combobox entry from the in-memory document, is to put the value from the document into a text field, and then read it from that field. Here is what's in the Values field of the combobox:

var rArray = getItemOptions();
var prevCountry = getComponent("Org_Country").getValue();
var opt;
if ((prevCountry != "") && (prevCountry != null)){
  for (var i=0; i < rArray.length; i++) {
    rArray[i];
    opt = rArray[i];                    
    if (opt.contains(prevCountry)) {        
        rArray.selectedIndex = i;
    }
  }
}
return rArray;

And here's what a bit of the source code looks like:

<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">American Samoa</option>

What I believe I need to do is set selected="selected" but there are no "options" in rArray. I've tried other variations such as rArray[i].selected = true and rArray[i].selected = "selected" and they don't produce errors, but just produce the whole combobox.

I want to have the previously selected combobox item selected, but leave it in the same position in the combobox and allow the user to change their selection.

Here is the markup for my combobox:

<xp:comboBox id="Country" value="#{document1.Country}" styleClass="form-control">
   <xp:selectItems>
       <xp:this.value><![CDATA[#{javascript:return getItemOptions();}]]> </xp:this.value>
   </xp:selectItems>
    <xp:eventHandler event="onchange" submit="true" refreshMode="partial"
    disableValidators="true"
    refreshId="Province">
    <xp:this.action><![CDATA[#{javascript:var selected = getComponent("Country").value;
viewScope.put("countrySelected", selected);}]]></xp:this.action>
    <xp:this.onComplete><![CDATA[$("form").formValidation("addField", "#{id:Province}");
]]></xp:this.onComplete>
    </xp:eventHandler>
</xp:comboBox>

What I have started on now is putting this code in the onClientLoad event, but I haven't gotten it to work.

The numbers for the countries have come from a database I obtained elsewhere but I can change them.

What does your markup for the combox look like? The xp one. Usually you just bind the value to the backing document. One trick: prepopulate the drop down with the one value that’s in the document server side. On a side note: don’t use numbers for countries. Use iso codes — stwissel

TrailDragon TrailDragon · Accepted Answer · 2018-03-17T10:35:29

(I am making some assumptions in this answer - namely that when you say that you are using javascript, you do mean SSJS because of the way you are calling getItemOptions in your combobox values).

xp:comboBox has a 'defaultValue' property which you can set programmatically. The XPage control might look something like this:

<xp:comboBox id="comboBox1" value="#{document1.Country}"
    defaultValue="#{viewScope.defaultValue}">
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:return getItemOptions()}]]></xp:this.value>
    </xp:selectItems>
</xp:comboBox>

(This example loads the default value into a viewScope variable called 'defaultValue' using SSJS which can be done in any event in the lifecycle up to and including beforeRenderResponse - e.g. postNewDocument).

If you wanted to read a value from a field into the default value, you could do so with:

<xp:this.defaultValue><![CDATA[#{javascript:getComponent("Org_Country").getValue()}]]></xp:this.defaultValue>

but the field with the default value should come before the comboBox so that it renders first and give the comboBox it's value.

Remember that the selected value should contain the "value" and not the "label" - so in your countries example, you would put '3' if you wanted 'Algeria' to display. (But I concur with @stwissel's comment that it would be better practice to use ISO codes for countries instead of numbers and save the ISO code to the document.)

Also note that the SelectedIndex property you were trying to set with your rArray code is actually a property of the control and not the values. Using regular CSJS, you would use something like

 document.getElementById("mySelect").selectedIndex = 2

where 'mySelect' is the id of the comboBox and 'selectedIndex' is the numeric position of the option in the values list (with 0 being the first option).

As an aside, I would note that using a LotusScript agent to pre-populate values on a new document for an XPage seems a very Lotus Notes way of doing things and may complicate matters for yourself. I would suggest looking at how to use Java Beans which will do exactly the same job plus easily let you put in default or pre-selected values without the need to write to a field unnecessarily.

Programmatically Select Combobox Value

2 Answers