Scoped Variable in List Box

Question

There is a list box(e.g. list box A) contains values and if I click a button(e.g. button X), it will add the selected value to the other list box(e.g. list box B). After this action the list box B will have the select value to display.

In list box B (suppose it has values from list box A), if I click another button(e.g. button Y), the selected value from list box B returns to list box A

I follow the answer from this post and try to apply the code to the list box.

When I run it, I can add value(a single value only) from list box A. But I cannot move the value from list box B to list box A. I think the reason maybe about different scoped variable: list box A use view scope variable and list box B use session scope variable.

I search various posts in stackoverflow about exchange scope variable in list box but I still don't have the idea.

I post the code in cause it is useful. Thanks for your help.

<xp:table style="width:500.0px"><xp:tr><xp:td>B&#160;list box&#160;</xp:td>
        <xp:td></xp:td>
        <xp:td>A list box </xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>

        <xp:listBox id="listBox5" value="#{sessionScope.BLstBoxItem}"  style="width:100.0px">
                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:if   (!viewScope.selectItems) 
{
    viewScope.selectItems = ["a","c","g"];
 }
return viewScope.selectItems;}]]></xp:this.value>
                </xp:selectItems>
            </xp:listBox></xp:td>
        <xp:td>
            <xp:button id="button4" style="width:250.0px">
                <xp:this.value><![CDATA[<------ Values move to B list box]]>    </xp:this.value>
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
        viewScope.selectItems.add(viewScope.ALstBoxItem); 
        viewScope.ALstBoxItem = "";
       /*
        for(var i in ALstBoxItem){
            i--
        }
        return ALstBoxItem;

        */}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:br></xp:br>
            <xp:br></xp:br>
            <xp:button id="button2" style="width:250.0px">
                <xp:this.value><![CDATA[Values move to A list box ------>]]></xp:this.value>
                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
        sessionScope.selectItems.add(sessionScope.BLstBoxItem); 
        sessionScope.BLstBoxItem = "";
        /*
        for(var i in LLstBoxItem){
            i--
        }
        return BLstBoxItem;

        */}]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
        </xp:td>
        <xp:td>
            <xp:listBox id="listBox4"
                value="#{viewScope.ALstBoxItem}" style="width:100.0px">
                <xp:selectItem itemLabel="a"></xp:selectItem>
                <xp:selectItem itemLabel="b"></xp:selectItem>
                <xp:selectItem itemLabel="c"></xp:selectItem>
                <xp:selectItem itemLabel="d"></xp:selectItem>
                <xp:selectItem itemLabel="e"></xp:selectItem>
                <xp:selectItem itemLabel="f"></xp:selectItem>
                <xp:selectItem itemLabel="g"></xp:selectItem>
                <xp:selectItem itemLabel="h"></xp:selectItem>
                <xp:selectItem itemLabel="i"></xp:selectItem>
                <xp:selectItem itemLabel="j"></xp:selectItem>
            </xp:listBox>
        </xp:td>
    </xp:tr>
</xp:table>

Knut Herrmann Knut Herrmann · Accepted Answer · 2016-02-15T08:35:16

Use view scope variables only as you want to manipulate the values in current XPage only and don't want to set the values across different browser tabs or XPages.

With a click on your button, you want to add the selected value from first list to selectItem list to second list and remove it from first list. After adding a value it's good to sort the list.

This code does what you are looking for:

<xp:table
    style="width:500.0px">
    <xp:tr>
        <xp:td>B list box</xp:td>
        <xp:td></xp:td>
        <xp:td>A list box</xp:td>
    </xp:tr>
    <xp:tr>
        <xp:td>
            <xp:listBox
                id="listBox5"
                value="#{viewScope.BLstBoxItem}"
                style="width:100.0px"
                multiple="true">
                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:
                        if (!viewScope.BselectItems) {
                            viewScope.BselectItems = ["a","b","c"];
                        }
                        return viewScope.BselectItems;
                    }]]></xp:this.value>
                </xp:selectItems>
            </xp:listBox>
        </xp:td>
        <xp:td>
            <xp:button
                id="button4"
                style="width:250.0px">
                <xp:this.value><![CDATA[<------ Values move to B list box]]>
                </xp:this.value>
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
                        if (viewScope.ALstBoxItem) {
                            var sel = [].concat(viewScope.ALstBoxItem);
                            for (var i = 0; i < sel.length; i++) {
                                viewScope.BselectItems.add(sel[i]); 
                                viewScope.AselectItems.remove(sel[i]);
                            }
                            viewScope.BselectItems.sort(); 
                            viewScope.ALstBoxItem = "";
                        }
                    }]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
            <xp:br></xp:br>
            <xp:br></xp:br>
            <xp:button
                id="button2"
                style="width:250.0px">
                <xp:this.value><![CDATA[Values move to A list box ------>]]>
                </xp:this.value>
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:
                        if (viewScope.BLstBoxItem) {
                            var sel = [].concat(viewScope.BLstBoxItem);
                            for (var i = 0; i < sel.length; i++) {
                                viewScope.AselectItems.add(sel[i]); 
                                viewScope.BselectItems.remove(sel[i]);
                            }
                            viewScope.AselectItems.sort(); 
                            viewScope.BLstBoxItem = "";
                        }
                    }]]></xp:this.action>
                </xp:eventHandler>
            </xp:button>
        </xp:td>
        <xp:td>
            <xp:listBox
                id="listBox4"
                value="#{viewScope.ALstBoxItem}"
                style="width:100.0px"
                multiple="true">
                <xp:selectItems>
                    <xp:this.value><![CDATA[#{javascript:
                        if (!viewScope.AselectItems) {
                            viewScope.AselectItems = ["d","e","f","g","h","i"];
                        }
                        return viewScope.AselectItems;
                    }]]></xp:this.value>
                </xp:selectItems>
            </xp:listBox>
        </xp:td>
    </xp:tr>
</xp:table>

Update: the code works with multiple selection now too.

Scoped Variable in List Box

1 Answers