I tried to add "Placeholder attribute into a combobox. I have either an error or It does not work :(
NOTE: I use bootstrap 3.2.0
<xp:comboBox id="dRes" value=" {document1.dRes}">
<xp:this.attrs>
<xp:attr name="placeholder" value="Select a value"> </xp:attr>
</xp:this.attrs>
</xp:comboBox>
No that will not work, the 'placeholder' of a combobox is the first item of the combobox or the selected value
Related
I recently discovered a problem with the xe:djextListTextBox control using xe:valuePicker for values that have synonyms/aliases. If the synonyms are similar between pickers that are bound to different fields, when selecting the value for the first field, selecting the matching value for the second field displays the text from the first selection.
For example, picker #1 has 3 values with aliases/synonyms: blue|1, green|2, yellow|3. Picker # 2 has 3 different values but the same synonyms: red|1, orange|2, purple|3.
If I select "blue" for picker # 1 it displays "blue." When I then select "red" for picker #2, instead of displaying "red", it displays "blue".
The good thing is that when the document is saved (the synonyms are saved correctly) and reopened in Read mode, the two fields properly display the correct values. The issue seems to be in Edit mode. Has anyone come across this before and aware of a fix?
Here is test code:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.data>
<xp:dominoDocument var="doc1" />
</xp:this.data>
<p>
k1
<xe:valuePicker for="k1" pickerText="add">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="blue|1;green|2;yellow|3" labelSeparator="|" valueListSeparator=";" />
</xe:this.dataProvider>
</xe:valuePicker>
</p>
<p>
<xe:djextListTextBox id="k1" value="#{doc1.k1}"
displayLabel="true" multipleSeparator=";" multipleTrim="true" />
</p>
<p>
k2
<xe:valuePicker for="k2" pickerText="add">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="red|1;orange|2;purple|3" labelSeparator="|" valueListSeparator=";" />
</xe:this.dataProvider>
</xe:valuePicker>
</p>
<p>
<xe:djextListTextBox id="k2" value="#{doc1.k2}"
displayLabel="true" multipleSeparator=";" multipleTrim="true" />
</p>
</xp:view>
I ended up opening a ticket with HCL and their suggested workaround was to add an onChange event to the djextListTextBox to refresh its value. I'm not thrilled with it because I have a lot of fields and it's a performance hit, but it does work.
<xp:div id="refreshTarget">
...
<p>
<xe:djextListTextBox id="k1" value="#{doc1.k1}" style="font-size:smaller"
displayLabel="true" multipleSeparator=";" multipleTrim="true">
<xp:eventHandler event="onChange" submit="true" refreshMode="partial"
refreshId="refreshTarget" />
</xe:djextListTextBox>
</p>
</xp:div>
I have some code, see below. It's a dialog box that contains a list box for the user to select one or more choices and a text field to enter an email address.
When I put a viewScope variable as the value to capture the email address the field becomes like it's read only. If I remove the value=viewScope..... the field shows as editable with a border etc.
How can I get the field to be editable and store the value in a scope variable for use when the click the submit button?
FYI, the list box works just fine.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:panel id="panelJenarkCurrentYearReportsMain">
<xp:panel id="panelJenarkCurrentYearReportsInner">
<xe:dialog id="dialogCurrentReports" title="Fetch Current Year Reports">
<xp:div styleClass="lotusMessage lotusInfo" role="alert">
<xp:listBox id="listBoxJenarkCurrentYearReports" value="#{viewScope.jenarkCurrentYearReports}"
multiple="true" style="height:150.0px;width:98%;margin-left:5px"
required="true">
<xp:selectItems id="selectItems1">
<xp:this.value><![CDATA[#{javascript:var db = new Array( #DbName()[0], "dbWorkflow\\reference" );
result = #DbLookup(db, "($VSYSCTLKW)", "*ALL*ALL*ALLJenarkCurrentYearReports", "KWValues" );
if (result && typeof result == "string")
result = new Array(result);
return result;
}]]></xp:this.value>
</xp:selectItems>
<xp:this.validators>
<xp:validateRequired
message="Please Select one or more Current Year Reports!" />
</xp:this.validators>
</xp:listBox>
<xp:panel>
<xp:label value="Send Reports To:"
id="labelJenarkReportsEmailTo"
style="width:20%;padding-left:3.0px;margin-left:3.0px">
</xp:label>
</xp:panel>
<xp:panel>
<xp:inputText id="inputTextJenarkReportsEMailTo"
style="width:75%;padding-left:3.0px;margin-left:5.0px"
value="#{javascript:viewScope.jenarkReportEMail;}" required="true">
<xp:this.validators>
<xp:validateRequired
message="Please Enter a valid email Address!">
</xp:validateRequired>
</xp:this.validators>
</xp:inputText>
</xp:panel>
</xp:div>
</xe:dialog>
</xp:panel>
</xp:panel>
</xp:view>
Change your value definition to
value="#{viewScope.jenarkReportEMail}"
It has to be in Expression Language (EL). This way inputText control not just knows how to read viewScope variable's current value but also where to write user's input value to.
If you start your expression with "#{javascript:..." then it will execute the JavaScript code and insert the current value of viewScope.jenarkReportEMail as inputText's value. Just as a string, not as a variable where you can write to. That's why inputText can't write and shows itself as "read only".
Here is my code:
<p:selectOneListbox id="columnName"
widgetVar="columnName"
value="#{dataTransformBean.column}">
<f:selectItems id="itemDrop"
value="#{dataTransformBean.columnList}"
var="item" itemValue="#{item}" />
<p:ajax update="textarea" />
</p:selectOneListbox>
<p:inputTextarea id="textarea" rows="6" cols="33" />
<p:selectOneListbox id="function"
widgetVar="function"
value="#{dataTransformBean.function}">
<f:selectItems value="#{dataTransformBean.functionValNames}" />
</p:selectOneListbox>
<p:draggable for="columnName" revert="true" helper="clone"></p:draggable>
I want to drag only selected item of <p:selectOneListBox> in <p:inputTextarea> for which for="id" which drags whole list box..How can I drag only selected item from list.
There is a "Drag & Drop - Custom" example in the showcase
http://www.primefaces.org/showcase/ui/dnd/custom.xhtml
In this example, it defines the class ".ui-treenode-leaf" to be draggable and class ".ui-datatable .droppoint" to be droppable.
(I guess) In the case of p:selectOneListBox, you can try to define "ui-selectlistbox-item ui-corner-all ui-state-highlight" as draggable. So only the selected (highlight'ed) selectlistbox item will be draggable. Of course you should also define p:inputTextarea as your droppable and create p:remoteCommands with necessary action listeners in the bean.
I am using Ext.Net I have a form with a ComboBox which I have just changed to a MultiCombo.
Previously I used "SelectEnquiry.getValues()" to retrieve the selected item and pass it into a parameter used with a Button Direct Event.
How do I get the selected values when using the MultiCombo?
Combo Box Bit
<ext:MultiCombo runat="server" ID="SelectEnquiry" FieldLabel="Enquiry" AnchorHorizontal="95%" Editable="false" ValueField="Id" DisplayField="ProviderName" TypeAhead="true" Mode="Local" ForceSelection="true" TriggerAction="All" EmptyText="Select Enquiry" ValueNotFoundText="Select Enquiry" ItemSelector="div.list-item" SelectOnFocus="true" AllowBlank="false">
Button form submit bit
<ext:Button runat="server" ID="ButtonEmailTaskAccept" Text="OK">
<Listeners>
<Click Handler="if (PanelUnlinked.isVisible() && !$form.validate( [SelectProject, SelectEnquiry])) return false;">
</Click>
</Listeners>
<DirectEvents>
<Click Url='<%# Url.Action("CompleteEmailTask") %>' AutoDataBind="true"
Success="window.$messageBus.publish('task-admin', 'inbox-changed');
window.$messageBus.publish('task-admin', 'task-changed');
WindowAssignEmail.close()" Failure="$shell.requestFailedHandler(response, null)"
Json="true">
<EventMask ShowMask="true"></EventMask>
<ExtraParams>
<ext:Parameter Name="emailResponseId" Value="<%# Model.EmailResponse.Id %>" Mode="Value"
AutoDataBind="true" />
<ext:Parameter Name="enquiryId" Value="SelectEnquiry.getValues()" Mode="Raw" />
<ext:Parameter Name="documentList" Value="buildSelectionList()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
With <ext:MultiCombo> you can just call .getValue() to return an Array of selected values. I'll look into adding .getValues() as well, so it's consistent with the <ext:ComboBox> api.
Edit
It appears the ComboBox does not have a client-side .getValues() function, so we won't be adding to the MultiCombo. Just use .getValue(), which is standardised across all Form Fields.
The problem seemed to be that it could not locate the control I was try to get the value from.
So managed to solve it by doing:
#{SelectEnquiry}.getSelectedValues()
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>