Xpages 8.5.3 Bug ? xp:input text - xpages

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.

Related

Xpages repeat control & dynamic field creation/display

I need to create 3 fields in one row every time a new objective is needed. objective1, midYear1, endYear1. Then if I add an objective, objective2, midYear2, endYear2 and so on. Everything seems to work, first time, but second time it creates loads of fields. I assume its the way I'm nesting / not nesting/using my repeats correctly as my viewScope variables are all correct, so it's just displaying of the fields that I'm confusing myself with. I just need each of the 3 fields in one column each, then new row and repeat.....Code below, however am also open to suggestions if anyone has a better approach..... Thanks
<xp:this.data>
<xp:dominoDocument
var="document1"
formName="objective">
</xp:dominoDocument>
</xp:this.data>
<xp:repeat id="repeat1" rows="100" value="#{viewScope.fields}"
var="fieldName">
<xp:repeat id="repeat2" rows="100" value="#{viewScope.fields2}"
var="fieldName2">
<xp:repeat id="repeat3" rows="100" value="#{viewScope.fields3}"
var="fieldName3">
<div class="row">
<div class="col-xs-4">
<xp:label value="#{fieldName}" for="inputText1">
</xp:label>
<xp:inputText id="inputText1">
<xp:this.value><![CDATA[#{document1[fieldName]}]]></xp:this.value>
</xp:inputText>
</div>
<div class="col-xs-4">
<xp:label value="#{fieldName2}" for="inputText2">
</xp:label>
<xp:inputText id="inputText2">
<xp:this.value><![CDATA[#{document1[fieldName2]}]]></xp:this.value>
</xp:inputText>
</div>
<div class="col-xs-4">
<xp:label value="#{fieldName3}" for="inputText3">
</xp:label>
<xp:inputText id="inputText3">
<xp:this.value><![CDATA[#{document1[fieldName3]}]]></xp:this.value>
</xp:inputText>
</div>
</div>
</xp:repeat>
</xp:repeat>
</xp:repeat>
<xp:button
value="Add Objective"
id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="repeat1">
<xp:this.action><![CDATA[#{javascript:
if (!viewScope.fields) {
viewScope.fields = [];
viewScope.fields2 = [];
viewScope.fields3 = [];
var count:integer = 1;
}
viewScope.fields.push("Objective" + (viewScope.fields.length + 1));
viewScope.fields2.push("MidYear" + (viewScope.fields2.length + 1));
viewScope.fields3.push("EndYear" + (viewScope.fields3.length + 1));
count = count+1;
}]]></xp:this.action>
</xp:eventHandler>
The problem is that by nesting, for each entry in coumn 1, you're creating n instances of column 2. Then for each entry in column, you're creating n instances of column 3. If you want this approach, you're best off creating a single viewScope variable, where each element has the fieldnames for each objective (as an object or array), then just using a single repeat using that single viewScope variable.
Building this for Notes Client / traditional Domino web was historically a huge pain because the restriction was you could not edit multiple documents (easily) in the same UI, because the Form was both the schema for storage and the design for the UI.
XPages means that's no longer a restriction. The XPage is the UI, (dominoDocument / bean) data sources are the schema for storage.
As a result, my preferred approach is to break the structure for storage up into more granular elements. So each Objective would be its own document, with fixed bindings to "objective", "midYear", "endYear".
There are then a variety of approaches for creating a new entry. One is a single fixed row at the top with a dominoDocument datasource with scope="request" ignoreRequestParams="true". Save can then add the NoteID / UNID to a repeat that then retrieves the values from the relevant document(s) to display / edit.
A more advanced approach would be to have a viewScope variable with an additional option (at beginning or end), then compute the dominoDocument datasource that's within the repeat to either retrieve the relevant document (i.e. action="openDocument") or create a new one (i.e. action="newDocument").

XPages: Rich Text Fields have summary to true when saved. Why and how to set the flag to false?

I have a document that was created using a copyallitems. That document has 2 body fields, and they both have the issummary flag to false.
As soon as I do a document1.save(), both rich text fields now have the flag set to true.
Any idea why the flag would be set to true by saving the document? These fields are not used in any views. I thought that rich text fields were not suppose get the summary flagged when saved.
Both rich text fields are set to store content as MIME...
Any clues on how to avoid the flag from being set, or how to remove the flag before saving (or after, or whatever) the document?
Running on Domino Release 9.0.1FP3 HF241
Here is sample code that recreates the problem, when adding more than 32Kb od text in the rich text field:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"><xp:span style="font-weight:bold"></xp:span>
<xp:label id="label1" styleClass="h1" value="Test Issummary"></xp:label>
<xp:span style="font-weight:bold"></xp:span>
<xp:this.data>
<xp:dominoDocument computeWithForm="onsave" formName="fPage" var="document1"/>
</xp:this.data>
<xp:br></xp:br>
<xp:br></xp:br>
Subject:
 
<xp:inputText id="inputText1" value="#{document1.Subject}"
style="width:569.0px">
</xp:inputText>
<xp:br></xp:br>Status: 
 
<xp:inputText id="inputText2" defaultValue="Draft" value="#{document1.Status}"></xp:inputText>
<xp:br></xp:br>
<xp:br></xp:br>Body:<xp:br></xp:br>
<xp:inputRichText id="inputRichText1" style="width:100%"
value="#{document1.Body}" htmlConversionWarning="noWarning"
htmlFilter="identity" htmlFilterIn="identity">
</xp:inputRichText>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:button value="Save" id="button1"
style="width:122.0px;height:29.0px">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument var="document1"></xp:saveDocument>
<xp:openPage name="/adminDrafts.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action></xp:eventHandler></xp:button>
</xp:view>
Once saved, the document cannot be opened anymore as the infamous 32k error message is displayed.
If I save with less than 32K, the document is ok, but the rich text field has the issummary flag to yes... That is mostly the cause of my problem...
As you are using option computeWithForm make sure your form "fPage" contains your rich text field and is of type rich text. Otherwise it might get converted to a normal text field.
Use option computeWithForm only if you really need to as it an expensive operation.

Edit box in repeat control with default value does not update on delete

I have a Repeat control in which I have a edit box which has passed a default value.There is a Delete button to delete that row.
just for test I have used a computed field along with the edit box.Computed field is also passed the same value as edit box.Now both computed Field and Edit Box has same value,When I click on Delete button randomly,it gets delete but only computed field updates properly in repeat control wherever deleted,
In case of Edit box,it shows the last record disappears.
So the issue is, the value in edit box does not get update like computed field does.I have done the test by writing following code.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="testing">
</xp:dominoDocument>
</xp:this.data>
<xp:inputText id="inputText1" multipleSeparator=",">
<xp:this.defaultValue><![CDATA[#{javascript:var v:java.util.Vector = new java.util.Vector();
v.add('1');v.add('2');v.add('3');v.add('4');v.add('5');v.add('6');
return v;}]]></xp:this.defaultValue>
</xp:inputText>
<xp:br></xp:br>
<xp:repeat id="repeat1" rows="30" var="r" indexVar="i" first="0">
<xp:this.value><![CDATA[#{javascript:return getComponent("inputText1").getValue();}]]></xp:this.value>
<xp:br></xp:br>
<xp:div style="text-align:center">
<xp:label value="#{javascript:r}" id="label1"
style="text-align:center">
</xp:label>
<xp:button value="Delete" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var v:java.util.Vector = getComponent("inputText1").getValue();
if(v != null){
var sdtString = getComponent("inputText2").getValue();
if(v.contains(sdtString))
v.remove(sdtString);
};}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:inputText id="inputText2">
<xp:this.defaultValue><![CDATA[#{javascript:getComponent("label1").getValue();}]]></xp:this.defaultValue>
</xp:inputText>
</xp:div>
<xp:br></xp:br>
</xp:repeat>
</xp:view>
This is the example code for testing to get the exact issue.
Edit 1: Real Scenario
We have an application to select multiple dates for a meeting and hence using the notes free time we mark multiple dates and then users are allowed to edit/delete the same in another window..Since, it was not possible/feasible enough to save all the fields in SSJS, we rather preferred binding each field with the data-source under the repeat control by using custom properties of the custom control (hope I am making some sense). Every fields is mapped as #chintan pointed out as follows:
dataSource[compositeData.to]
As described in the first part of the question the fields are not getting updated since we set them using default values. However, based on the suggestion we tried to set the field using the script library which does work well, however, might seem stupid but it messes the date field. When we set the value using the following:
var d:java.util.Date = new java.util.Date(compositeData.selectedDate);
getComponent("from").setValue(d);
It jumbles up the month, date and year field and shows a complete different value (the same code works well when put as the default value).
Hope this makes sense.
Any kind of solution can be appreciated.
inputText2's defaultValue gets executed only once at first page load. Then the XPage memorized that repeat 1 has inputText2 defaultValue 1, repeat 2 has inputText2 defaultValue 2 and so on.
Example: as you can see in print log, inputText2's defaultValue doesn't get calculated again after deleting row 3 and later row 1.
Turn it around and set inputText2's value in label1's value code:
<xp:label
value="#{javascript:getComponent('inputText2').setValue(r); r}"
id="label1"
style="text-align:center">
</xp:label>
then it will set inputText2's value properly. You don't need inputText2's defaultValue property anymore.
As an alternative you can define inputText2's value property and bind it to a row-specific data source or viewScope variable.
As you described in your "Edit 1 Real Scenario", you want to edit and delete pairs of dates. I created the following example. Instead of dates I just use strings for simplicity. Keep the dates in a viewScope variable and edit/delete them right there:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.dates=[
{"from":"a", "to":"b"},
{"from":"c", "to":"d"},
{"from":"x", "to":"y"}];}]]></xp:this.beforePageLoad>
<xp:br />
<xp:repeat
id="repeat1"
rows="30"
var="r"
indexVar="i"
value="#{viewScope.dates}">
<xp:br></xp:br>
<xp:div>
<xp:button
value="Delete"
id="button1">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript: viewScope.dates.remove(i);
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:inputText
id="inputText1"
value="#{r.from}">
</xp:inputText>
<xp:inputText
id="inputText2"
value="#{r.to}">
</xp:inputText>
<xp:button
value="Update"
id="button2">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript: "";
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:div>
<xp:br></xp:br>
</xp:repeat>
<xp:text
escape="false"
id="computedField1">
<xp:this.value><![CDATA[#{javascript:
var length = viewScope.dates.length;
var result = "";
for (var i = 0; i < length; i++) {
result += viewScope.dates[i].from + " - " + viewScope.dates[i].to + "<br />";
}
result
}]]></xp:this.value>
</xp:text>
</xp:view>
Create the viewScope variable as an array of objects.

xpages set a value to a field from a repeat field

I'm trying to set a value to a field ( which is not inside the repeat control ) from a field which is on the repeat control.
The field from the repeat:
<xp:inputText id="inputText2" disabled="true">
<xp:this.value><![CDATA[#{viewScope.field_2[index]}]]></xp:this.value>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="sus">
<xp:this.action><![CDATA[#{javascript:getComponent("inputText4").setValue("1234");}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
And the target field , as you can notice, is inside a panel, id="sus".
Also the target field is binded to a form field.
but no value is assigned. How can I achieve this?
Components are only visualizations of a data model behind. Always bind your controls and go after the model value, never the component. A disabled inputText can't fire a value and in the code snippet above you have disabled="true". The onchange event can't fire.
This would work:
<xp:inputText id="inputText2" disabled="false">
<xp:this.value><![CDATA[#{viewScope.field_2[index]}]]></xp:this.value>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="sus">
<xp:this.action><![CDATA[#{javascript:viewScope.someValue=42;}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
Your target control would look like this:
<xp:inputText id="inputText4" value="#{viewScope.someValue}">
</xp:inputText>
If your target control is bound to something else (e.g. #{document1.test}), they your code needs to update that one. (document1.replaceItemValue("test",42))
Again 3 important aspects:
Never go after UI elements, always update the bound model behind (a.k.a: Talk to the data, not the UI also known as: The Controller updates the MODEL, not the view)
Make sure your target is part of the refreshed fields
Disabled fields don't fire events
Let us know how it goes

optgroup with Combo Box control

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.

Resources