Xpages Dependent Field Lookups

Question

I cannot get a simple two field dependency in Xpages to work.

Field1 is a combo box whose choices come from a DBLookup.

Field2 is a combo box whose choices come from a DBLookup that uses the value from Field1 to subset the selections.

My code is below:

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view xmlns:xp="http://www.ibm.com/xsp/core"
        xmlns:xp_1="http://www.ibm.com/xsp/coreex">
        <xp:this.data>
            <xp:dominoDocument var="document1" formName="timeEntry"></xp:dominoDocument>
        </xp:this.data>

        <xp:comboBox id="comboBox1">
            <xp:this.defaultValue><![CDATA[#{javascript:""}]]></xp:this.defaultValue>
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    @DbColumn(db, "workCategoryView", 1)}]]></xp:this.value>
            </xp:selectItems>
            <xp:eventHandler event="onchange" submit="true"
                refreshMode="complete">
            </xp:eventHandler>
            </xp:comboBox>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:comboBox id="comboBox2">
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    var key:String = document1.getItemValueString("comboBox1");
    @DbLookup(db,"(DBLookupWorkSubCategoryView)",key,2);}]]></xp:this.value>
            </xp:selectItems>
        </xp:comboBox>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    var key:String = document1.getItemValueString("djFilteringSelect1");
    @DbLookup(db,"(DBLookupWorkSubCategoryView)",key,2);}]]></xp:this.value>
            </xp:selectItems>

    </xp:selectItems></xp:view>

I updated the code as you suggested but it STILL doesn't work.

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view xmlns:xp="http://www.ibm.com/xsp/core"
        xmlns:xp_1="http://www.ibm.com/xsp/coreex">
        <xp:this.data>
            <xp:dominoDocument var="document1" formName="timeEntry"></xp:dominoDocument>
        </xp:this.data>

        <xp:comboBox id="comboBox1" value="#{document1.workCategory}">
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    @DbColumn(db, "workCategoryView", 1)}]]></xp:this.value>
            </xp:selectItems>
            <xp:eventHandler event="onchange" submit="true"
                refreshMode="partial" refreshId="comboBox2">
            </xp:eventHandler>
        </xp:comboBox>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:comboBox id="comboBox2" value="#{document1.workSubCategory}">
            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript://var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    var key:String = document1.getItemValueString("comboBox1");
    //@DbLookup(db,"(DBLookupWorkSubCategoryView)",key,2);
    //var key = document1.getItemValue("comboBox1");
    //var key = currentDocument.getItemValueString("comboBox1")
    key

    //var item = document1.getValue("comboBox1");
    //return item;}]]></xp:this.value>
            </xp:selectItems>
        </xp:comboBox>
        <xp:br></xp:br>
        <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    var key:String = document1.getItemValueString("djFilteringSelect1");
    @DbLookup(db,"(DBLookupWorkSubCategoryView)",key,2);}]]></xp:this.value>
            </xp:selectItems></xp:view>

Answer 1

Things to change:

• change your onChange event to a partial refresh of the 2nd combobox

• bind your comboboxes to fields on document1. Right now they are not bound and you can therefore not get the selected value by using document1.getItemValueString()

• remove the 3rd selectItems tag that you have placed outside of your comboboxes

Answer 2

I noticed that code in value attribut is evaluated 2 times, so I prefer make lookup or calculation on events :

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1"
            formName="TestComboDependency">
        </xp:dominoDocument>
    </xp:this.data>

    <xp:this.beforePageLoad><![CDATA[#{javascript:
        viewScope.choiceList1 = @DbColumn("", "($LkpChoiceList1)", 1);
        viewScope.choiceEmpty2 = " --- Select a value for combo1 before --- ";
        viewScope.choiceList2 = null;
    }]]></xp:this.beforePageLoad>

    <xp:comboBox id="comboBox1" value="#{document1.Combo1}">
        <xp:selectItem
            itemLabel=" --- Select a value --- "
            itemValue=""
            id="selectItem1" />
        <xp:selectItems
            value="#{viewScope.choiceList1}"
            id="selectItems1" />
        <xp:eventHandler event="onchange" submit="true"
            refreshMode="partial" refreshId="comboBox2"
            disableValidators="true">
            <xp:this.action><![CDATA[#{javascript:
                var sKey:string = document1.getItemValueString("Combo1");
                viewScope.choiceEmpty2 = " --- Select a value --- ";
                viewScope.choiceList2 = @DbLookup("", "($LkpChoiceList2)", sKey, 2);
            }]]></xp:this.action>
        </xp:eventHandler>
    </xp:comboBox>

    <xp:comboBox id="comboBox2" value="#{document1.Combo2}">
        <xp:selectItem
            itemLabel="#{viewScope.choiceEmpty2}"
            itemValue=""
            id="selectItem2" />
        <xp:selectItems
            value="#{viewScope.choiceList2}"
            id="selectItems2" />
    </xp:comboBox>

</xp:view>