How do I display a multi-value field in a repeat? - xpages

I'm attempting to display the values of a multi-value field as an unordered list on my XPage. Unfortunately, when doing this with documents which do not already have the bound field, I'm informed 'rowData' not found for my itemValueArray. I had created a document prior to these machinations that has values in the field, so that one still opens for me.
Where have I gone wrong?
<xp:div style="display:none;">
<xp:inputText id="linkages" value="#{poDoc.Linkages}" multipleTrim="true" multipleSeparator=";">
</xp:inputText>
</xp:div>
<ul>
<xp:repeat id="linkagesDisplayRepeat" rows="30" var="rowData">
<xp:this.value><![CDATA[#{javascript:var linkages = poDoc.getItemValueArray("Linkages");
return linkages;}]]></xp:this.value>
<li>
<xp:text escape="true" id="computedField7">
<xp:this.value><![CDATA[#{javascript:rowData;}]]>
</xp:this.value>
</xp:text>
</li>
</xp:repeat>
</ul>

Error 'rowData' not found is caused by non-existing item "Linkages".
Render the ul-repeat-block only if item "Linkages" is in document
<xp:panel rendered="#{javascript: poDoc.hasItem('Linkages')}">
<ul>
<xp:repeat
...
</xp:repeat>
</ul>
</xp:panel>
As an alternative you could set a default value to document's item "Linkages" on beforePageLoad event:
<xp:this.beforePageLoad><![CDATA[#{javascript:
if (!poDoc.hasItem("Linkages")) {
poDoc.replaceItemValue("Linkages", "defaultValue");
}
}]]></xp:this.beforePageLoad>

similar to knut's second idea, you could test for a value during data binding. if there is no value, return a default array (e.g., ["data missing"]). otherwise, return the field's value(s). this way you don't have to force a value into the otherwise empty or absent field...unless that is what you want.

You can use simple EL for hide the repeat:
<xp:repeat id="linkagesDisplayRepeat" rows="30" var="rowData"
rendered="#{not empty poDoc.Linkages}">

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").

Tried to get user input while in a dialog box. InputText is read only it seem

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".

#Name within repeat

I have an app I am build which will allow the users to enter the approvers for each document manually. I wanted to put this in a repeat control instead of hard coding all the fields in the xpage. All is working as I want, except the names are stored in the document in the Canonical format. I don't want to present this to the user, I want to just show the Abbreviated name. I can't seem to get it working. Below is my repeat. I want to put and #name around the value of ApproverName_#
Thanks in Advance
Walt
<xp:repeat
id="repeat4"
var="rowItem"
indexVar="indexVar">
<xp:this.value><![CDATA[#{javascript:["1", "2", "3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"]}]]></xp:this.value>
<xp:panel>
<xp:repeat
id="repeat3"
var="fieldName">
<xp:label id="label31"><xp:this.value><![CDATA[#{javascript:"Approver - " + rowItem}]]></xp:this.value></xp:label><xp:label id="label33" value="Name"></xp:label>
<xp:this.value><![CDATA[#{javascript:["ApproverName_"+rowItem]}]]></xp:this.value>
<xp:inputText id="nameinputText"
value="#{document1[fieldName]}"
style="width:333.0px" rendered="#{javascript:!document1.isEditable()}">
</xp:inputText>
<xp:inputText id="inputText9" value="#{document1[fieldName]}" style="width:333.0px">
</xp:inputText>
<xe:namePicker id="namePicker1"
for="nameinputText">
<xe:this.dataProvider>
<xe:dominoNABNamePicker
nameList="peopleByLastName"
addressBookSel="db-name" groups="false"
people="true">
<xe:this.addressBookDb><![CDATA[#{javascript:#Subset(#DbName(), 1) + "!!names.nsf"}]]></xe:this.addressBookDb>
</xe:dominoNABNamePicker>
</xe:this.dataProvider>
</xe:namePicker></xp:repeat>
<xp:repeat id="repeat5" var="fieldName">
<xp:this.value><![CDATA[#{javascript:["Title_"+rowItem]}]]></xp:this.value>
<xp:label id="label32" value="Title"></xp:label>
<xp:inputText id="inputText10"
value="#{document1[fieldName]}">
</xp:inputText>
</xp:repeat>
<xp:repeat
id="repeat6"
var="fieldName">
<xp:this.value><![CDATA[#{javascript:["ApprovalFlag_"+rowItem]}]]></xp:this.value>
<xp:inputText id="inputText11" value="#{document1[fieldName]}">
</xp:inputText>
</xp:repeat>
<xp:repeat
id="repeat7"
var="fieldName">
<xp:this.value><![CDATA[#{javascript:["Reason"+rowItem]}]]></xp:this.value>
<xp:inputText id="inputText12" value="#{document1[fieldName]}">
</xp:inputText>
</xp:repeat>
</xp:panel>
</xp:repeat>
Use the Dojo Name Text Box instead of Input Field. It prevents typing, gives a better UX for removing entries, and does what you want out-of-the-box.

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.

Using a Repeater to show multi-value field values

I've setup a repeater and am reading the value from the multivalue field using GetItemValueArray. This returns the array and If I use a listbox it displays. I want to cross reference some other data with it though so I need to use a repeater. But I'm not sure how to have the repeater use an index that increments for each row. The code below "return rowdata[i]" doesn't recognize i.
<xp:repeat id="repeat1" var="rowdata" rows="30">
<xp:this.value>
<![CDATA[#{javascript:var myArray:Array = myDataSource.getItemValueArray("MyMultiValueFld")}]]>
</xp:this.value>
<xp:label id="lbl">
<xp:this.value><![CDATA[#{javascript:return rowdata[i];}]]></xp:this.value>
</xp:label>
</xp:repeat>
rowdata is not a reference to the myArray value as a whole, but the iterated entry in myArray. In other words... you already have what you need.
<xp:label value="#{rowdata}" />
Maybe you can simplify your code by naming using just the "rowdata" as value for your text item. You then should only change the repeat source to
myDataSource.getItemValue("myValueFld")
as this returns always an array of data. It's just depending on the datatype that this item stores, so you might have to convert in the text control.
Hi there your code has another issue, you do not have any return statement in this line:
<xp:this.value>
<![CDATA[#{javascript:var myArray:Array = myDataSource.getItemValueArray("MyMultiValueFld")}]>
</xp:this.value>
so the code does not return your myArray it only Returns the name of it as a string wich gets repeatet one time. Use this a valueBinding:
value="#{myDataSource.MyMultiValueFld}"
or add a return:
<xp:this.value>
<![CDATA[#{javascript:var myArray:Array = myDataSource.getItemValueArray("MyMultiValueFld");
return myArray;}]>
</xp:this.value>
Then you should be able to use Chris Tooheys Answer:
<xp:label value="#{rowdata}"/>
Use the indexVar property of the repeat control to setup a var containing the index.
Got it. The final piece of code is that I did have to create an indexVar="I" in my repeat1 tag but then I also had to change my label to a computed field. The final piece of code looks like:
<xp:table>
<xp:repeat id="repeat1" var="rowdata" rows="30" indexVar="i" first="0">
<xp:this.value><![CDATA[#{javascript:myDataSource.getItemValueArray("myMultivalueFld");}]]>
</xp:this.value>
<xp:tr><xp:td>
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:var repeat1:com.ibm.xsp.component.xp.XspDataIterator = getComponent("repeat1");
repeat1.getValue()[i];}]]></xp:this.value>
</xp:text>
</xp:td>
</xp:tr>
</xp:repeat>
</xp:table>
don't think I could have gotten it without the tidbit on the indexVar. Thanks
You can trim that code further. If all you need is the values, you don't need the indexvar and you don't need to reference the repeat as an XspDataIterator. Just use the rowdata as a variable.
<xp:table>
<xp:repeat id="repeat1" var="rowdata" rows="30">
<xp:this.value><![CDATA[#{javascript:myDataSource.getItemValueArray("myMultivalueFld");}]]>
</xp:this.value>
<xp:tr><xp:td>
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:rowdata;}]]></xp:this.value>
</xp:text>
</xp:td>
</xp:tr>
</xp:repeat>
Each value in the multi-value field is a "row" as referenced by rowdata. Similarly, if the data source were a view, each row would reference a document object. Don't dispose of the framework available to you by accessing the repeat as a component from inside the component itself.

Resources