I have a use case for the type-ahead feature of xe:djComboBox, but I want to limit the entered value to the selectItems for the control. In the following code example the selectItems returns the 50 States from Domino View data source called viewStates. I tried to validate the selected/value using the validator in the code, but any entered value is still accepted. Any ideas?
<xe:djComboBox id="djComboBox2"
value="#{document1.Text_3}" ignoreCase="true"
promptMessage="Type or select a State"
invalidMessage="Not a valid State selection"
validator="#{javascript:(#IsMember(this.getValue(),viewStates.getColumnValues(0)))? true : false;}">
<xp:selectItem itemLabel=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:viewStates.getColumnValues(0)}]]></xp:this.value>
</xp:selectItems>
</xe:djComboBox>
Use the xe:djFilteringSelect control instead. It limits possible entries to those in selectItem and selectItems.
Paul, look at the PickerValidator under Validators.
As per Howard's suggestion this worked ...
<xe:djComboBox
id="djComboBox2"
ignoreCase="true"
promptMessage="Type or select a State"
invalidMessage="Not a valid State selection">
<xe:this.validators>
<xe:pickerValidator message="Enter the right state">
<xe:this.dataProvider>
<xe:dominoViewNamePicker
viewName="USStates"
labelColumn="abbreviation">
</xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:pickerValidator>
</xe:this.validators>
<xp:selectItem itemLabel=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:viewStates.getColumnValues(0)}]]></xp:this.value>
</xp:selectItems>
</xe:djComboBox>
You are using the "Validator" property where you need to be using one of the "Validators" properties like customValidator.
Related
I'm using a <xe:djTabContainer> with 10 <xe:djTabPane> containing numerous fields components.
There is a principal combobox whose value will determine which fields to be showed or not and in this way the document structure will be achieved.
If I will use this approach, then for all my >50 fields which I want to show/hide, I will use only the onChange event of the combobox?
Considering the fact that there are >50 fields which enter in this category < showing&hiding them >, should I use another approach / method? Thanks for your time.
<xp:comboBox value="#{Contr.txt_tipcontractcv}" id="comboBox4"> <xp:selectItems id="selectItems1">
<xp:this.value><![CDATA[#{javascript:return ""}]]></xp:this.value>
</xp:selectItems>
<xp:selectItems id="selectItems2">
<xp:this.value><![CDATA[#{javascript:#DbColumn(#DbName(),"SetupvwTipuriContracteC",1);}]]> </xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="false"> <xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:FisaP}", {
});
]]></xp:this.script> </xp:eventHandler> </xp:comboBox>
and the panel:
<xp:panel id="FisaP">
<xp:label id="label4"
style="color:rgb(128,0,0);font-family:verdana;font-size:9pt;font-weight:bold">
<xp:this.value><![CDATA[#{javascript:"Fisa contract "+ Contr.getItemValueString("txt_tipcontractcv")}]]></xp:this.value>
<xp:this.rendered><![CDATA[#{javascript:
Contr.getItemValueString("txt_tipcontractcv") != ""
}]]></xp:this.rendered>
</xp:label>
</xp:panel>
I would turn it around. Let the labels and fields ask the combobox if they should be rendered or not. Let the combobox's onchange event initiate a partial refresh of a panel which includes all fields you want to show/hide.
If your >50 fields are all on one place you can frame them with a panel and set the rendered property there.
If your combobox is bound to a viewScope variable the rendered property of fields/labels would be
rendered="#{javascript:viewScope.tipcontractcv1 == 'Vanzare-Cumparare'}"
or if it is bound to a document field then
rendered="#{javascript:document1.getItemValueString('txt_tipcontractcv1') === 'Vanzare-Cumparare'}"
Update:
Based on your code in your answer https://stackoverflow.com/a/25636661/2065611 take the following steps so get it to work with the Dojo Tab Container:
1.
Put the labels and fields in panels which do have an id but don't have a rendered attribute
<xp:panel id="panel1">
<xp:label value="Persoane spre informare" ... id="label2">
<xp:this.rendered><![CDATA[#{javascript:
Contr.getItemValueString("txt_tipcontractcv1") == "Vanzare-Cumparare"
}]]></xp:this.rendered>
</xp:label>
... other label and fields ...
</xp:panel>
You can create other panels "panel2", "panel3", ... too. They can be placed in different djTabPanes.
2.
Change the onchange event of your combobox and execute client side code to refresh the panels
<xp:eventHandler
event="onchange"
submit="false">
<xp:this.script><![CDATA[
XSP.partialRefreshPost("#{id:panel1}", {
onComplete: function() {
XSP.partialRefreshPost("#{id:panel2}");
}
});
]]></xp:this.script>
</xp:eventHandler>
3.
You can optimize your code if you put labels and fields with the same rendered attribute together into an additional panel
<xp:panel id="panel1">
<xp:panel id="panelRendered1"
<xp:this.rendered><![CDATA[#{javascript:
Contr.getItemValueString("txt_tipcontractcv1") == "Vanzare-Cumparare"
}]]></xp:this.rendered>
<xp:label value="Persoane spre informare" ... id="label2" />
... other label and fields ...
</xp:panel>
</xp:panel>
First... never do this:
if (comboVal == "Vanzare-Cumparare")
Even though it's called "SSJS".. it's really not "JavaScript"... you're pretty much working with Java. In Java everything is an object. Even a literal string. So by entering "Vanzare-Cumparare" you're pretty much creating a new Object. You can see this in the typeahead of the SSJS editor. Try typing "anything". <-- Note you NEED to type in that period.
The way to do that if statement is:
if ("Vanzare-Cumparare".equalsIgnoreCase(comboVal)
you could reverse it I think:
if (comboVal.equalsIgnoreCase("Vanzare-Cumparare")
Should give you the same result. I think sometimes you can get away with using the == but mostly likely it's going to bite you at some point no matter what. So I recommend never doing that.
I'm not sure I'm following your approach here. I guess it makes some sense but if it were me I'd do it differently. I know that personally I've NEVER tried to grab the component in SSJS like this: var combo:javax.faces.component.UIComponent - I've never seen the need.
I'd prefer to use a scoped variable and then in the label's rendering property grab that scoped variable and use that to determine your rendering value - true or false.
I see a real problem. If the component is not currently rendered, you cannot get a handle to it with getComponent. If you simply change the display value, then the component is always there, even if it's not displayed.
Something like this:
var combo:javax.faces.component.UIComponent = getComponent("txt_tipcontractcv1");
var comboVal = combo.getValue();
if (comboVal.equalsIgnoreCase("Vanzare-Cumparare")) {
document.getElementById("#{id:label2}").style.display = "block"; // or "inline"
} else {
document.getElementById("#{id:label2}").style.display = "none";
}
You need to ensure that the label2 element is always rendered, so that the style indicates whether it is visible.
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.
I'm using a the extension library value picker to select a Name. Once the user hits Ok, I need to use the selected value to populate several other fields. But I can't figure out how to fire a SSJS function from the Ok button.
Thanks for any suggestions.
-- Jeff
You can fire an event from the field that the value picker updates.
Here's a simple example that updates another field when the value picker is used:
<xe:djextListTextBox id="inputField">
<xp:eventHandler event="onChange" submit="true" refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:getComponent("testField").setValue(getComponent("inputField").getValue())}]]></xe:this.action>
</xp:eventHandler>
</xe:djextListTextBox>
<xe:valuePicker id="valuePicker1" for="inputField">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="1,2,3" valueListSeparator=","></xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
<xp:br />
<xp:inputText id="testField"></xp:inputText>
I've got a checkBoxGroup that can expand to 20 items or so, as users pick which fields from a view that they want to export to a spreadsheet. I'm curious how I might control the display of those 20 checkboxes (dynamically determined) to be in more than one row or even to display in a column instead.
<xp:checkBoxGroup id="fieldChoicesBox">
<xp:eventHandler event="onclick" submit="false" id="eventHandler2">
<xp:this.script>
<![CDATA[var x= '#{javascript:getClientId("fieldChoicesBox")}';
var y= '#{javascript:getClientId("fieldChoicesBoxList")}';
copyRadioChoices(x,y)]]>
</xp:this.script>
</xp:eventHandler>
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript: var viewName=#UpperCase(getComponent("viewChoice").getValue());
var tmp = #DbLookup(#DbName(),"dbprofile",viewName,"Value");
#If(#IsError(tmp),"None",tmp)}]]>
</xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup>
This is all built off code I originally got from Russ Maher (see http://xpagetips.blogspot.com/2012/06/extending-your-xpages-applications-with.html) so any brilliance is attributable to him, while all mistakes are mine.
Alternatively, if you have an idea for how to pick fields or columns to display in the export that works more easily or elegantly, I'd be thrilled to hear it.
If your using or can use the ExtLib I'd use the valuePicker control, lets you select multiple values from the one control ( hold down ctrl while choosing ). Heres an example:
<xp:inputtext id="example" multipleSeparator=","></xp:inputText>
<xe:valuePicker for="example" pickerText="text">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="test1, test2, test3, test4"
valueListSeperator=",">
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
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.