XPages - Dojo Filtering Select - save both label and value

Question

I'm using a Dojo Filtering Select control on an XPage and would like to save both the label and value when the XPage is saved. Is it possible for me to save both values to either the same or separate fields?

Answer 1

You'd like to set a document's field to the corresponding label of currently selected value.

The code below works for defined xp:selectItem items and all kinds of computed xp:selectItems definitions based on a property, a view, a bean or other source.

Server Side JavaScript Solution

Add following SSJS code to submit button at onclick event:

<xp:this.action><![CDATA[#{javascript:
            var select = getComponent('djFilteringSelect1'); 
            var list = select.getChildren();
            var value = select.getValue();
            var label = "";
            for (var i = 0; i < list.length && label === ""; i++) { 
                print (i);
                if (typeof list[i] === 'com.ibm.xsp.component.UISelectItemEx') {
                    if (list[i].getItemValue() === value) { 
                        label = list[i].getItemLabel();
                    }
                } else if (typeof list[i] === 'com.ibm.xsp.component.UISelectItemsEx') {
                    items = list[i].getValue();
                    for (var k = 0; k < items.length && label === ""; k++) {
                        if (items[k].getValue() === value) { 
                            label = items[k].getLabel();
                        }                       
                    }
                }
            }
            document1.setValue("label", label)
}]]></xp:this.action>

It runs through all defined selectItems of Dojo Filtering Select control, looks for selected value and writes the corresponding label to document's field "label".

Client Side JavaScript Solution

Create a hidden input field which is connected to document's field "label":

<span style="display:none">
    <xp:inputText
        id="fieldLabel"
        value="#{document1.label}">
    </xp:inputText>
</span>

Add following CSJS code to submit button at onclick event:

<xp:this.script><![CDATA[XSP.getElementById("#{id:fieldLabel}").value =
     dijit.byId('#{id:djFilteringSelect1}').get('displayedValue')]]>
</xp:this.script>

It sets the input field to the label of currently selected value and from there it gets written to document's field "label".

Answer 2

I use a Java bean to hold this type of information. It will make it a lot easier to translate a page later on. Therefore I have a definition of the various options as a static map:

    private static final Map<String, String> userInterestLabels;
static {
    userInterestLabels = new HashMap<String, String>();
    userInterestLabels.put("1", "Environment");
    userInterestLabels.put("2", "Sience");
    userInterestLabels.put("3", "Regulations");
    userInterestLabels.put("4", "Generel interest");
}

Then I have a method to return a list of select items for the field:

    public List<SelectItem> getListUserInterests() {
    List<SelectItem> selectItems = new ArrayList<SelectItem>();
    for (Map.Entry<String, String> item : userInterestLabels.entrySet()) {
        selectItems.add(new SelectItem(item.getKey(), item.getValue()));
    }
    return selectItems;
}

In my XPage I refer to this method using Expression Language (no need for SSJS):

<xe:djFilteringSelect id="inputRoleInterest" value="#{User.interest}"
disableValidators="true" hasDownArrow="true" immediate="true">
<xp:selectItems>
    <xp:this.value><![CDATA[#{User.listUserInterests}]]></xp:this.value>
</xp:selectItems>

Now, when you submit this page the User bean has a method "setInterest()" that is called through the binding #{User.interest}. In that method you can get the label based on the value returned from this field. I have a method like this:

    public String getUserInterestLabel(String interest) {
    String label = userInterestLabels.get(interest);
    return (null == label) ? "" : label;
}

which returns the label from the same map that was used to produce your select items. Now you can save that label in another field - or whatever you want to do with it ;-)

    public void setInterest(String interest) {
    this.interest = interest;
    this.interestLabel = getUserInterestLabel(interest);
}

/John