Is it possible the users to select only one value from a <xp:checkBoxGroup>? In other words, the checkBoxGroup to work like a radioButton?
I know I could easily change the control to a radioButton but I was just curios.
You can use the following code to use a checkboxgroup with a single selection. The code is not perfect, because you need two clicks to activate a new checkbox.
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem itemLabel="first" itemValue="1"></xp:selectItem>
<xp:selectItem itemLabel="second" itemValue="2"></xp:selectItem>
<xp:selectItem itemLabel="third" itemValue="3"></xp:selectItem>
<xp:selectItem itemLabel="fourth" itemValue="4"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="checkBoxGroup1">
<xp:this.action>
<![CDATA[#{javascript:var checkedValues = getComponent("checkBoxGroup1").getAttributes().get("value")
varArray = new Array(0)
varArray[0] = checkedValues.length < 2 ? checkedValues[0] : undefined
getComponent("checkBoxGroup1").getAttributes().put("value", varArray);
}]]>
</xp:this.action></xp:eventHandler></xp:checkBoxGroup>
Related
On my XPages form I have a checkbox control:
<xp:checkBox
id="cbPromo"
value="#{employeeBean.employee.promoCheck}"
valueChangeListener="#{employeeBean.onPromotChange}"
checkedValue="true"
uncheckedValue="false"
disabled="#{!employeeBean.employee.editable}">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial"
refreshId="pnlUpdate"
execMode="partial" />
</xp:checkBox>
</xp:panel>
The problem is when I change the edit mode for the employee object (default is editable = false) the checkbox control which was in read mode checked becomes unchecked.
When I add a computed text control to see what the value for the promoCheck field its is both in read and edit mode true:
<xp:text escape="true" id="computedField1"
value="#{employeeBean.employee.promoCheck}">
</xp:text>
Can someone explain me what I should do to keep the checkbox control checked when I switch the editable mode for my employee object?
don't use the disabled property, but the readonly property instead
I have a radio button group, if the user selects an option, the relevant combo box will appear. The user is able to type word or just click the triangle box to search the value.
<xp:table id="InfoTable" style="margin-left:100.0px">
<xp:tr>
<xp:td>
<xp:radioGroup id="radioGroup1" layout="pageDirection">
<xp:selectItem itemLabel="Number"></xp:selectItem>
<xp:selectItem itemLabel="Alphabet"></xp:selectItem>
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="InfoTable">
</xp:eventHandler>
</xp:radioGroup>
</xp:td>
<xp:td>
<xp:comboBox id="comboBox1_destRank"
dojoType="dijit.form.ComboBox" value="# {sessionScope.NumberValue}"
style="width:100.0px">
<xp:this.rendered><![CDATA[#{javascript:var x = getComponent("radioGroup1").getValue();
if(x == "Number")
{ return true; }
if(x == "Alphabet")
{ return false; }}]]></xp:this.rendered>
<xp:selectItem itemLabel="1"></xp:selectItem>
<xp:selectItem itemLabel="2"></xp:selectItem>
<xp:selectItem itemLabel="3"></xp:selectItem>
<xp:selectItem itemLabel="4"></xp:selectItem>
<xp:selectItem itemLabel="5"></xp:selectItem>
</xp:comboBox>
<xp:br></xp:br>
<xp:comboBox id="comboBox2_destPost"
dojoType="dijit.form.ComboBox"
value="#{sessionScope.AlphabetValue}" style="width:100.0px">
<xp:this.rendered><![CDATA[#{javascript:var x = getComponent("radioGroup1").getValue();
if(x == "Alphabet")
{ return true; }
if(x == "Number")
{ return false; }}]]></xp:this.rendered>
<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:comboBox>
</xp:td>
</xp:tr>
</xp:table>
I test the code and it works properly. Once I click the radio button, the relevant combo box can display.
However, when my colleagues test it, they tell me they usually have to click the radio button three or four times to show the combo box. I feel strange so I go to see how they click the button, and it is true that one colleague needs to click three times to show the combo box no matter what option he chooses and the other colleague click six times to show.
Later, we use the same computer and same pace to click the mouse to test again, I can display the combo box by click the radio button one time, but my colleagues still needs two and three times to show the combo box.
I examine the code and I don't know which part cause the strange result.
Would someone give advice please. Thank you.
References:
xpages combobox control where user can enter values not in list
Help Contents in Domino Designer
XPages get Value selected from combo box
Where are they clicking? And which version of Domino are you using? I believe clicking the label did not trigger selecting the value in previous versions. It works fine for me with 9.0.1 FP3 in Internet Explorer and Firefox. It may be this issue referred to by Berndt Hort, but the IBM link doesn't work any more and the issue seems to have been fixed in later versions of Domino.
What is the browser that your colleague is using?
onclick event for radio group does not work properly in other browsers. It works fine in IE.
So we did small tweak in the eventHandler code. Please note the reder property of event as follows:
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="partial"
refreshId="pnlMainTTSHF"
disableValidators="true"
id="eventHandler1"
rendered="#{javascript:!context.getUserAgent().isIE()}" />
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial"
refreshId="pnlMainTTSHF"
disableValidators="true"
id="eventHandler2"
rendered="#{javascript:context.getUserAgent().isIE()}" />
I have 2 edit Boxes, 1 is editable, the other just prints the name of the sessionScope, both fields are in a in 2 cells next to each other , see code below, inputText1 is a editable text field, inputText2 is non editable text, printing #{sessionScope.Tmp1_ABC}
<xp:td>
<xp:inputText id="inputText1"
loaded="true">
<xp:this.value><![CDATA[${javascript:var fieldName = "Tmp_" + #ReplaceSubstring(varcollection," ","");
return '#{sessionScope.' + #ReplaceSubstring(fieldName,#List(" ",")","("),"") + '}';}]]></xp:this.value>
<xp:eventHandler
event="onchange" submit="true" refreshMode="partial"
refreshId="panel_1" />
</xp:inputText>
</xp:td>
<xp:td>
<xp:inputText id="inputText2"
loaded="true">
<xp:this.value><![CDATA[#{javascript:var fieldName = "Tmp1_" + #ReplaceSubstring(varcollection," ","");
return '#{sessionScope.' + #ReplaceSubstring(fieldName,#List(" ",")","("),"") + '}';}]]></xp:this.value>
<xp:eventHandler
event="onchange" submit="true" refreshMode="partial"
refreshId="panel_1" />
</xp:inputText>
</xp:td>
AFAIK you can't assemble your data binding that way. Data binding is an EL expression, not SSJS. You could try to trick using ${} to compute #{}
As per Stefan, using SSJS (javascript:) to define a value for an input control results in it only being read-only. For values to be editable they must be bound using Expression Language (EL). For something as complex as the example (looping over a list of field/variable) you will most likely have to learn a little Java to allow you to connect your input controls to the bean via EL. If the purpose of the code is to have one field editable and the other read-only you should (as Per suggested) change the control from being an inputText to just (computed) text or a label and remove the event handler. Somebody reading the code could easily be confused in thinking you intended both to be editable.
I'm going crazy: I cannot access the selected value of a combobox in the onchange event:
<xp:comboBox id="comboBox1" value="#{sessionScope.groupBy}">
<xp:selectItem itemLabel="nothing" itemValue=""></xp:selectItem>
<xp:selectItem itemLabel="State" itemValue="state"></xp:selectItem>
<xp:selectItem itemLabel="CCType" itemValue="cctype"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true" refreshMode="complete">
<xp:this.action>
<xp:executeScript>
<xp:this.script>
<![CDATA[
#{javascript:sessionScope.groupBy = getComponent("comboBox1").getValue();
print( getComponent("comboBox1").getValue() )}
]]>
</xp:this.script>
</xp:executeScript>
</xp:this.action>
</xp:eventHandler>
</xp:comboBox>
I want to store the value and reload the page to access the value I just submitted. I also tried getSubmittedValue() and value only. They always return null.
What is the trick here?
I have a problem similar to that one but if I understand your quandary I may have a solution. You are trying to capture the value of a combo box field that you select correct? Here is the code for the combo box (name: POVendor). The view I'm drawing the list from is named "PLBV".
#DbColumn(#DbName(), "PLBV", 1)
Here is the code for the Computed field that captures the value of the selection in the combo box. Just do a partial refresh on the computed field from the combo box & it should work fine.
var item = document1.getValue("POVendor");
return item;
I was facing the similar issue, tried the below option and it worked for me.
Set the Server Options on the onChange event of the combobox to Full Update and check the option "Process Data without validation
This will give you the desired result.(Your sessionScope.groupBy will be set to the new selected value of the combobox.
Is it possible to render <optgroup> tags within select by native or ExtLib Combo box control?
I want to use native solution, so getComponent() or validators will work. That disqualifies inline html with jQuery/dojo, i think.
There doesn't seem to be native support for the <optGroup> tag jet. However, in contrast to the assumption of disqualifying jQuery/dojo, does this seem to be the solution. Where getComponent(), getValue(), setValue() etc.. still work.
The only thing that needs to be done for every <optGroup> you want, is adding a <xp:selectItem itemLabel="With your optGroup label" itemValue"optGroup1"></xp:selectItem>. When multiple <optGroups>'s are used the itemValue needs to increment by 1. I pasted an example below, hope this helps.
<xp:this.resources>
<xp:script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" clientSide="true"></xp:script>
</xp:this.resources>
...
<xp:comboBox id="comboBox1" styleClass="optGroup">
<xp:selectItem itemLabel="Swedish Cars" itemValue="optGroup1"></xp:selectItem>
<xp:selectItem itemLabel="Volvo" itemValue="volvo"></xp:selectItem>
<xp:selectItem itemLabel="Saab" itemValue="saab"></xp:selectItem>
<xp:selectItem itemLabel="German Cars" itemValue="optGroup2"></xp:selectItem>
<xp:selectItem itemLabel="Mercedes" itemValue="mercedes"></xp:selectItem>
<xp:selectItem itemLabel="Audi" itemValue="audi"></xp:selectItem>
</xp:comboBox>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
//Iterate across the <option>'s for which the itemValues begin with "optGroup".
$('.optGroup option[value^="optGroup"]').each(function(index, node) {
//Use the actual itemValue ("optGroup1") to get all its siblings until the next
//<option> is found with (again) an itemValue of "optGroup" (i.e. "optGroup2").
$('.optGroup option[value="' + node.value + '"]').
//No harm for last iteration: .nextAll() will be used if the selector is
//not matched or is not supplied (in this example "optGroup3" won't get a match).
nextUntil('.optGroup option[value="optGroup' + (index + 2) + '"]').
//Wrap them in a <optGroup> tag and give it its label (itemLabel).
wrapAll('<optGroup label="' + node.text + '"></optGroup>');
//Remove the initial <option> since we no longer need it.
$(this).remove();
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:button value="Submit" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
print("Submitting: " + getComponent("comboBox1").getValue() );
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
I have found this answer to my question.
Computed values for combo box in Domino Designer can return string vectors/arrays, usually as return value of #DbLookup or #DbColumn. While experimenting, I have found you can return native component for select items, including group (which inherits from select item).
Following snippet will build what I wanted: grouped hierarchy of items.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:comboBox id="comboBox1" value="#{viewScope.combo}">
<xp:selectItems>
<xp:this.value><![CDATA[${javascript:var itms = new javax.faces.model.SelectItem[2];
var itm = null;
itm = new javax.faces.model.SelectItem();
itm.setLabel("label1");
itms[0] = itm;
itm = new javax.faces.model.SelectItem();
itm.setLabel("label2");
itms[1] = itm;
var g = new javax.faces.model.SelectItemGroup();
g.setLabel("Group");
g.setSelectItems(itms);
g
}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</xp:view>
Sample:
Based on this example you can combine many data sources to build computed <optgroup> combos, including backing beans or scoped variables.