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.
Related
I created a simple repeat control, having inside it 2 simple inputTexts. Outside this repeat control, there is an editable inputText3 ( binded to dataSource ). I'm using it to make some calculations inside the repeat control. The calculations are displayed correctly. I have 2 buttons, for newLine and delete/hideLine. For the moment, those 2 fields inside the repeat control are not binded to the datasource.
i have a button which save the doc., and list it inside a viewPanel, having the first column inputText3, clickable. I noticed that if I open the document ( in edit or read mode ) this editable field value is correctly displayed, but the fields inside the repeat control are all null, even if I add some values before using the save method.
I try also to create 2 fields inside the form ( / datasource ) and binding this inputTexts to them, but again the repeat control fields are empty.
<xp:repeat id="repeat1" var="varRepeat" indexVar="index">
<xp:this.value><![CDATA[#{javascript:parseInt(sessionScope.dField)
}]]></xp:this.value>
...
<xp:inputText id="inputText1"></xp:inputText>
<xp:inputText id="inputText2"></xp:inputText>
The editable field outside the repeat:
<xp:inputText id="number" value="#{docrepeat.valtotala}"
defaultValue="100">
</xp:inputText>
.
<xp:this.data>
<xp:dominoDocument var="docrepeat" formName="docrepeat"></xp:dominoDocument>
</xp:this.data>
I'm definitely missing something here, hope to reach to a functional solution.
Should I bind the 2 inputText using the var property of the repeat?
Or how can I achieve this?
repeat control code:
<xp:repeat id="repeat1" var="test" indexVar="index" rows="8">
<xp:this.value><![CDATA[#{javascript:parseInt(sessionScope.DField)
}]]></xp:this.value>
<xp:panel>
<xp:table >
<xp:tr>
<xp:td>
<xp:inputText id="inputText1">
<xp:eventHandler event="onchange"
submit="false">
<xp:this.script><![CDATA[try
{
var idx="view:_id1:inputText3";
var index=document.getElementById(idx).value;
var number="view:_id1:number";
var val=document.getElementById(number).value;
var sum = val;
for(var i=0;i<index;i++) {
var input1="view:_id1:repeat1:"+i+":inputText1"
var nr1=document.getElementById(input1).value;
sum-=nr1;
document.getElementById("view:_id1:repeat1:"+i+":inputText2").value = sum;
}
// calculating some %
document.getElementById("view:_id1:test").value = parseInt((sum*100)/val);
}
catch(e)
{
alert("not working");
}]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
<xp:inputText id="inputText2"></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
</xp:repeat>
My little scenario was described here: Xpages how to obtain/create this calculations module
I think your datasource inside the repeat is a view. You need to add a datasource of object data inside the repeat. The way to do this is to create a panel inside the repeat and give that panel a datasource as follows.
<xp:repeat id="repeat1" rows="30" value="#{view1}"
var="rowData">
<xp:panel>
<xp:dominoDocument var="objectData1"
formName="Item"
documentId="#{javascript:return rowData.getNoteID();}"
ignoreRequestParams="true" action="openDocument">
</xp:dominoDocument>
!!!put your stuff in the panel!!!
</xp:panel>
</xp:repeat>
So what is going on is the repeat grabs the datasource which is a view. So it will iterate through all of the entries in the view. But the view datasource does not know what to do with documents. So you create the objectData which will grab the noteID of that specific document and make that available to the repeat as a document(referenced by noteID). Making it available as a document will allow it to save values. You probably won't be able to use the value picker but just type in the field names and it will work.
Not sure I am completely understanding your problem. But you also need to save the datasource. So you could either put a save button in the panel to save that specific document or make the save button save all data sources. I prefer being able to save each document separately as it allows for applications that multiple can edit at the same time.
There is a column from a view which have the multi-value separator the new line.
But when I drag and drop this view inside my XPage ( as a <xp:viewpanel> ) the multiple values are display within , and not in different lines.
I couldn't find any property in the view column. How can I achive this?
Thanks in advance.
You have to use customConverter here. Because convertList takes only one character as the seperator.
<xp:viewColumn
columnName="SomeColumn"
id="viewColumn1"
contentType="html">
<xp:this.converter>
<xp:customConverter getAsObject="#{javascript:return value;}">
<xp:this.getAsString>
<![CDATA[#{javascript:return #Implode(value, "<br/>")}]]>
</xp:this.getAsString>
</xp:customConverter>
</xp:this.converter>
<xp:viewColumnHeader
value="Header"
id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
We are imploding values by <br/> string and providing content type so it won't escape the html output.
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>
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>