I was doing a file upload using a fileupload control and partial refresh the panel in onchange event of the fileupload control to load the file into download control. It was working fine in chrome earlier version but chrome 84 version onwards partial refresh is not working, shows blank page. Did any one has this problem, please advise.
here is the source :
<xp:panel id="pnlAttachment6">
<xp:label value="Attachment" id="label60" styleClass=" control-label small" for="xpDocDate_1"> </xp:label>
<div class="#{javascript:return (getComponent('fileDownload6').getRowCount() == 1 ? 'hidden' : 'visible');}">
<xp:fileUpload id="fileUpload6" value="#{document1.Body_6}" styleClass="custom-file-input">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="pnlAttachment6" disableValidators="true"></xp:eventHandler>
</xp:fileUpload>
</div>
<xp:fileDownload rows="30" id="fileDownload6" displayLastModified="false" value="#{document1.Body_6}" displaySize="false"
displayType="false" displayCreated="false"
styleClass="table-borderless" hideWhen="true"
allowDelete="true" fileNameTitle=" ">
</xp:fileDownload>
</xp:panel>
Related
I have read many of the blog posts on doing a partial refresh on more than one element, but I cannot seem to get it to work.
I made a "toy" example, an Xpage with two fields and one button. Both fields are bound to a sessionScope counter. The button increments the counter and does a partial refresh on the containing panel.
I want to do a partial refresh on the first field, which is not in the panel [in my real Xpage the two fields are very far apart on the form.
Tried many different things to get this to work, but none worked. Is it even possible to do this?
<?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"
style="background-position:center left"
xmlns:on="http://www.openntf.org/domino/xsp" viewState="nostate"
xmlns:debug="http://www.openntf.org/xsp/debugtoolbar">
First Var<br></br>
<xp:text escape="true" id="computedField1" value="#{sessionScope.number}">
</xp:text>
<br></br>
<xp:br></xp:br>
<br></br>
Second Var<xp:panel id="pnl1">
<xp:text escape="true" id="computedField2" value="#{sessionScope.number}">
</xp:text>
<br></br>
<br></br>
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pnl1" execMode="partial"
execId="pnl1">
<xp:this.action><![CDATA[#{javascript:var t = sessionScope.number + 1;
sessionScope.number = t;}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
</xp:view>
Read Knut's link and got this to work. I made a change to the event handler of the button and it worked. Here is the code:
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pnl1" execMode="partial"
execId="pnl1">
<xp:this.action><![CDATA[#{javascript:var t = sessionScope.number + 1;
sessionScope.number = t;}]]></xp:this.action>
<xp:this.onComplete><![CDATA[XSP.partialRefreshPost("#{id:computedField1}");]]></xp:this.onComplete>
</xp:eventHandler>
Use XSP.partialRefreshPost(): http://avatar.red-pill.mobi/tim/blog.nsf/d6plinks/TTRY-84B6VP
I try to update items via a dialog control.
But my control OK button (or any other function in the dialog) do not refresh my "underlying" xpage.
I^m sure it's sth quite simple ....
the (symplified example) code of the dialog:
<xe:dialog id="diaSnippet" title="Update my xpage" extractContent="true"
preload="true">
<xe:dialogContent id="dialogContent1">
<xp:panel>
<xp:inputText value="#{test.dialog1}" id="inputText1">
<xp:this.defaultValue><![CDATA[#{javascript:test.getItemValueString("item1")}]]></xp:this.defaultValue>
</xp:inputText>
</xp:panel>
</xe:dialogContent>
<xe:dialogButtonBar id="dialogButtonBar1">
<xp:panel>
<xp:button id="button3" value="OK">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:test.replaceItemValue("item1","1234")
getComponent("diaSnippet").hide()}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xp:panel>
</xe:dialogButtonBar>
</xe:dialog>
in my understanding the Ok should update the xpage, and should change the value of the item "item1", but it does nothing.
thx in advance for any help, Uwe
argh .... now I found the answer in the wiki:
http://www-10.lotus.com/ldd/ddwiki.nsf/xpDocViewer.xsp?lookupName=Domino+Designer+XPages+Extension+Library#action=openDocument&res_title=Modal_dialogs_ddxl853&content=pdcontent
The settings in the "Server Options" on the event tab seem to do nothing, but writing the ID(s) to be refreshed in the hide() method does the trick.
So instead of getComponent("diaSnippet").hide() I write getComponent("diaSnippet").hide("IDtorefresh)
Uwe
With your help, I did create an Xpage with FTsearch & export into Excel features. The problem is the search being made based on multiple input fields ( let say > 10 ) the xpage is heavy texted + considering the fact there is also a view panel where I list the search results once the Search button is clicked.
This is the main reason I've tried to create ( after the link to Search&Export is clicked ) some pop-up dialog ( which contains an xpage, I guess ) and this pop-up dialog to contain all my input fields + the 2 buttons already created: search & export. So, after I press the Search button from my pop-up => the pop-up dialog is closed and the search results are displayed in the view panel, same thing for the Excel button: pop-up is closed and I open the excel file.
Currently, when I click the link to Search&Export I 'see' all the input panel for the search ( all the input fields + the two buttons ) and of course the view panel. It does work but I think a pop-up dialog will be more user-friendly and it will give more space for the xpage.
What I want to do: move all the inputs fields + the search and export to excel buttons into a dialog, which should appear when the link is clicked.
How to create a dialog which opens when a link is clicked and contains this panel below ( where all the input fields and button for the FTsearch are contained there )
My code for the panel which contains the input fields and the search & export button:
<xp:panel style="background-color:rgb(242,242,242);border-color:rgb(168,168,168);border-width:thin;border-style:solid">
<xp:table><xp:tr><xp:td><xp:label value="Din" id="label3" style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
</xp:label></xp:td>
<xp:td><xp:inputText id="inputText1" value="#{sessionScope.searchDate1}">
// some extra code
</xp:label></xp:td>
<xp:td></xp:td>
<xp:td>
<xp:inputText id="inputText2" value="#{sessionScope.searchDate2}">
// some extra code
</xp:inputText></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label value="Author" id="label1"
style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
</xp:label>
</xp:td>
<xp:td>
<xp:inputText id="searchAutor"
value="#{sessionScope.searchAutor}">
</xp:inputText>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td style="font-family:Verdana;font-size:8pt">
<xp:label id="label2" value="Titlu carte"
style="color:rgb(128,0,0);font-size:8pt;font-family:Verdana">
</xp:label>
</xp:td>
<xp:td>
<xp:inputText id="searchTitlu"
value="#{sessionScope.searchTitlu}">
</xp:inputText>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:button value="Search" id="button6"
styleClass="lotusFormButton">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true"
id="eventHandler1">
</xp:eventHandler>
</xp:button>
</xp:td>
<xp:td>
<xp:text escape="true" id="computedField1"
rendered="false">
<xp:this.value><![CDATA[#{javascript:return "Query = " + sessionScope.queryString}]]></xp:this.value>
</xp:text>
</xp:td>
<xp:td></xp:td>
<xp:td>
<xp:button value="Export" id="button1"
styleClass="lotusFormButton" style="float:right;">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true"
id="eventHandler2">
<xp:this.action>
<xp:openPage
name="/export_hidden.xsp">
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:button></xp:td>
</xp:tr>
</xp:table></xp:panel>
I appreciate your time.
Here's an example of a dialog where you can add your fields to:
<xe:dialog id="exampleDialog" title="Example dialog">
<xp:div styleClass="lotusDialogContent">
<!-- Add your table here -->
</xp:div>
<div class="lotusDialogFooter">
<!--
add your buttons here
-->
<!-- example cancel link -->
<xp:link id="link1" text="Cancel" styleClass="lotusAction">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.closeDialog('#{id:exampleDialog}')]]></xp:this.script>
</xp:eventHandler>
</xp:link>
</div>
</xe:dialog>
You open the dialog using server-side JS like this:
getComponent("exampleDialog").show();
Or like this using client-side JS:
XSP.openDialog("#{id:exampleDialog}")
You can also style the content and button bar area entirely using extension library. Your dialog would then look like this:
<xe:dialog id="exampleDialog">
<xe:dialogContent id="dialogContent1">
<!-- content here -->
</xe:dialogContent>
<xe:dialogButtonBar id="dialogButtonBar1">
<!-- buttons here -->
</xe:dialogButtonBar>
</xe:dialog>
Here's an example of a button that you can use inside the dialog to close the dialog and refresh the viewpanel on the same XPage (assuming the viewpanel is called "viewpanel1"):
<xp:button value="Search" id="searchButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" refreshId="viewpanel1">
<xp:this.action><![CDATA[#{javascript:
getComponent('exampleDialog').hide()
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
You can use XSP.addOnLoad() to open the dialog once the page is loaded. Add this to your XPage:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
XSP.addOnLoad(function(){
XSP.openDialog("#{id:exampleDialog}")
});
]]></xp:this.value>
</xp:scriptBlock>
I suspect this is a silly question, but here goes...
I have two fields on a custom control, both are bound to managed bean properties (as opposed to document fields). The second field is only rendered when a specific value is chosen in the first field.
What I am seeing is that the setter for the second field is not firing after it has been rendered (the getter is firing just fine).
I have worked around the problem by computing the CSS display property on the second field to be block or none depending on the value in the first field. Everything works fine in this situation, it seems to be specifically related to whether the second field is rendered when the page is first loaded.
***Edit
Here's the sample code block:
<div class="control-group">
<xp:label value="Party Type:" id="partytypelabel" for="party_typetv">
</xp:label>
<div class="controls">
<xp:comboBox id="party_typetv" value="#{InvolvedRecord.partytypetv}"
required="true" defaultValue=""
readonly="#{javascript:!InvolvedManager.isInEditMode()}">
<xp:selectItem itemLabel="<select>" itemValue="">
</xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:InvolvedManager.getPartyTypes()}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" disableValidators="true" refreshId="partyfields">
</xp:eventHandler>
</xp:comboBox>
</div>
</div>
<xp:panel id="partyfields" tagName="fieldset">
<xp:this.rendered><![CDATA[#{javascript:InvolvedManager.hasPartyType()}]]></xp:this.rendered>
<xp:div styleClass="control-group">
<xp:label for="Adverse_Party_TypeTL" value="Type:" id="adversepartytypelabel">
</xp:label>
<div class="controls">
<span>
<xp:comboBox id="Adverse_Party_TypeTL"
value="#{InvolvedRecord.adversepartytypetl}" readonly="#{javascript:!InvolvedManager.isInEditMode()}">
<xp:selectItem itemLabel="<select>"
itemValue="">
</xp:selectItem>
<xp:selectItem itemLabel="Company" itemValue="Company">
</xp:selectItem>
<xp:selectItem itemLabel="Individual" itemValue="Individual">
</xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" disableValidators="true" refreshId="adversepartyfields">
</xp:eventHandler>
</xp:comboBox>
</span>
</div>
</xp:div>
</xp:panel>
***End Edit
This is running on an 8.5.3 server.
Has anyone seen anything like this or maybe offer an explanation as I am confused!
You could render the component in all phases except the renderphase. This would allow to set the value during update phase, but would hide it to the client.
Here is an example:
Conditionally hidden edit box in a partially refreshed panel
EDIT:
<xp:this.rendered>
<![CDATA[#{javascript:
if( view.isRenderingPhase() ){
return InvolvedManager.hasPartyType();
}else{
return true;
}
}]]>
</xp:this.rendered>
Are you actually entering data into these fields after they have been rendered? I have found on many occasions that a field specifically bound to a managed bean does not actually even do anything unless some data has been entered into it. For instance, I have seen this: render the field dynamically, don't do anything to it, save the data source, no field whatsoever on the document. If I do that same activity but add data to the field, then it all works. Not an answer. Just some info.
Using 8.5.3 UP1
When I save my document from a dialog box certain fields are not being populated. If I save the document from within the xpage it saves these fields just fine. Here is a simple example to illustrate the issue:
<xp:link text="Save Document By Dialog"
id="link21">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.openDialog("#{id:dialog1}");]]></xp:this.script>
</xp:eventHandler>
</xp:link>
<br/>
<xp:button value="Save By Button" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:saveDocument var="document1"></xp:saveDocument>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Dialog">
<br />
<b>
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:"Save this document?"}]]></xp:this.value>
</xp:text>
</b>
<br />
<br />
<xp:button value="Yes" id="button7">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.script><![CDATA[XSP.closeDialog("#{id:dialog1}");]]></xp:this.script>
<xp:this.action>
<xp:saveDocument var="document1"></xp:saveDocument>
</xp:this.action></xp:eventHandler>
</xp:button>
<xp:button value="No" id="button8">
<xp:this.onclick><![CDATA[XSP.closeDialog("#{id:dialog1}");]]></xp:this.onclick>
</xp:button>
</xe:dialog>
<br/><br/>
<xp:inputText id="TitleTX" value="#{document1.TitleTX}"></xp:inputText>
<br/><br/>
<xp:inputRichText id="inputRichText1" value="#{document1.ProcessMapsRT}">
</xp:inputRichText>
The DOJO processes associated with the xe:dialog moves the dialog to another place in the DOM which means it will loose track of the data sources in the main parts of the document. If you do you saving in the dialog with SSJS instead of simple actions it may work better.
I have had the most success using a dialog contained in a custom control where the datasource is passed in through the composite data. That way the connection to the data is not lost and still works, BUT, I still use SSJS for saving in these situations.
/Newbs
UPDATE: This may be a time to use the technique Steve Pridemore described in NotesIn9 #42 (see xpages.tv).
First put a new event onto your XPage at the level with the data source in it.
<xp:eventHandler
id="saveEventHandler"
submit="true"
save="true"
event="calledbyid"
refreshMode="complete">
</xp:eventHandler>
Next, have the action in the dialog invoke this event using client side javascript:
XSP.executeOnServer('#{id:saveEventHandler}')
That "should" do it. I have not fully tested it but the examples from NoteIn9 do work.
/Newbs
Have you tried using dataContexts to define your datasource? I believe dataContext is a global object.
Update: dataContexts or even dominoDocument datasource worked when saving a document, but the problem was that the values were not saved. I therefore used a viewScope variable to store the values and that did the trick. I am not sure if this will help you, but here you go, this works for me:
<?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="newDoc" formName="frmContact"></xp:dominoDocument>
</xp:this.data>
<xp:inputText id="inputText1" value="#{viewScope.firstName}"></xp:inputText>
<xp:inputText id="inputText2" value="#{viewScope.lastName}"></xp:inputText>
<xp:button value="Label" id="button1">
<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>
<xe:dialog id="dialog1">
<xp:button value="Label" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:newDoc.replaceItemValue("fldFirstName", viewScope.firstName);
newDoc.replaceItemValue("fldLastName", viewScope.lastName);
newDoc.save();
getComponent("dialog1").hide();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xe:dialog>
</xp:view>
Hope this helps!
Ensure your data are posted to server before opening dialog. I would suggest to open such dialog with SSJS syntax - getComponent("dialog1").show()