I'm trying to use the valuePicker XPages Extension Library control. I realize that you can hold down the Control button to select multiple values at a time, but is there a way to add the ability to select all values/options? Thanks for any help.
<xp:inputText id="example" multipleSeparator=","></xp:inputText>
<xe:valuePicker for="example" pickerText="Choose option">
<xe:this.dataProvider>
<xe:simpleValuePicker
valueList="Option 1, Option 2, Option 3, Option 4, Option 5"
valueListSeparator=",">
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
Related
Is there any equivalent for lotus notes Dialog list in xpages? Or, if it's possible, an xpage combobox ''which accepts'' multiple values selected.
Thanks for your time
Use a xe:djextListTextBox to collect and show multiple values, use xe:valuePicker to add values from an existing list to ListTextBox and use optionally a button to prompt for a new value and to add it to ListTextBox.
This is an example for xe:djextListTextBox and xe:valuePicker:
<xe:djextListTextBox
id="djextListTextBox1"
multipleSeparator=","
multipleTrim="true"
defaultValue="abc,def"
value="#{viewScope.test}">
</xe:djextListTextBox>
<xe:valuePicker
id="valuePicker1"
for="djextListTextBox1"
pickerText="Add">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
I like this approach as it is for the user easy to add and to delete values and it looks good.
An alternative is the combination of xp:inputText and xe:valuePicker:
<xp:inputText
id="inputText1"
multipleSeparator=","
value="#{viewScope.test}"
defaultValue="abc,def">
</xp:inputText>
<xe:valuePicker
id="valuePicker1"
for="inputText1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
Users can add their own new values as the InputText field is editable. This approach might be a good solution if new values are allowed and users know how to edit values considering the multiple separator.
In case you'd like to have each value in a separate line you can use xe:djTextarea and set multipleSeparator to newline:
<xe:djTextarea
id="djTextarea1"
multipleSeparator="#{javascript:'\n'}"
value="#{viewScope.test}"
defaultValue="#{javascript:['abc','def']}"
cols="30">
</xe:djTextarea>
<xe:valuePicker
id="valuePicker1"
for="djTextarea1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
The text box grows and shrinks with the number of selected values automatically.
The ValuePicker control in the Extension Library provides the Dialog List functionality, but not with the "Allow values not in list" functionality.
I am trying to generate a hierarchical list of categories and sub-categories on an X-Page. So far I have attempted two methods:
The first, which works, is based on code by Jesse Gallagher in this blog post and that outputs the list in exactly the order I want it using an xe:outline control. However, I want be able to add extra functions and styling to each entry (e.g. edit and delete links) but can't work out how to render custom controls within the outline control.
The second method is trying to leverage nested repeats and custom controls to generate the list but for the life of me I can't quite get this work and I don't know if it's because it just won't work or I'm just missing something fundamental. The basic code for the XPage is:
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoView var="Categories" viewName="vLUTopCat"></xp:dominoView>
</xp:this.data>
<xc:ccUI navigationPath="Admin/Main" pageName="Admin">
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h2>Categories</h2>
<ul id="adminCatList">
<xp:repeat id="parentCat" rows="30" value="#{Categories}" var="DocCat" indexVar="catIdx" disableOutputTag="true">
<xc:ccCategoryList>
<xc:this.catID><![CDATA[#{javascript:DocCat.getColumnValue("docID")}]]></xc:this.catID>
<xc:this.catName><![CDATA[#{javascript:DocCat.getColumnValue("categoryName")}]]></xc:this.catName>
</xc:ccCategoryList>
</xp:repeat>
</ul>
</xp:panel>
</xp:this.facets>
</xc:ccUI>
and the code for the custom control (ccCategoryList) is:
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:text escape="true" id="computedField1"
value="#{compositeData.catName}" tagName="li" />
<xp:repeat id="rptSubCat" rows="30" var="subCat"
disableOutputTag="true">
<xp:this.facets>
<xp:text disableTheme="true" xp:key="header"
escape="false">
<xp:this.value><![CDATA[<ul>]]></xp:this.value>
</xp:text>
<xp:text disableTheme="true" xp:key="footer"
escape="false">
<xp:this.value><![CDATA[</ul>]]></xp:this.value>
</xp:text>
</xp:this.facets>
<xp:this.value><![CDATA[#{javascript:var tview = database.getView("vLUSubCat");
var v = compositeData.catID;
var vc:NotesViewEntryCollection = null;
if (v != null) {
vc = tview.getAllEntriesByKey(v);
}
vc}]]></xp:this.value>
<xc:ccCategoryList>
<xc:this.catID><![CDATA[#{javascript:subCat.getColumnValues()[3]}]]></xc:this.catID>
<xc:this.catName><![CDATA[#{javascript:subCat.getColumnValues()[1]}]]></xc:this.catName>
</xc:ccCategoryList>
</xp:repeat>
</xp:view>
So my related questions are:
Is there anyway to output a custom control in an xe:outline control using a bean node?
Can I use repeats and custom controls to recursively output data from views like I can using a bean node?
Is there a better alternative method I'm overlooking (e.g. using a Java Collection in a bean and a repeat control?)
Thanks
1) There is a way to add your own CustomNode to the Outline For that look into extending:
com.ibm.xsp.extlib.tree.ITreeNode;
com.ibm.xsp.extlib.tree.complex.ComplexLeafTreeNode;
com.ibm.xsp.extlib.tree.impl.TreeNodeWrapper;
2) sorry i have never tryed to build a recursive xpage element as a custom Control, but i would not recoment it.
3) You could just use the <xe:forumView> or the <xp:viewPanel> both have nice possibilites to determine if the viewEntry/row is a Category or not. And offers you the possebility to add everything you want like links, buttons or other controls to a row.
or another way to get what you need is to build you Outline/TreeView with the DojoTreeView:
Link1
Link2
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.
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>