MultipleField Value in repeat Control with Pager - xpages

what i want to do is If a field has more than 20 values How can i list values in a repeat control with pager component and editBox or computedField.
Only 20 records should be listed for per page. a Pager should help me to show all values page by page..
this field is listed in a dialogBox. here is the my Code below. If someoen did it and it is possible to share it. Appreciate that..
<xe:dialog id="dialogHistory" title="Tarihçe">
<xp:panel>
<xp:pager id="pager1" for="repeat1">
<xp:pagerControl type="First" id="pagerControl1"></xp:pagerControl>
<xp:pagerControl type="Previous" id="pagerControl2"></xp:pagerControl>
<xp:pagerControl type="Group" id="pagerControl3"></xp:pagerControl>
<xp:pagerControl type="Next" id="pagerControl4"></xp:pagerControl>
<xp:pagerControl type="Last" id="pagerControl5"></xp:pagerControl>
</xp:pager>
<xp:repeat id="repeat1" rows="1" first="1" var="col" indexVar="index">
<xp:this.value><![CDATA[#{javascript:var cVal = document1.getValue("history"); return cVal;}]]></xp:this.value>
<xp:inputText id="inputText1" multipleSeparator="#{javascript:#NewLine();}">
<xp:this.value><![CDATA[#{javascript:var cVal = document1.getValue("history");
return cVal;}]]>
</xp:this.value>
</xp:inputText>
</xp:repeat>
</xp:panel>
</xe:dialog>

The trouble is that you're referring back to the document, not the values of the field in the inputText.
<xp:repeat id="repeat1" rows="20" var="col" indexVar="index">
<xp:this.value><![CDATA[#{javascript:var cVal = document1.getValue("history"); return cVal;}]]></xp:this.value>
<xp:inputText id="inputText1" value="#{col}">
</xp:inputText>
</xp:repeat>
However, I think this will only display them in inputText. I don't think that it binds them to the field, so I don't think it would allow you to change the values.

Exactly according to the code,It is difficult to Point the issue but the same xpage code,If it would help you in any case.
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:br></xp:br>
<xp:repeat id="dateRepeatControl" rows="5" var="r" indexVar="i"
first="0">
<xp:this.value><![CDATA[#{javascript:var v:java.util.Vector = new java.util.Vector();
v.add('Date1');v.add('Date2');v.add('Date3');v.add('Date4');v.add('Date5');v.add('Date6');
v.add('Date7');v.add('Date8');v.add('Date9');v.add('Date10');v.add('Date11');v.add('Date12');
;v.add('Date13');v.add('Date14');
return v;}]]></xp:this.value>
<xp:br></xp:br>
<xp:div id="checkDiv">
<xp:text escape="true" id="computedField1"
value="#{javascript:r}">
</xp:text>
</xp:div>
<xp:br></xp:br>
</xp:repeat>
<xp:pager partialRefresh="true" id="pager1"
for="dateRepeatControl">
<xp:pagerControl id="pagerControl1" type="First"></xp:pagerControl>
<xp:pagerControl id="pagerControl2" type="Previous"></xp:pagerControl>
<xp:pagerControl id="pagerControl3" type="Next"></xp:pagerControl>
<xp:pagerControl id="pagerControl4" type="Last"></xp:pagerControl>
<xp:pagerControl id="pagerControl5" type="Separator"></xp:pagerControl>
</xp:pager>
</xp:view>
This is an xpage having a repeat control with 5 values of a vector to be repeated at one page and pages helps it to go next.You can use this xpage to get the working repeat control with the pager.

Related

Xpages: Can a DataView sort on category column

My underlying view is sorted on the categorized column. I have selected this column to sort on. There is not really a column header in the view for a category.
Any way around this? Maybe put a button that would switch the sort programmatically?
<xe:dataView
id="dataView1"
style="margin-top:55.0px"
openDocAsReadonly="true"
var="entry"
rows="25"
columnTitles="true"
showCheckbox="true"
showHeaderCheckbox="true">
<xe:this.data>
<xp:dominoView var="view1"
databaseName="scoApps\Spectrum\cashmarkData.nsf"
viewName="(view01)"
search="#{javascript:return sessionScope.searchString}"
sortColumn="author" />
</xe:this.data>
<xe:this.summaryColumn>
<xe:viewSummaryColumn
columnName="subject"
columnTitle="Subject" />
</xe:this.summaryColumn>
<xe:this.categoryColumn>
<xe:viewCategoryColumn
columnName="author"
columnTitle="Author"
style="font-weight:bold;font-size:14pt" />
</xe:this.categoryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn
columnTitle="Date Created"
columnName="creationDate"
headerStyleClass="xspDataViewColumn150"
styleClass="xspDataViewColumn150" />
</xe:this.extraColumns>
<xp:this.facets>
<xe:pagerExpand
id="pagerExpand1"
xp:key="pagerTopLeft"
partialExecute="true"
partialRefresh="true"
for="dataView1">
</xe:pagerExpand>
<xp:pager
layout="Previous Group Next"
partialRefresh="true"
id="pager1"
xp:key="pagerBottomLeft"
partialExecute="true" />
<xp:scriptBlock id="scriptBlock2"
xp:key="pagerBottom">
<xp:this.value><![CDATA[$("table.dataview").addClass("table-striped table-hover table-bordered table-condensed")]]></xp:this.value>
</xp:scriptBlock>
</xp:this.facets>
</xe:dataView>
I have done it before with a DataTable. In my column I set the sort column via a link
<xp:column id="column9">
<xp:this.facets>
<xp:div id="div8" xp:key="header" styleClass="team">
<xp:link escape="true" text="Team" id="link7" styleClass="sort">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="dataTablePanel">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:viewScope.sortColumn = "Team"}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</xp:div>
</xp:this.facets>
<xp:text escape="true" id="computedField14">
<xp:this.value><![CDATA[#{javascript:entry.getColumnValue("Team")}]]></xp:this.value>
</xp:text>
</xp:column>
And in my DominoView datasource I compute the sortColumn by
sortColumn="#{javascript:viewScope.get("sortColumn")}"
The refreshId point to a panel around my DataTable

Xpages: make tables with all fixed cells but last

I am having trouble understanding why I cannot control tables in Xpages in general and in HTML in particular.
I want some cells to have a fixed-width. For example, my first column in the table I am working on is a checkbox, so there is zero reason the width should ever change. The second column has two images that can be different but the width is always going to be the same. I HATE it when the size of these columns moves all around, as it looks bad.
Ideally I would like to be able to specify which cells are fixed and which are resizable, but if I cannot do that I want a table with every cell fixed except the last one.
Any suggestion on how to do this would be greatly appreciated.
David is correct, I should have added code. I am doing so now.
The code below is a repeat that generally dos what I want it to do. I am very happy for any suggestions to improve it or make it more flexible.
<?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:dominoView
var="view1"
viewName="(xpAllPCBuilds)" />
</xp:this.data>
<xp:this.resources>
<xp:styleSheet
href="/custom.css" />
</xp:this.resources>
<xe:firebugLite
id="firebugLite1" />
<xe:widgetContainer
id="widgetContainerView"
style="width:99.00%">
<xp:panel>
<xp:repeat
id="repeat1"
var="rowData"
indexVar="repeatIndex"
value="#{view1}">
<xp:this.facets>
<xp:text
disableTheme="true"
xp:key="header"
escape="false">
<xp:this.value><![CDATA[<table class='lotusTable repeatRowColors' border='0' cellspacing='0' cellpadding='0'>
<tr class ='lotusFirst lotusSort scope='col'>
<th>Employee Name</th>
<th>Computer</th>
<th>Create Date</th>
<th>Create User</th>
<th>ID</th>
</tr>
</thead>]]>
</xp:this.value>
</xp:text>
<xp:text
disableTheme="true"
xp:key="footer"
escape="false">
<xp:this.value>
<![CDATA[</table>]]></xp:this.value>
</xp:text>
</xp:this.facets>
<xp:this.rows><![CDATA[#{javascript:var rows:Integere = viewScope.get("rows");
if (rows == null)
{return 5}
else
{return rows}}]]></xp:this.rows>
<xp:tr
id="rowDataContainer">
<xp:td
style="width:200px;min-width:200px;max-width: 200pxx">
<xp:link
escape="true"
id="link1"
value="">
<xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("employeeName")}]]></xp:this.text>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action>
<xp:openPage
name="xpFormPCBuild.xsp"
target="openDocument">
<xp:this.documentId><![CDATA[#{javascript:rowData.getDocument().getUniversalID()}]]></xp:this.documentId>
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</xp:td>
<xp:td
style="width:50px;min-width:50px;max-width: 50px">
<xp:text
escape="true"
id="computedField2">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("computerName");}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td
style="width:75px;min-width:75px;max-width: 75px">
<xp:text
escape="true"
id="computedField3">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("CrtDte");}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td
style="width:200px;min-width:200px;max-width: 200px">
<xp:text
escape="true"
id="computedField4">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("crtUsr");}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td>
<xp:text
escape="true"
id="computedField5">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("ID")}]]></xp:this.value>
</xp:text>
</xp:td>
</xp:tr>
</xp:repeat>
</xp:panel>
</xe:widgetContainer>
</xp:view>
If you are using xp:table you can insert some HTML inside the xp:table container:
a colgroup (http://www.w3schools.com/tags/tag_colgroup.asp). With that you can control your column widhts with CSS e.g. style="width:200px"

Nested repeat controls in XPages

I have a situation where I have a set of nested repeat controls. What I would like to do is be able to refresh only selected parts of the repeat controls after dismissing a dialog box. I can specify the element to be refreshed as a parameter in the hide method of a dialog box like so:
dialog1.hide("repeat1");
where dialog1 is the component name of the dialog box and repeat1 is the component name of the repeat control to be refreshed.
If I refresh the top level, then all subordinate levels are refreshed. If I refresh the second level then only the first occurrence of the level 2 repeat control is refreshed. Likewise, if I refresh the third level, then only the first occurrence of the third level is refreshed.
There seems to be no obvious way to refresh, say, only the second level repeat controls or the third level repeat controls. Does anyone understand this behavior?
<?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:br></xp:br>
<xp:panel id="panel1">
<xp:button value="Label" id="button3">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="dialog1">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xp:text escape="true" id="computedField4" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:repeat id="repeat1" rows="30" var="rowdata" style="border:1px solid red"
repeatControls="true" removeRepeat="true">
<xp:this.value><![CDATA[#{javascript:[1, 2, 3]}]]></xp:this.value>
<xp:text escape="true" id="computedField1" value="#{javascript:rowdata}">
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true">
</xp:convertNumber>
</xp:this.converter>
</xp:text>
 - 
<xp:text escape="true" id="computedField7" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:br></xp:br>
<xp:repeat id="repeat2" rows="30" var="rowdata"
style="margin:1em; border:1px solid green" repeatControls="true"
removeRepeat="true">
<xp:this.value><![CDATA[#{javascript:["a", "b", "c"]}]]></xp:this.value>
<xp:text escape="true" id="computedField2" value="#{javascript:rowdata}">
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true">
</xp:convertNumber>
</xp:this.converter>
</xp:text>
 - 
<xp:text escape="true" id="computedField5" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:br></xp:br>
<xp:repeat id="repeat3" rows="30" var="rowdata"
style="margin:1em; border:1px solid orange" repeatControls="true"
removeRepeat="true">
<xp:this.value><![CDATA[#{javascript:[1, 2, 3]}]]></xp:this.value>
<xp:text escape="true" id="computedField3" value="#{javascript:rowdata}">
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true">
</xp:convertNumber>
</xp:this.converter>
</xp:text>
 - 
<xp:text escape="true" id="computedField6" value="#{javascript:#Now()}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:br></xp:br>
</xp:repeat>
</xp:repeat>
</xp:repeat>
</xp:panel>
<xe:dialog id="dialog1" title="Dialog box">
<xp:panel>
<xe:dialogButtonBar id="dialogButtonBar1">
<xp:panel>
<xp:button value="OK - Refresh repeat1" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide("repeat1")}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="OK - Refresh repeat2" id="button4">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide("repeat2")}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="OK - Refresh repeat3" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").hide("repeat3")}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
</xe:dialogButtonBar>
</xp:panel>
</xe:dialog>
</xp:view>
Have you considered to put a panel (or eventually a custom control) inside the repeats and instead of targeting the repeat, target the panel. There are a number of examples that can help you there:
Trigger a server event handler from the client
Call refresh from another component
Refresh more than one target ID
Enventually inside your repeats you might want to add the local id (the generated one) to a local JS object, so you have full control. Let us know how it goes.

XPages Mobile Control Partial refresh returns to menu page

I have a simple page inside mobile controls. I have an edit box and what I want to happen is to a partial refresh of the current in the onChange event of the edit control. Basically type something in the edit control - hit enter and do the partial refresh.
What's happening is hitting enter if returning the page to the main menu. If I put a value in and hit TAB then it works as I would want.
I'm starting a new app from scratch. But I've done this concept many times with an app in production. I can't find anything special in the code that would "trap" an enter button... So I'm at a loss why I can't get the behavior I want this time around.
Here's a video demo of the problem:
http://traffic.libsyn.com/notesin9/SO-Question2-HB.mp4
Below is the full code.
Thanks for any help!!
<?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:this.resources>
<xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css">
</xp:styleSheet>
<xp:styleSheet href="/mobile.css"></xp:styleSheet>
</xp:this.resources>
<xe:singlePageApp id="singlePageApp1"
selectedPageName="mainMenu">
<xe:djxmHeading id="djxmHeading1" label="My App"></xe:djxmHeading>
<xe:appPage id="mainMenuID" pageName="mainMenu">
<xe:djxmRoundRectList id="djxmRoundRectList1"
title="Main Menu">
<xe:djxmLineItem id="djxmLineItem9" moveTo="#container"
label="Test Page">
</xe:djxmLineItem>
</xe:djxmRoundRectList>
</xe:appPage>
<xe:appPage id="containerID" pageName="container"
resetContent="true">
<xe:djxmHeading id="djxmHeading5" label="My Page"
back="Main Menu">
</xe:djxmHeading>
<xe:djxmRoundRectList id="djxmRoundRectList2">
<xp:panel id="mainPanel">
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="width:50%"></xp:td>
<xp:td>Details</xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:inputText id="inputText1" styleClass="target alignVMiddle"
value="#{sessionScope.myValue}">
<xp:this.attrs>
<xp:attr name="autocorrect" value="off"></xp:attr>
<xp:attr name="placeholder" value="Tap to Scan...">
</xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:viewScope.put("test", "test");}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
</xp:td>
<xp:td></xp:td>
</xp:tr>
</xp:table>
<xp:br></xp:br>
Current Value: 
<xp:text escape="true" id="computedField1" value="#{sessionScope.myValue}"></xp:text>
<xp:br></xp:br>
<xp:br></xp:br>
Current Time: 
<xp:text escape="true" id="computedField2" value="#{javascript:#Now();}">
<xp:this.converter>
<xp:convertDateTime type="time"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
</xp:panel>
</xe:djxmRoundRectList>
</xe:appPage>
</xe:singlePageApp>
</xp:view>
Can you do something like this to force a partial refresh on Enter?
<xp:inputText id="inputText1" value="#{sessionScope.myValue}">
<xp:eventHandler event="onkeypress" submit="true" refreshMode="partial" refreshId="something">
<xp:this.script><![CDATA[//partial refresh on Enter
if( thisEvent.keyCode === dojo.keys.ENTER ){
dojo.stopEvent( thisEvent );
} else {
return false;
}
]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
I think the problem is that enter will try to do a submit and submit will return you to the first page. Try to add a check in onkeyup or down for charcode 13 and if this is found return false.
You might also need to do a stopproprigate or something like that.
Google for enter key submit form
From my mobile ;-)
Or perhaps this post. http://tinyurl.com/bsgy9g6

Show only Unread document current View?

anyone have a suggest to realize #Command([ViewShowOnlyUnread]) in XPages ViewPanel?
And is possibile realize the function "Next Unread" and "Previus Unread"?
Instead of binding the view panel to a standard view data source, try setting its value attribute to the following expression:
importPackage(com.ibm.xsp.model.domino);
var targetView = database.getView("Some View");
var unreadEntries = targetView.getAllUnreadEntries();
var unreadModel = new DominoViewEntryCollectionDataModel(unreadEntries);
return unreadModel;
The view panel should then behave exactly as it would if it were bound to a true data source, but only display the unread entries.
Excellent answer from Tim..
Here's other version with Repeat Controls -
<xp:repeat id="repeatUnreadEntries" var="viewEntry" indexVar="index" rows="30">
<xp:this.value><![CDATA[#{javascript: return database.getView('viewName').getAllUnreadEntries()}]]></xp:this.value>
<xp:this.facets>
<xp:panel id="repeatHeader" xp:key="header">
<xp:text disableTheme="true" escape="false">
<xp:this.value>
<![CDATA[<TABLE><THEAD><TH>Cell1</TH><TH>Cell2</TH></THEAD><TBODY>]]>
</xp:this.value>
</xp:text>
</xp:panel>
<xp:panel id="repeatFooter" xp:key="footer">
<xp:text disableTheme="true" escape="false">
<xp:this.value><![CDATA[</TBODY></TABLE>]]></xp:this.value>
</xp:text>
</xp:panel>
</xp:this.facets>
<TR>
<xp:repeat var="entryColVal" indexVar="colIndex" value="#{javascript:viewEntry.getColumnValues()}">
<TD>
<xp:text value="#{entryColVal}" />
</TD>
</xp:repeat>
</TR>
</xp:repeat>
The code provided by Tim Works if you set data and value attributes to view panel, like below.
<xp:viewPanel rows="30" id="viewPanel1">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="headerPager" id="pager1"></xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1" viewName="vwSrc"></xp:dominoView>
</xp:this.data>
<xp:this.value><![CDATA[#{javascript:importPackage(com.ibm.xsp.model.domino);
var targetView = database.getView("vwSrc");
var unreadEntries = targetView.getAllUnreadEntries();
var unreadModel = new DominoViewEntryCollectionDataModel(unreadEntries);
return unreadModel();}]]></xp:this.value>
<xp:viewColumn columnName="col1" id="viewColumn1">
<xp:viewColumnHeader value="Column1" id="viewColumnHeader1"></xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>

Resources