Convert the scope variable to simple data binding

Question

Regarding this post: Scoped Variable in List Box. I have a question about convert the scope variable to simple data binding.

There is one combo box, two list boxes and two buttons. Those two list boxes can exchange values by click the relevant button. The list box values are related to the combo box value. For example, user choose a value from the combo box (e.g. 2), then the user can select move values from list box A to list box B and vice versa.

If I want to store those values (combo box value and list box value), I need a button and create a form and a view to store them.

After reading the answer from Paul Stephen Withers, I choose to use replaceItemValue and then call save(). I search on the internet about how to use replaceItemValue and finally I can save the value of list box A, list box B and the combo box. I can see the saved values in the view.

The code is like this:

document1.replaceItemValue("BListBoxField", viewScope.BselectItems)+ document1.replaceItemValue("AListBoxField", viewScope.AselectItems)+document1.replaceItemValue("ComboBoxField", comboBoxValue);
document1.save();

I need retrieve the value depends on the combo box value, I have the following actions:

In the combo box, I choose onchange event, in the server options, I select Partial Update and the the element that I need to update. (in my case I choose to partial update the table because both list box A and B are located there)

In the list box B, I need the relevant value depends on combo box value, so I use DbLookup to find the value. Therefore, in the script editor, I write the following code:

var comboBoxValue = getComponent("comboBox4").getValue();
if ((comboBoxValue == null) || (null == comboBoxValue))
{ return "No value here";}
else if ((comboBoxValue != null) || (null != comboBoxValue))
{ 
    var lookUpComboBoxValue = @DbLookup(@DbName(),"ViewName", comboBoxValue,3  )
return  lookUpComboBoxValue;
}

viewScope.BselectItems  = lookUpComboBoxValue;
   if (!viewScope.BselectItems) {
                        viewScope.BselectItems = [];
                    }
                    return viewScope.BselectItems;

In the list box A, it is similar to list box B and the code is like this:

var comboBoxValue = getComponent("comboBox4").getValue();
if ((comboBoxValue == null) || (null == comboBoxValue))
{ return "No value here";}
else if ((comboBoxValue != null) || (null != comboBoxValue))
{ 
 var lookUpComboBoxValue = @DbLookup(@DbName(),"ViewName", comboBoxValue,3 )
 return  lookUpComboBoxValue;
}

viewScope.AselectItems  = lookUpComboBoxValue;
   if (!viewScope.AselectItems) {
         viewScope.AselectItems = [];
    }
    return viewScope.AselectItems;

I run the code and choose "2" in the combo box, the list box can retrieve values related to "2".

But if I move the values in the list box, I get the exception: 'viewScope.AselectItems' is null. It highlight this code that trigger the exception:

viewScope.AselectItems.remove(sel[i]);

I review the code and I guess the error occurs in the list box value not the code in the button. I think this part is the reason that I have the error because if I remove that part of the code, no exception occurs:

viewScope.BselectItems  = lookUpComboBoxValue;
if (!viewScope.BselectItems) {
                        viewScope.BselectItems = [];
                    }
                    return viewScope.BselectItems;

To solve the exception, I find this post How can I know if a viewScope variable has been initialized is useful.

I add this code into the list box

if(viewScope.containsKey(BselectItems )){
                                viewScope.BselectItems .add(sel[i]);
                            }
                            else
                            {
                                return "not contains key"
                            }

I still get the exception

[ReferenceError] 'BselectItems' not found

At this moment, the problem seems return to the question again, do I need to convert the scope variable to simple data binding?

For save values, I can use replaceItemValue to save value. After save the value, if I need to retrieve the value, I can use DbLookup to find the value. But how to make that lookup value become exchangeable between list boxes?

Grateful for your advice. Thank you.

References:

https://www-10.lotus.com/ldd/ddwiki.nsf/dx/10082008104832AMDOCKD8.htm

https://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-scoped-variables.htm

Answer 1

I've not built something similar, so I don't have a complete step-by-step approach for you.

But there are a few concepts important to understand here in working out what to achieve what you want. Forgive me if you already understand them, but from this question and a similar previous one, I'm not certain of that.

• The value property of any editable component determines where the value should be retrieved from and stored to. It is a binding to where to store and load the value, not the visible value of the component. So, as you say, if you want to save values to a document, this needs to be e.g. #{document1.myField}.
• The defaultValue property of an editable component allows you to set the initial value for a component. However, bear in mind this will be overridden by the value binding in the value property. If you want to specify the value visible to the user overriding the value binding, go to that datasource and set the value there (e.g. #{javascript:document1.replaceItemValue("myValueField", "my new value")}
• The selectItems property determines what options are available for selection. It doesn't denote whether or not they're selected. So if you just add to selectItems without actually selecting them, there is nothing selected to save. You can interact with the component itself to update the selected values, but it's more advisable to interact with wherever the data is being stored, defined in the value property.

I would strongly recommend moving away from the Submit button type and the saveDocument simple action. The former will save all non-read-only datasources on your page, whether you intend to or not. The latter will just invoke a save.

One option is to leave the binding to viewScope variables, then in the button SSJS script use replaceItemValue to write the viewScope variable to the document1 datasource, then call the save().