XPages Tip: Dependent Drop-Down Lists

This post describes how to create dependent drop-down lists in XPages. When the value in the first drop-down list is selected, it refreshes the second drop-down list, whose list of options is based on the value in the first field.

Field #1 has a list of options (generally from a DbColumn() or keywords). On its onchange event, it triggers calls a partial refresh on Field #2.

Field #2 has a list of options (generally from a DbLookup() or keywords) that is based upon the selection in Field #1. When Field #1 is updated, this field is refreshed and its list of choices is updated. (It starts out blank.)

Example

Here’s the source of Field 1, which triggers a partial refresh on Field 2 in the onchange event:

<xp:comboBox id="cbField1"
  value="#{doc.Field1}" defaultValue="">
  <xp:selectItems>
    <xp:this.value>
      <![CDATA[#{javascript:return @DbLookup('', 'vwKeywords', 'TopLevelKeywordName', 'ValueFieldName', '[FAILSILENT]');}]]>
    </xp:this.value>
  </xp:selectItems>
  <xp:eventHandler
    event="onchange" submit="true"
    refreshMode="partial" refreshId='cbField2'>
  </xp:eventHandler>
</xp:comboBox>

Here’s the source of field 2, which reads the value form field 1 when building its list of options:

<xp:comboBox id="cbField2"
  value="#{doc.Field2}" defaultValue="">
  <xp:selectItems>
    <xp:this.value>
      <![CDATA[#{javascript:var field1Value = getComponent("cbField1").getValue();
return @DbLookup('', 'vwKeywords', field1Value, 'ValueFieldName', '[FAILSILENT]');}]]>
    </xp:this.value>
  </xp:selectItems>
</xp:comboBox>