2

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>
Community
  • 1
  • 1
Learner
  • 727
  • 4
  • 13

1 Answers1

2

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.

Knut Herrmann
  • 30,880
  • 4
  • 31
  • 67
  • thanks so much for your answer. When I am still looking at this [website](http://www.xpagedomino.com/2015/02/xpages-scoped-variables.html), your answer solve my problem. Thanks a lot. – Learner Feb 15 '16 at 09:02
  • I sometimes get confused between session scope variable and view scope variable, after I read this answer, it makes my concept much clear. – Learner Feb 15 '16 at 09:06
  • I explore more about list box, I find there is an option that allow multiple selections, when I enable the option for the two list boxes and run the code. The program does not allow me to move multiple values and give me this exception: java.util.ArrayList incompatible with javax.faces.model.SelectItem – Learner Feb 16 '16 at 02:13
  • I find this [post](http://stackoverflow.com/questions/20430987/java-lang-classcastexception-java-util-arraylist-cannot-be-cast-to-javax-faces) maybe similar. If I want to solve the exception, I guess I have to modify this code 'viewScope.BselectItems.add(viewScope.ALstBoxItem);', not sure whether it is a right direction to solve the exception, but I may have a try. – Learner Feb 16 '16 at 02:27
  • I extended my code. It does work for multiple selection now too. – Knut Herrmann Feb 16 '16 at 06:57
  • When I am still stuck at modify 'viewScope.BselectItems.add(viewScope.ALstBoxItem);' and attempt to use for in loop, the updated answer solved my problem. Really appreciate for your help. – Learner Feb 17 '16 at 06:15
  • I have one thing I don't understand. So far as I know, if I need to save values in a document , I have to use simple data binding, choose the proper data source and bind to the correct field. At the same time I need to create a view store and show the value. But in this case, the list box use view scope variable to store and display values, how can I save the values to a view? – Learner Feb 17 '16 at 08:42
  • Here is my first attempt: I use a button, in the events tab, select onclick event click add action, in all category, choose save document action, click ok. I don't see the value in the view. – Learner Feb 17 '16 at 08:48
  • I also use script editor and type 'document1.save();' and the value won't save. – Learner Feb 17 '16 at 08:49
  • I begin to think I should convert the scope variable to simple data binding but there is not much information on the internet to do that. – Learner Feb 17 '16 at 08:53
  • I think, you should put the last four comments in a separate question here on StackOverflow because they are not related to your List Box question. Add a simple code snippet to your question so people can see what you tried so far. Thanks. – Knut Herrmann Feb 17 '16 at 09:03