I'm building in Domino Application with the Xpages extension library enabled a mobile page with an xe:singlePageApp and more xe:appPage(s). An xe:appPage is containing a panel having as data source a domino document. Within the same panel is a submit/save buttons I'm using to save the contents edited/changed in fields in document data source.
Due to indications of already posted questions and answers at Xomino , here on StackOverflow as well a on the XPages Wiki (links not provided here because I'm not allowed yet to post more than 2 links) - the submit button is within the panel and the data source is also declared for/within that panel (in the code below "panelDocContent").
The xp:inputText controls on the page have the same id and variable as the fields of the data source. If I set via SSJS in another button some values on the page - they are successfully set and a round rect list item with visibility depending on the set values is appearing as expected showing the fields also changed.
Problem: the Save/Submit button "Submit for approval" does not save the changes to the data source assigned to the panel.
I already tried also "ignoreRequestParams"=true set in the document data but this is in this context not an option. When I try this the corresponding document from the initial appPage with a DataView element supposed to open with the document AppPage is not loaded with its values - they are shown empty.
Any idea what I'm doing wrong here or what I could do different to submit the values in the editable changed fields (visible first when pressing "Request this tool" button ?
Here is the xPages / Custom control code:
<?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">
<xe:appPage id="docContent" pageName="docContent"
resetContent="true">
<xp:panel id="panelDocContent">
<xp:this.data>
<xp:dominoDocument var="docTool" formName="Tool"
action="editDocument" scope="request">
</xp:dominoDocument>
</xp:this.data>
<xe:djxmHeading id="djxmHeading2" back="Back" style="text-align:center">
<xe:this.moveTo><![CDATA[#{javascript:viewScope.get("pageToReturn");}]]></xe:this.moveTo>
<xp:this.facets>
</xp:this.facets>
<xe:this.label><![CDATA[#{javascript:"Tool"}]]></xe:this.label>
</xe:djxmHeading>
<!-- BUTTONS ! -->
<xp:panel id="preButtonPanel" style="font-size:8px;">.</xp:panel>
<xp:panel id="buttonPanel" style="text-align:center">
<xp:button value="Request this Tool" id="button1" style="font-size:12pt">
<xp:this.rendered><![CDATA[#{javascript:_status = docTool.getDocument().getItemValueString("Status");
(_status=="Available")}]]></xp:this.rendered>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:docTool.getDocument().replaceItemValue("Status", "Requested");
docTool.getDocument().replaceItemValue("SubmissionStatus", "Not Submitted");}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Submit for Approval" id="button4" style="font-size:12pt">
<xp:this.rendered><![CDATA[#{javascript:_status = docTool.getDocument().getItemValueString("Status");
_submissionstatus = docTool.getDocument().getItemValueString("SubmissionStatus");
(_status=="Requested") && (_submissionstatus == "Not Submitted") }]]></xp:this.rendered>
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:if (docTool.isEditable()) {
docTool.save();
sessionScope.msg="Data source docTool saved.";
_dump(sessionScope);
} else {
sessionScope.msg= "Document not in edit mode";
}
_dump(sessionScope);
context.redirectToPage("#viewPage");
}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action></xp:eventHandler></xp:button>
</xp:panel>
<xp:panel id="panelPostButtons" style="font-size:8px;">.</xp:panel>
<!-- END OF BUTTONS -->
<xe:djxmRoundRectList id="djxmRoundRectList2">
<xp:messages id="errormessages1"></xp:messages>
</xe:djxmRoundRectList>
<xe:djxmRoundRectList id="djxmRoundRectList1">
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="font-weight:bold">
Tool information
</xp:td>
</xp:tr>
</xp:table>
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="width:22.0%">Type</xp:td>
<xp:td style="width:69.0%">
<xp:label id="dspType">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("ToolType");}]]></xp:this.value>
</xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:22.0%">Part No.</xp:td>
<xp:td style="width:69.0%">
<xp:label id="dspPartNo">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("PartNumber");}]]></xp:this.value>
</xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>Status</xp:td>
<xp:td>
<xp:label id="dspStatus">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("Status");}]]></xp:this.value>
</xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>Submission status</xp:td>
<xp:td><xp:label id="dspSubmissionStatus">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("SubmissionStatus");}]]></xp:this.value>
</xp:label></xp:td>
</xp:tr>
</xp:table>
</xe:djxmRoundRectList>
<xe:djxmRoundRectList id="djxmRoundRectList3">
<xe:this.rendered><![CDATA[#{javascript:_status = docTool.getDocument().getItemValueString("Status");
_submissionstatus = docTool.getDocument().getItemValueString("SubmissionStatus");
(_status!="Available") && (_submissionstatus != "") }]]></xe:this.rendered><xp:table style="width:100.0%">
<xp:tr>
<xp:td
style="font-weight:bold;color:rgb(255,0,0)">
Please enter following mandatory
information:
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="font-weight:bold">
Shipping Address
</xp:td>
</xp:tr>
</xp:table>
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="width:22%">
Company data
<xp:span
style="font-weight:bold;color:rgb(255,0,0)">
*
</xp:span>
</xp:td>
<xp:td style="width:69.0%">
<xp:inputText id="Company" style="width:99%"
value="#{docTool.Company}">
</xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:22%">
Customer data
<xp:span
style="font-weight:bold;color:rgb(255,0,0)">
*
</xp:span>
</xp:td>
<xp:td style="width:69.0%">
<xp:inputText id="CustomerData"
style="width:99%" value="#{docTool.CustomerData}">
</xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:22%">
Demo reason
<xp:span
style="color:rgb(255,0,0);font-weight:bold">
*
</xp:span>
</xp:td>
<xp:td style="width:69.0%">
<xp:inputText id="DemoReason"
style="width:99%" value="#{docTool.DemoReason}">
</xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xe:djxmRoundRectList>
</xp:panel>
</xe:appPage>
</xp:view>
Here is also a link to ZIP with the entire application for getting the whole and direct idea of dependencies.
https://www.dropbox.com/s/rs1la3m0pfm548a/DemoTools_dev.zip?dl=0
I'll keep it there for the next 2-3 months.
In that code I also tried a simple "save document" action with the same data source indicated.
I've already spent a lot of time to get that solved and I'm stuck at this point. Any help will be much appreciated.
A colleague in my team shown me how to bring my custom control with that problem to work.
He made the "Request for approval" button to do only a partial refresh of the rounded list where status is set - the one with computed labels only. The same button to use then client side javascript to hide/show buttons and rounded list with editable fields. The submit button can then set the status fields again and save the document behind the data source "docTool". With that trick the page does not refresh fully with the effect that the document handle is then lost for the "Submit for approval" button.
He taken also advantage of the possibilities to execute CSJS in other events than onclick. These events can be found by selecting the eventhandler for the button in the Source view and then look at All properites in the Properties panel. These can be used when a partial refresh is triggered.
Another part of the trick was using Computed value for style in All properties for the different elements client-side, insted of the "Visible" property (in code "rendered" on server-side).
Here is the code of the corrected custom control where the "Submit for approval" button works the way described above:
<?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">
<xe:appPage id="docContent" pageName="docContent"
resetContent="true">
<xp:panel id="panelDocContent">
<xp:this.data>
<xp:dominoDocument var="docTool" formName="Tool"
action="editDocument" scope="request">
</xp:dominoDocument>
</xp:this.data>
<xe:djxmHeading id="djxmHeading2" back="Back"
style="text-align:center">
<xe:this.moveTo><![CDATA[#{javascript:viewScope.get("pageToReturn");}]]></xe:this.moveTo>
<xp:this.facets>
</xp:this.facets>
<xe:this.label><![CDATA[#{javascript:"Tool"}]]></xe:this.label>
</xe:djxmHeading>
<!-- BUTTONS ! -->
<xp:panel id="preButtonPanel" style="font-size:8px;">.</xp:panel>
<xp:panel id="buttonPanel" style="text-align:center">
<xp:button value="Request this Tool" id="buttonRequest">
<xp:this.rendered><![CDATA[#{javascript:_status = docTool.getDocument().getItemValueString("Status");
(_status=="Available")}]]></xp:this.rendered>
<xp:this.style><![CDATA[#{javascript:_status = docTool.getDocument().getItemValueString("Status");
var display = "none";
if(_status=="Available"){
display = "inline-block";
}
"font-size:12pt;display:"+display;}]]></xp:this.style>
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="djxmRoundRectListDisplayFields">
<xp:this.action><![CDATA[#{javascript:docTool.getDocument().replaceItemValue("Status", "Requested");
docTool.getDocument().replaceItemValue("SubmissionStatus", "Not Submitted");}]]></xp:this.action>
<xp:this.onComplete>
<![CDATA[var buttonSubmit = "#{id:buttonSubmit}";
document.getElementById(buttonSubmit).style.display = "inline-block";
var buttonRequest = "#{id:buttonRequest}";
document.getElementById(buttonRequest).style.display = "none";
var editablefields_id = "#{id:djxmRoundRectListEditableFields}";
document.getElementById(editablefields_id).style.display = "block";]]></xp:this.onComplete>
</xp:eventHandler>
</xp:button>
<xp:button value="Submit for Approval" id="buttonSubmit">
<xp:this.style><![CDATA[#{javascript:_status = docTool.getDocument().getItemValueString("Status");
_submissionstatus = docTool.getDocument().getItemValueString("SubmissionStatus");
var display = "none";
if((_status=="Requested") && (_submissionstatus == "Not Submitted")){
display = "inline-block";
}
"font-size:12pt;display:"+display;}]]></xp:this.style>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:if (docTool.isEditable()) {
print("Data source docTool saved.");
docTool.replaceItemValue("SubmissionStatus", "Submitted");
docTool.replaceItemValue("Status", "Requested");
docTool.save();
} else {
print("Document not in edit mode");
}
context.reloadPage();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
<xp:panel id="panelPostButtons" style="font-size:8px;">.</xp:panel>
<!-- END OF BUTTONS -->
<xe:djxmRoundRectList id="djxmRoundRectListDisplayFields">
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="font-weight:bold">
Tool information
</xp:td>
</xp:tr>
</xp:table>
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="width:22.0%">Type</xp:td>
<xp:td style="width:69.0%">
<xp:label id="dspType">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("ToolType");}]]></xp:this.value>
</xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:22.0%">Part No.</xp:td>
<xp:td style="width:69.0%">
<xp:label id="dspPartNo">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("PartNumber");}]]></xp:this.value>
</xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>Status</xp:td>
<xp:td>
<xp:label id="dspStatus">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("Status");}]]></xp:this.value>
</xp:label>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>Submission status</xp:td>
<xp:td>
<xp:label id="dspSubmissionStatus">
<xp:this.value><![CDATA[#{javascript:docTool.getDocument().getItemValueString("SubmissionStatus");}]]></xp:this.value>
</xp:label>
</xp:td>
</xp:tr>
</xp:table>
</xe:djxmRoundRectList>
<xe:djxmRoundRectList id="djxmRoundRectListEditableFields">
<xe:this.style><![CDATA[#{javascript:_status = docTool.getDocument().getItemValueString("Status");
_submissionstatus = docTool.getDocument().getItemValueString("SubmissionStatus");
var display = "none";
if((_status!="Available") && (_submissionstatus != "")){
display = "block"
}
"display:"+display;}]]></xe:this.style>
<xp:table style="width:100.0%">
<xp:tr>
<xp:td
style="font-weight:bold;color:rgb(255,0,0)">
Please enter following mandatory
information:
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="font-weight:bold">
Shipping Address
</xp:td>
</xp:tr>
</xp:table>
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="width:22%">
Company data
<xp:span
style="font-weight:bold;color:rgb(255,0,0)">
*
</xp:span>
</xp:td>
<xp:td style="width:69.0%">
<xp:inputText id="Company" style="width:99%"
value="#{docTool.Company}">
</xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:22%">
Customer data
<xp:span
style="font-weight:bold;color:rgb(255,0,0)">
*
</xp:span>
</xp:td>
<xp:td style="width:69.0%">
<xp:inputText id="CustomerData"
style="width:99%" value="#{docTool.CustomerData}">
</xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td style="width:22%">
Demo reason
<xp:span
style="color:rgb(255,0,0);font-weight:bold">
*
</xp:span>
</xp:td>
<xp:td style="width:69.0%">
<xp:inputText id="DemoReason"
style="width:99%" value="#{docTool.DemoReason}">
</xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xe:djxmRoundRectList>
</xp:panel>
</xe:appPage>
</xp:view>
Here is also dropbox link with a zipped copy of the entire database with this construct for testing. I think I'll keep it 6 months from now:
https://www.dropbox.com/s/2iy00xc10v3tis4/DemoTools_dev_forforums2.zip?dl=0