Nested repeat controls in XPages - 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.

Related

using viewscope for repeat var does not update viewscope outside the repeat

This gets me every time.
I want to edit the viewScope components and then use the results elsewhere - but in this simple example the computed field does not update .... what is the best way to do this?
Thanks
<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.Test = [];
viewScope.Test.push("Hello");
viewScope.Test.push("Go");
viewScope.Test.push("Hello1");}]]></xp:this.beforePageLoad>
<xp:repeat id="repeat1" rows="30" value="#{viewScope.Test}"
var="row" indexVar="i">
<xp:inputText id="inputText1" value="#{row}">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="computedField1"></xp:eventHandler>
</xp:inputText>
</xp:repeat>
This is new data
<xp:text escape="true" id="computedField1"
value="#{viewScope.Test}">
</xp:text>
Fixed it by changing the value of inputText to "#{viewScope.Test[i]}"
<xp:this.beforePageLoad><![CDATA[#{javascript:
viewScope.Test = ["Test","Test1","Test2"];
}]]></xp:this.beforePageLoad>
<xp:repeat id="repeat1" rows="30" value="#{viewScope.Test}"
var="row" indexVar="i">
<xp:inputText id="inputText2" value="#{viewScope.Test[i]}">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="computedField1">
</xp:eventHandler></xp:inputText>
</xp:repeat>
<xp:br></xp:br>This is new data
<xp:text escape="true" id="computedField1" value="#{viewScope.Test}"></xp:text>

Looking for best approach for signature button on xpage

I need a simple button whereby a user clicks to sign off on a document. A single signer per document, but when they click it, it puts their name and the date in two visible fields, and changes the status field.
What is the best approach for this? This is probably drop-dead simple but for some reason I cannot get it working.
They have been forced to log in by this time.
Thanks in advance.
Matt
Try the following:
<?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="test"></xp:dominoDocument>
</xp:this.data>
<xp:panel id="panelMain">
<xp:table>
<xp:tr>
<xp:td colspan="2">
<xp:label value="Main Form" id="label1"></xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:100.0px">
<xp:label value="Now" id="label2"></xp:label>
</xp:td>
<xp:td>
<xp:text escape="true" id="computedField1" value="${javascript:return #Now();}">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
<xp:panel id="panelSignature" style="background-color:rgb(192,192,192)">
<xp:button value="I Agree" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="SignatureTable">
<xp:this.action><![CDATA[#{javascript:
document1.replaceItemValue("SignedDate",#Now());
document1.replaceItemValue("SignedBy",userBean.getDisplayName());}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:table id="SignatureTable">
<xp:tr>
<xp:td colspan="2">
<xp:label value="SignatureTable" id="label3"></xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:100.0px">
<xp:label value="SignedBy" id="label6"></xp:label>
</xp:td>
<xp:td>
<xp:inputText id="computedField4" value="#{document1.SignedBy}" readonly="true"></xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:100.0px">
<xp:label value="SignedDate" id="label5"></xp:label>
</xp:td>
<xp:td>
<xp:inputText id="computedField3" value="#{document1.SignedDate}" readonly="true">
<xp:this.converter>
<xp:convertDateTime type="both"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
</xp:view>
Judging by this "They have been forced to log in by this time." your problem is in your ACL. Seems, you allow anonymous reading of the document, but in the moment you want to save it, ACL does not allow anonymous users to do that, so Domino asks for their identity.
Set anonymous access to No access level.
Here's a button, but if the user is not logged in and does not have anonymous edit access, then a login dialog will appear. For a signing function, I assume the user must be logged in to sign. document1 is the Xpage data document to be signed.
<xp:button
value="Sign"
id="button1"
styleClass="btn btn-primary">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:
document1.appendItemValue("SignerName", session.getEffectiveUsername();
document1.document1("SignedDate", session.createDateTime(#Now()));
document1.save();
}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>
</xp:eventHandler>
</xp:button>
If you need to update a document without logging in, then in the button, you will have to get the doc with sessionAsSigner and then update.

Xpages: Dynamic View Panel - Sorting

In my dynamic view panel, I need to have sortable columns. Problem is when sorting a column it resubmits the XPage and whole content is refreshed. Is there a way to achieve sorting only on the dynamic view panel without submitting whole page? Also, I want to hide this control if selected view is empty.
Here is my code:
<xp:panel id="searchPanel">
<xp:table styleClass="table table-condensed" style="width:auto">
<xp:tr>
<xp:td style="border-top:0px" styleClass="text-nowrap" id="searchColumn">
<xp:inputText id="inputText1" value="#{viewScope.searchterm}" styleClass="form-control"></xp:inputText>
<xp:link escape="true" text="" id="searchLink">
<i class="fa fa-search" style="margin-left:5px"></i>
<xp:eventHandler event="onclick" refreshMode="partial" immediate="false" submit="true" refreshId="ddPanel">
<xp:this.action><![CDATA[#{javascript:var pager:com.ibm.xsp.component.xp.XspPager = getComponent("pager");
pager.gotoFirst();}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
<xp:link escape="true" text="" id="clearSearchLink">
<i class="fa fa-times" style="margin-left:5px"></i>
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="ddPanel" onComplete="showHideTableToggle()">
<xp:this.action><![CDATA[#{javascript:viewScope.remove("searchterm");}]]></xp:this.action>
<xp:this.script><![CDATA[dojo.byId(getID("inputText1")).value=""]]></xp:this.script>
</xp:eventHandler>
</xp:link>
</xp:td>
<xp:td style="border-top:0px;padding-left:20px">
<xp:link escape="true" id="addButton" onclick="return false;" styleClass="btn btn-primary" style="color:rgb(255,255,255)" text="Add">
<i class="fa fa-plus" style="margin-right:5px"></i>
<xp:eventHandler event="onclick" submit="false" refreshMode="complete">
<xp:this.script><![CDATA[XSP.openDialog(getID('contentDialog'),'',{"docID":"","newDoc":"false"});]]></xp:this.script>
</xp:eventHandler>
</xp:link>
</xp:td>
</xp:tr>
</xp:table>
<xp:panel id="ddPanel">
<xe:dynamicViewPanel id="mainView" width="100%" dataTableStyleClass="table table-bordered table-condensed table-hover" rows="10" var="myView"
showColumnHeader="true" customizerBean="com.hcl.igdm.PickerViewBeanMainViews" partialRefresh="true" refreshId="ddPanel"
>
<xe:this.data>
<xp:dominoView var="mainDataView" dataCache="nodata">
<xp:this.viewName><![CDATA[#{javascript:sessionScope.showView.split("~")[0]}]]></xp:this.viewName>
</xp:dominoView>
</xe:this.data>
<xe:this.rowAttrs>
<xp:attr name="onClick">
<xp:this.value><![CDATA[#{javascript:return "javascript:myJSFunction();"}]]></xp:this.value>
</xp:attr>
</xe:this.rowAttrs>
</xe:dynamicViewPanel>
<xp:pager layout="Previous Group Next" partialRefresh="true" id="pager" for="mainView" title="Pager"></xp:pager>
</xp:panel>
It's a long time ago this question was placed... but maybe the answer can help other people.
You can put the dynamicViewPanel into a 'dynamic content' container (from ExtLib) with partial events attribute set to true. This will convert the full update events into partial refresh events.
<xe:dynamicContent partialEvents="true">
...
</xe:dynamicContent>

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"

How to Save Values in Documents Edited In-line On Repeat Control

I have a repeat control on an xPage with a text field displayed directly in edit mode. When a user changes the value in the field, I need them to be able to either:
Select an icon directly beside the field to save the value in the document.
Make changes to this field in more than one document and click a button to save all of these changes to the appropriate documents saved simultaneously.
What I have so far is a method of capturing the unids of the documents whose editable field has been updated.
I cannot get either of these saves to work. I have listed below the portion of the code that controls these areas.
Here's the save all and sessionScope information
<xp:panel id="InlineEditContainer" xp:key="facetMiddle" style="width:100%">
<xp:this.data>
<xp:dominoView var="view1" viewName="vwMetricsByAssigned">
<xp:this.postOpenView><![CDATA[#{javascript:var myList = new java.util.ArrayList();
sessionScope.put("myList", myList);}]]></xp:this.postOpenView></xp:dominoView>
</xp:this.data>
<xp:button value="Submit All" id="button1">
<xp:eventHandler event= <"onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:// Getting list of unids from docs which have been updated, and saving those docs
var db:NotesDatabase
if(sessionScope.myList == null){
return;
}else{
for (var s in sessionScope.myList){
var doc:NotesDocument = (db ? db.getDocumentByUNID(s) : database.getDocumentByUNID(s));
if (doc && doc.isValid()) {
doc.save();
}
}
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xp:repeat id="repeat1" rows="30" value="#{sessionScope.myList}" var="listData">
<xp:text escape="true" id="computedField6"><xp:this.value><![CDATA[#{javascript:listData + " , "}]]></xp:this.value></xp:text></xp:repeat>
<xp:br></xp:br>
Here's all the repeat data
<xp:repeat id="repeat2" rows="20" var="FColl" indexVar="idx" value="#{javascript:view1}">
<xp:panel id="InlineEditContainer2">
<xp:this.data>
<xp:dominoDocument var="document1" formName="frmMetricData" action="editDocument" documentId="# {javascript:FColl.getNoteID();}" >
</xp:dominoDocument>
</xp:this.data>
<xp:tr>
<xp:td id="td1">
<xp:text escape="true" id="computedField3">
<xp:this.value> <![CDATA[#javascript:FColl.getDocument().getItemValueString("BusinessUnit")}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td id="td2">
<xp:link escape="true" id="link1" value="/MetricData.xsp">
<xp:this.text><![CDATA[#{javascript:FColl.getDocument().getItemValueString("MetricName")}]]> </xp:this.text>
<xp:eventHandler event="onclick" submit="true" refreshMode="norefresh" immediate="true">
<xp:this.action>
<xp:openPage name="/MetricData.xsp" target="editDocument" documentId="#{javascript:return FColl.getNoteID();}" />
</xp:this.action></xp:eventHandler>
</xp:link>
</xp:td>
<xp:td id="td3">
<xp:inputText id="EditBox3" value="#{document1.Actual}" tabindex="1">
<xp:this.defaultValue><![CDATA[# {javascript:FColl.getDocument().getItemValueString("Actual")}]]></xp:this.defaultValue>
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true" />
</xp:this.converter>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="repeat1">
<xp:this.action><![CDATA[#{javascript:// get the universalID of the document
var keyCode = FColl.getDocument().getUniversalID();
// Create an Array
var myArray = sessionScope.get("myList");
//If it's not already in the Array then add it.
if (!myArray.contains(keyCode)) {
myArray.add(keyCode);
}}]]></xp:this.action>
</xp:eventHandler></xp:inputText>
<xp:span>
<xp:image url="/.ibmxspres/domino/oneuiv2/images/iconConfirmation16.png" id="image1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:saveDocument var="document1" />
</xp:this.action>
</xp:eventHandler>
</xp:image>
</xp:span>
If anybody can give me any ideas to try, I would be very grateful.
Make it simple! There is a simple action "save". Comes in save and save all flavors. The later goes below the repeat and saves any changed document.

Resources