Jump to another page in a Single Page Application - xpages

I am writing a system for our forklift drivers in XPages. Basically our machines in production are going to get a iPod with a single big button on it. When they press the button I add a document to the Notes database (see code below). The forklife drivers have an iPad with a view that displays all the calls - they then select one call and drive to that machine. Once the machine operator has pressed the call button they can see some computed text saying that a forklift is command and another Cancel button.
I have it working (well, sort of) - but cannot seem to get the page in the "Single Page Application" to refresh.
This is the code that I have on a button - how do I now get the page to refresh - or how do I move to another page (in the "Single Page Application" using JavaScript) - sorry, I am just stumped!
Thanx for any help
Ursus
// setup date and time
var dt:NotesDateTime = session.createDateTime("Today 12");
dt.setNow();
// create a new document
var newDoc = database.createDocument();
// now set your fields
newDoc.replaceItemValue ("form", "fmRuf");
newDoc.replaceItemValue ("maschineName", sessionScope.displayName);
newDoc.replaceItemValue ("maschineNotesName", sessionScope.notesName);
newDoc.replaceItemValue ("maschineUm", dt);
newDoc.appendItemValue ("status", "20");
newDoc.computeWithForm(true, false);
// save the document
newDoc.save();

If you select the refresh mode to complete, the whole site should refreshed.
<xp:button value="label" id="button4">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript://SOME CODE}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Or try this code
<xp:button value="Beschriftung" id="button4">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
<xp:this.action>
<xp:actionGroup>
<xp:actionGroup condition="#{javascript://someCode}"></xp:actionGroup>
<xp:openPage name="/YourXpages.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>

Related

MS Word using POI4XPAGES

I am facing problem using the POI4Xpages with MSword 2016 version
Here is my setup details
- I have lotus notes client 9.0 FP1
- Installed POI4XPages server and designer client
- POI Xpages (1.3.1)
- I used MSWord2016
I'm able to get it setup running. My problem is that ,the first field (<>) inside the word document gets only get populated with values from the xpage document. There rest of fields inside the word document don't get the values populated.
For now I am trying to populate the first 3 fields into the word document.
I am attaching here my button code and WORD poi custom control
Thank you in advance.
***********This is my generate button***********
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:try{
var doc = document1.getDocument(true);
viewScope.put("tmpf1",doc.getItemValueString("kindofCase"));
viewScope.put("tmpf2",doc.getItemValueString("TypeofCase"));
viewScope.put("tmpf3",doc.getItemValueString("cxExt15"));
viewScope.put("tmpf4",doc.getItemValueString("cxAmount"));
viewScope.put("tmpf5",doc.getItemValueString("cxClientName"));
viewScope.put("tmpf6",doc.getItemValueString("caseNum"));
viewScope.put("tmpf7",doc.getItemValueString("BenfAcct"));
viewScope.put("tmpf8",doc.getItemValueString("BenfBranch"));
viewScope.put("tmpf9",doc.getItemValueString("cxDLQ"));
viewScope.put("tmpf10",doc.getItemValueString("cxForm1"));
viewScope.put("tmpf11",doc.getItemValueString("cxForm2"));
viewScope.put("tmpf12",doc.getItemValueString("cxRecRequestvia"));
viewScope.put("tmpf13",doc.getItemValueString("cxChannel"));
viewScope.put("tmpf14",doc.getItemValueString("BenfBank"));
viewScope.put("tmpf15",doc.getItemValueString("BenfName"));
viewScope.put("tmpf16",doc.getItemValueString("BenfID"));
viewScope.put("tmpf17",doc.getItemValueString("cxLength4"));
viewScope.put("tmpf18",doc.getItemValueString("BenfNationality"));
viewScope.put("tmpf19",doc.getItemValueString("BenfState"));
viewScope.put("tmpf20",doc.getItemValueString("BenfCity"));
//print (viewScope.tmpf2);
} catch (e){
print (e);
}}]]></xp:this.script>
</xp:executeScript>
<wgpoi:generateDocument documentId="wb"></wgpoi:generateDocument>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
**************POI word custom control **************
<wgpoi:document id="wb" downloadFileName="whistleblower.docx"
pathInfo="download">
<wgpoi:this.templateSource>
<wgpoi:resourcetemplate fileName="word2016.docx"></wgpoi:resourcetemplate>
</wgpoi:this.templateSource>
<wgpoi:this.bookmarks>
<wgpoi:docbookmark value="#{javascript:viewScope.tmpf1}"
name="field1">
</wgpoi:docbookmark>
<wgpoi:docbookmark value="#{javascript:viewScope.tmpf2}"
name="field2">
</wgpoi:docbookmark>
<wgpoi:docbookmark value="#{javascript:viewScope.tmpf3}"
name="field3">
</wgpoi:docbookmark>
</wgpoi:this.bookmarks>
</wgpoi:document>

How to pass variable from CSJS to SSJS in read mode

I want to be able to prompt the user for a comment and then be able to send this variable comment in an email. However, I'm unable to pass that variable from CSJS to SSJS. My document is in read mode.
Here is a sample button code where I can't seem to pass my comment.
Does anyone know how to do this?
Thanks in advance :)
<xp:panel readonly="false">
<xp:inputHidden id="inputHidden1" value="#{viewScope.tester}">
</xp:inputHidden>
</xp:panel>
<xp:button value="Reject" id="button7" style="margin-right:5.0px"
save="false">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:var doc:NotesDocument = currentDocument.getDocument();
doc.replaceItemValue("status", "0");
doc.save();
database.updateFTIndex(false);
var comment = viewScope.tester; /* HOW DO I GET COMMENT FROM CSJS TO HERE */
var ndoc = database.createDocument();
ndoc.appendItemValue("from", "tome#somewhere.com");
ndoc.appendItemValue("SendTo", "someone#somewhere.com);
ndoc.appendItemValue("subject", "My Subject");
var rti:NotesRichTextItem = ndoc.createRichTextItem("Body");
rti.appendText("Reason:" + comment + "\n\n");
ndoc.send()
}]]></xp:this.script>
</xp:executeScript>
<xp:openPage name="/mainpage.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
<xp:this.script>
<xp:executeClientScript>
<xp:this.script><![CDATA[
var comment = XSP.prompt("Please enter a comment:");
XSP.getElementById("#{id:inputHidden1}").value = comment;
/*
XSP.partialRefreshGet("#{id:computedField1}",
{
params:{"para1":"1", "para2":"2"}
});
*/
]]></xp:this.script>
</xp:executeClientScript>
</xp:this.script>
</xp:eventHandler>
</xp:button>
XSP.prompt will use the default browser prompt window. You will have limited functionality from it and, in my opinion, not a great user experience. I would recommend having your reject button open an XPages Extension Library dialog with an Edit Box to enter the comment. Bind the Edit Box to a requestScope variable - you won't need the value after the dialog closes, so you would need it at a higher scope level. In the "OK" button of the dialog run your SSJS and use the SSJS hide() method of the Dialog component to close the dialog, adding a parameter for a component on the page if you need to partially refresh it.
Don't bind that field to your document (in read mode). Bind it to viewScope or requestScope variable.
Also, look here for inspiration.
To accomplish this in the past, I have used CSS to hide the input fields and buttons. The client-side script is defined separately from the button actions.
<xp:text escape="false"><xp:this.value><![CDATA[
<script>
function promptBox(){
// ... do whatever to get the data input into
// XSP.getElementById("#{id:inputText1}").value
// OR if using JQuery $('.tester).val()
// then click hidden Save button
$('.reject').click()
// OR
XSP.getElementById("#{id:button1}").click()
}
</script>
]]></xp:this.value></xp:text>
<!-- hide the input field with CSS -->
<xp:inputText
id="inputText1"
value="#{viewScope.tester}"
defaultValue="#{viewScope.tester}"
styleClass="tester hidden">
</xp:inputText>
<!-- hide the button with CSS -->
<xp:button
value="Reject"
styleClass="reject hidden"
id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:var doc:NotesDocument = currentDocument.getDocument();
doc.replaceItemValue("status", "0");
doc.save();
database.updateFTIndex(false);
var comment = viewScope.tester; /* scoped variable already set */
var ndoc = database.createDocument();
ndoc.appendItemValue("from", "tome#somewhere.com");
ndoc.appendItemValue("SendTo", "someone#somewhere.com);
ndoc.appendItemValue("subject", "My Subject");
var rti:NotesRichTextItem = ndoc.createRichTextItem("Body");
rti.appendText("Reason:" + comment + "\n\n");
ndoc.send()
}]]></xp:this.script>
</xp:executeScript>
<xp:openPage name="/mainpage.xsp"></xp:openPage>
</xp:actionGroup>
</xp:button>
<!-- use link for button - style it with CSS -->
Reject
I do not like having both client-side and server-side scripts bound to the same button, the execution order of the code is not easily managed. There are other ways to combine these client side fields and server side scripts, but this is a simple demonstration.

XPages typeahead: do like Google

UPDATE
This is now what I have in my xpage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel id="ContainerPanel">
<xp:inputText id="typeAhead">
<xp:eventHandler event="onchange" submit="true"
refreshMode="norefresh">
<xp:this.action><![CDATA[#{javascript://code here to trap the click in the list of values
//displayed by the type ahead. Code redirects to another page
//the goal here would be to avoid the full/partial update and only use the CSJS
//code to trigger the button's partial/full refresh so we can avoid having the onchange code
//trigger a refresh when the user decides to click the button instead of clicking on a suggestion
//that is offered by the typeahead
//I thought of using the temporary field and use it to store the value selected in the type ahead list,
//so the code knows wheter we are running the CSJS from the type ahead list or from the button (the onchange
//of the type ahead will fill this field so we know wether to trigger the CSJS partial refresh }]]></xp:this.action>
<xp:this.script><![CDATA[var selectedValue = document.getElementById("#{id:typeAhead}").value;
var targetField = document.getElementById("#{id:temporaryField}");
alert("typeAhead CSJS onchange: " + selectedValue);
targetField.value = selectedValue;
//init the partial refresh here!!!]]></xp:this.script>
</xp:eventHandler>
<xp:typeAhead mode="partial" minChars="2">
<xp:this.valueList><![CDATA[aaaa
bbbb
cccc
dddd]]></xp:this.valueList>
</xp:typeAhead></xp:inputText>
 
<xp:button value="GO" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript://same call to the code called in the onchange event of the typeahead field
mySSJSFunction();}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:inputText id="temporaryField"></xp:inputText>
</xp:panel>
</xp:view>
Because the problem comes from the fact that the typeahead's onchange event is triggered even though the user just wants to type in something and go click on the button (therefore triggering the partial update of the event, so the code can call a SSJS function), I thought I'd get rid of the type ahead field's partial update and try to trigger it manually from CSJS.
I am trying to use a temporary field to store the value selected in the type ahead so I can figure out if I need to run the SSJS function right away (the user selected a value in the list) or just don't do nothing as the user just wants to go and click on the button.
Unfortunately, the code is at the office and I'm home right now, but the comments in the above code should give an idea of what I'm trying to achieve.
Not sure either if I should use XSP._partialRefresh(), XSP.PartialRefreshGet() and which control ID should I use (if it has any importance).
Hope it all makes sense... Just trying to give the user the possibility to select a value in the type ahead list, or type something in the field and click the search button, both cases calling the same SSJS function (using either the value selected in the type ahead list or what has been typed in the field).
FIRST POST
I have a page with a field and a button, just like the Google page. I have type ahead set up so it returns a list of documents title that correspond to the "search" term entered. Because I want the application to load a page when the user clicks on an item from the type ahead list, I added some code to the onChange event of the type ahead field. That works great, but...
Let's say a user wants to go ahead and click on the button anyways, because the list displayed by the type ahead field only show the top 10 search results, and the document he is looking for is not in that list, so he wants to trigger a "full search" by clicking on the search button. What happens is that the onchange code of the field is triggered before the onclick code of the button, and due to a fullrefresh on the type ahead field, this triggers a page refreshand the user needs to click a second time on the button to actually open the search page.
The question is quit esimple: how can I get the same behaviour as the Google page, opening up the page if I click on one of the suggestions, but also opening up a search page/search results page when clicking on the button?
Here is the code so far:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xp_1="http://www.ibm.com/xsp/coreex" dojoParseOnLoad="true">
<xp:this.resources>
<xp:script src="/xpSortedSearches.jss" clientSide="false"></xp:script>
<xp:script src="/xpadSearch.jss" clientSide="false"></xp:script>
<xp:dojoModulePath loaded="true"
url="/xsp/.ibmxspres/dojoroot/dojo/dojo.js">
</xp:dojoModulePath>
</xp:this.resources>
<xp:panel id="PanelSearch" style="text-align:right;">
<xp:inputText id="inputSearch"
style="width:225px;height:20px;font-size:10pt;font-family:sans-serif;padding-left:5.0px;padding-top:5.0px;padding-bottom:2.0px; border:1px solid gray;"
tabindex="0" disableClientSideValidation="false"
disableModifiedFlag="true">
<xp:this.attrs>
<xp:attr name="placeholder">
<xp:this.value><![CDATA[#{javascript:if(sessionScope.lang=="fr") {
"Entrez votre recherche ici ...";
} else {
"Enter your search query here...";
}}]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
<xp:typeAhead mode="full" minChars="3" valueMarkup="true"
var="searchQuery" ignoreCase="true">
<xp:this.valueList><![CDATA[#{javascript://TODO Memory management???
getTypeAheadValuesFromSearchBar(getComponent("inputSearch").getValue());}]]></xp:this.valueList>
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var key:String = getComponent("inputSearch").getValue();
if(!!key) {
getDocFromSubject(key);
}
}]]></xp:this.action>
<xp:this.script><![CDATA[showStandBy();
return true;]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event="onkeypress" submit="true"
refreshMode="complete">
<xp:this.script><![CDATA[//if we have a enter, launch the search
if (thisEvent.keyCode==13) {
var qryField = document.getElementById("#{id:inputSearch}");
if(doSearch(qryField)) {
showStandBy();
return true;
} else {
return false;
}
}else{
return false;
}]]></xp:this.script>
<xp:this.action><![CDATA[#{javascript:launchSearch();}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
<xp:button id="button1" icon="/search.png"
styleClass="searchButtonSmall">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.onStart>
StandbyDialog_Started();
</xp:this.onStart>
<xp:this.action><![CDATA[#{javascript:launchSearch()}]]>
</xp:this.action>
<xp:this.script><![CDATA[ var qryField = document.getElementById("#{id:inputSearch}");
if(doSearch(qryField)) {
showStandBy();
return true;
} else {
return false;
}]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:br />
</xp:panel>
<!--
This event handler makes sure the search box has the focus once the
page is loaded
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.onStart>
StandbyDialog_Started();
</xp:this.onStart>
<xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputSearch}");
if (edit) {
edit.focus();
}]]>
</xp:this.script>
</xp:eventHandler>
-->
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputSearch}");
if (edit) {
edit.focus();
}]]></xp:this.script>
</xp:eventHandler></xp:view>

xpages save / cancel actions scenario

I will describe shortly my little project application:
the main doc. content is Cdoc ( datasource which contains fields + a button ). This button displays a dialog which is Pdoc ( a datasource ) - before showing the button I will save the doc. to get the UNID and then I will pass it to the Pdoc, I want to link the Cdoc and Pdoc with the UNID.
My button which shows the dialog:
<xp:button value="Adding Pdoc from the dialog" id="button3"
styleClass="lotusFormButton" refreshMode="partial">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="computedField3">
<xp:this.action><![CDATA[#{javascript: if ( Cdoc.isNewNote() ) { Cdoc.save(); }
Cdoc.setValue("computedField3",Cdoc.getDocument().getUniversalID());
getComponent('exampleDialog').show()}]]></xp:this.action>
</xp:eventHandler>
The dialog / Pdoc contains just 1 button: Save ( because the X button is implicitly added to the dialog )
<xp:button value="Salvare" id="button6" styleClass="lotusFormButton">
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial" immediate="false"
save="false" refreshId="viewPanel1">
<xp:this.action><![CDATA[#{javascript:Pdoc.save();
getComponent('exampleDialog').hide();
}]]>
</xp:this.action>
</xp:eventHandler>
So, it saves the docs. from Pdoc and they are displayed in an embedded view from Cdoc.
The main. doc Cdoc contains also 2 (actions) buttons:
Cancel: redirect to Previous Page.
and
Save
<xp:button value="Salvare" id="buttonSave" styleClass="lotusFormButton" rendered="#{javascript:currentDocument.isEditable()}">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" immediate="false" save="true"
id="eventHandler1">
<xp:this.action><![CDATA[#{javascript:if (Cdoc.getItemValueString("txt_UNID")!= "") {
Cdoc.save();
}
facesContext.getExternalContext().redirect("http://ourserver.ro/XApp.nsf/view.xsp")
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
The problem is:
Let say I'll create 3 docs. from Pdoc from the dialog, the Cdoc. is already saved ( because the UNID was obtained ). If I save then using Cdoc Save, my main view panel from view.xsp will display:
one doc. Cdoc with its 3 Pdoc docs. ( I need just this case to be displayed )
another Cdoc ( I guess when I first obtain the UNID and I saved the Cdoc to obtain the UNID, this is the Cdoc in this case. Btw, if I save again Cdoc using the Save button , will the UNID will change ? ) and one empty ( don't know why ) Pdoc from the dialog.
How should my Save button from Cdoc should be like? Should I change also the Save from Pdoc button?
Thanks for your time.
I believe save="true" on a button will submit and save all datasources on the page. That could explain spurious Pdoc documents. You're calling the save in script, so you don't need save="true" - you can just use a normal Button type rather than Submit type for the button.
Once a Document has been saved, the UNID will not be changed.

xpages datasource fields inside a dialog

button's code:
if ( Cdoc.isNewNote() ) { Cdoc.save(); }
Cdoc.setValue("txt_UNID",Cdoc.getDocument().getUniversalID());
getComponent('exampleDialog').show()
The dialog contains some fields, some of them binded to a datasource fields, and one field is getting the value from txt_UNID ( which belongs to Cdoc ). The dialog has one button: Save:
<xp:button value="Save" id="button6" styleClass="lotusFormButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
imediate="false" save="false" refreshId="viewPanel1"> refreshId="viewPanel1">
<xp:this.action><![CDATA[#{javascript:Pdoc.save();
getComponent('exampleDialog').hide();
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
The Pdoc is saved and the doc. is listed inside the viewPanel1.
If I try again to add some new Pdoc using the button, it displays the previous Pdoc ( inside the dialog ) and all its fields are completed like in the previous case/Pdoc. If I save the dialog, it will overwrite the old Pdoc in the viewPanel1. Why I can not add multiple Pdocs using the dialog inside the viewPanel1 ?
Thanks for your time.
You probably need to change the data source scope for Pdoc to request (instead of view which is the default scope).
Add scope="request" to your data source definition and see if that helps:
<xp:dominoDocument var="Pdoc" ... scope="request">

Resources