On an custom control I have data-source bounded to a panel control:
<xp:panel>
<xp:this.data>
<xp:dominoDocument var="attachDoc" formName="fAttachment"></xp:dominoDocument>
</xp:this.data>
...
</xp:panel>
Within the panel I have some Edit Box controls e.g.
<xp:inputText id="inpOfficial" value="#{attachDoc.migration}">
When I try to save the doc via SSJS the edit boxes are not saved:
function saveAttachment(){
try {
var doc:NotesDocument = attachDoc.getDocument();
doc.save();
}
}
What am I missing?
The custom control is repeated over the xpage. The custom control has it's own save button calling the saveAttachment() function
Your saveAttachment() function appears to be trying to save a back end notes document on the database. To pass through the changes in the UI you need to run attachDoc.save() which passes the NotesXSPDocument (UI doc) through to the back end NotesDocument saved to the database.
(Assuming your try statement has a catch but you've left that out)
https://www.ibm.com/support/knowledgecenter/en/SSVRGU_9.0.1/reference/r_wpdr_xsp_xspdocument_r.html
Andrew Norrie is right.
If you still wish to use the back-end NotesDocument, get it like this:
var doc:NotesDocument = attachDoc.getDocument(true);
The parameterized getDocument method will update the back-end NotesDocument with the model values before return.
Related
My app uses KendoUI Grids for user views, but Xpages with custom controls for form pages (at least for now).
The Xpage looks for a sessionScope variable to determine if it is a new doc (nothing in the scope Var) or and update (unid is in the var).
<xp:this.data>
<xe:objectData
saveObject="#{javascript:PCModel.save()}"
var="PCModel">
<xe:this.createObject><![CDATA[#{javascript:var pc = new com.scoular.model.PC();
var unid = sessionScope.get("key");
if (unid != null) {
pc.loadByUnid(unid);
sessionScope.put("key","");
viewScope.put("readOnly","Yes");
} else {
pc.create();
viewScope.put("readOnly","No");
}
viewScope.status = pc.status;
return pc;}]]></xe:this.createObject>
</xe:objectData>
</xp:this.data>
This worked for a completely Xpage app. I just put a value in the sessionScope key and called the Xpage.
In the Kendo UI code I am using client-side javascript and I don't see a way to set the sessionScope.
I can control the URL, so I could switch gears and use that, however the data for my app is in a different DB than my code.
Any help would be greatly appreciated.
The easiest way is indeed using the URL:
call the XPage with a parameter ?key=... and change your CSJS code line to
var unid = param.key;
In case you really need to set a sessionScope variable from client side
then add this empty computed text field
<xp:text
escape="true"
id="setSessionScope"
value="#{javascript: if (param.key) {sessionScope.key = param.key} ''}" />
to your XPage and set the sessionScope variable in CSJS code with
XSP.partialRefreshGet("#{id:setSessionScope}", {params: {'key': 'your key'}})
I'm running around in circles...
I'll try to explain what I'm trying to do: we have an XPage in a Notes database for a specific document (all web). We also have defined our own forms inside the database. When the document is opened in XPages, the form is retrieved and the fields are populated. That works, I'm glad to say.
Then, we defined some kind of subform. The idea is that the subform displays specific fields in a different way. There can be multiple subforms attached to a form. All these elements are stored in custom controls, say ccForm, ccSubform and ccField.
Upon opening the document, I get the NotesXspDocument object which I can pass to ccForm. The custom control fetches the form definition, and uses a repeat control to generate ccField and a few ccSubform controls. These get passed a lot of parameters, e.g. the current document as a dataSource parameter. When there's a subform, data is copied from the main document and stored (differently) in a temporary document, declared inside ccSubform. The subform opens and reads a different form definition and generates its own ccField controls, using yet another repeat control.
So the NotesXspDocument is created at the top and passed to all controls using a DataSource parameter. The data related to the subform however is stored in a temporary NotesDocument.
My problems:
when the Save button is clicked, only the QuerySave event of the main XPage is triggered, and I can't find out how to trigger some sort of Save event for the temporary documents inside the subforms; I want to copy data back to the main document
is there some other event I can use to copy data back to the main document?
I have the usual compositeData issue in afterRestoreView; how can I get around it?
Awaiting your replies...
Thanks!
update
Current ccSubform, with some debugging:
<?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:xe="http://www.ibm.com/xsp/coreex" enableModifiedFlag="true" id="ccSubForm">
<xp:this.data>
<xp:dominoDocument var="docTemp" ignoreRequestParams="true">
<xp:this.querySaveDocument><![CDATA[#{javascript:dprint("subform qSD")}]]></xp:this.querySaveDocument>
<xp:this.postNewDocument><![CDATA[#{javascript:var sf= new ccAnyForm(docTemp,compositeData.formName);
viewScope.put(compositeData.formName, sf);}]]></xp:this.postNewDocument>
</xp:dominoDocument>
</xp:this.data>
<xp:this.afterRestoreView><![CDATA[#{javascript:try {
dprint("aRV: " + getClientId("ccSubForm"))
var sf= viewScope.get(compositeData.formName);
dprint("sf= " + sf);
if(!sf)
return;
var mdoc:NotesXspDocument= compositeData.dataSource;
var fields= sf.getFields();
for(var fi in fields) {
var fieldName= fields[fi].name;
var values= [];
for(var i= 0; i<rows.size(); i++) {
var tmp= docTemp.getItemValue(fieldName+"$"+i);
values.push(tmp);
dprint(fieldName + "[" + i + "]= " + tmp);
}
mdoc.replaceItemValue(fieldName, values)
}
}catch(e) {
dprint(e);
}}]]></xp:this.afterRestoreView>
<xp:this.beforePageLoad><![CDATA[#{javascript:dprint("bPL: " + getClientId("ccSubForm"))
}]]></xp:this.beforePageLoad>
<xp:tr>
<xp:td styleClass="label">
<xp:text escape="true" value="#{javascript:compositeData.label}"></xp:text>
</xp:td>
<xp:td>
<xp:panel styleClass="subform">
<xp:table style="width:100%" cellspacing="1" cellpadding="0">
<xp:tr>
<xp:repeat var="thisfield" indexVar="coli">
<xp:this.value><![CDATA[#{javascript:var sf= viewScope.get(compositeData.formName);
if(!sf)
return;
var mdoc:NotesXspDocument= compositeData.dataSource;
var fields= sf.getFields();
fields}]]></xp:this.value>
<xp:td styleClass="label">
<xp:text escape="true" value="#{javascript:thisfield.label}"></xp:text>
</xp:td>
</xp:repeat>
</xp:tr>
<xp:repeat rows="#{javascript:compositeData.rows}" disableTheme="true" var="row" indexVar="rowi">
<xp:this.value><![CDATA[#{javascript:var sf= viewScope.get(compositeData.formName);
if(!sf)
return;
var rows= [];
var fields= sf.getFields();
for(var fi in fields) {
var fieldName= fields[fi].name
var values:java.util.Vector= mdoc.getItemValue(fieldName);
if(values) {
for(var i= 0; i<values.size(); i++) {
rows[i]= i+1;
docTemp.replaceItemValue(fieldName+"$"+i, values[i])
}
}
}
return rows;}]]></xp:this.value>
<xp:tr>
<xp:repeat var="currfield" indexVar="coli">
<xp:this.value><![CDATA[#{javascript:var sf= viewScope.get(compositeData.formName);
if(!sf)
return;
var rows= [];
var fields= sf.getFields();
return fields}]]></xp:this.value>
<xp:td>
<xp:this.styleClass><![CDATA[#{javascript:compositeData.dataSource && compositeData.dataSource.isEditable && compositeData.dataSource.isEditable() && !compositeData.isEditable? "data readonly": "data"}]]></xp:this.styleClass>
<xc:ccfieldType="#{javascript:currfield.type}"
fieldLabel="#{javascript:currfield.label}" fieldTitle="#{javascript:currfield.title}"
fieldValue="#{javascript:currfield.value}" fieldIcon="#{javascript:currfield.icon}"
dataSource="#{javascript:docTemp}" formSource="#{javascript:compositeData.formSource}"
<xc:this.rendered><![CDATA[#{javascript:try {
return af? true: false;
} catch(e) {
return false;
}}]]></xc:this.rendered>
<xc:this.fieldName><![CDATA[#{javascript:currfield.name + "$" + rowi}]]></xc:this.fieldName>
<xc:this.fieldIdName><![CDATA[#{javascript:'id'+currfield.name+"$"+rowi}]]></xc:this.fieldIdName>
<xc:this.fieldUniqueName><![CDATA[#{javascript:'unique'+currfield.name+"$"+rowi}]]></xc:this.fieldUniqueName>
</xc:ccDynamicField>
</xp:td>
</xp:repeat>
</xp:tr>
</xp:repeat>
</xp:table>
</xp:panel>
</xp:td>
</xp:tr>
</xp:view>
You need to take one step back and revisit the approach. XPages doesn't limit you to Documents as data sources. It allows binding to Java beans .... and that points to the solution.
Step 1: for each 'special handling' custom control make one bean that gives you exactly what you need.
Step 2: Design one bean to be used as object data source in the main form. The object data source can be designed so you load a document. Don't try to store the document, only the field values and the unid so you can later save it back
Step 3: design properties in that object datasource that return the beans from step 1
Step 4: design your custom controls to take the bean a parmeter. Be specific with the datatype. You can use #{objDatasource.propname} to provide the parameter. Inside the custom controls use standard EL to bind the beans.
Now when you save the data source you have all data inside your main bean and a very clean layout.
Does that work for you?
I'm struggling to see the reason for creating the temp documents, copying the data across, then writing additional data back and not saving the document. I don't think you need to get that complicated because:
You can bind to and from the main document datasource within dependent custom controls. The currentDocument variable gets the nearest dominoDocument datasource, navigating back up the component tree. Alternatively, if your main datasource is always called document1, you can use that. All you need to ensure is that the relevant dominoDocument datasource is defined at a level above the custom control (if you visualise your components in a tree, with parents and children). You just won't be able to select fields in the drop-down.
If you set a value that's not in the main document, that can be computed on the defaultValue property of any controls on the custom control. Or you could set the relevant field on your main document during beforePageLoad / beforeRenderResponse etc.
Dynamic Content Control can be used to programmatically load only the relevant custom control(s).
Alternatively, if you want the temporary document approach, I'd recommend actually saving those documents with some key back to the main document. Then using a Save All Documents action, so you have them in the database, and retrieve them in postSaveDocument of the main document (personally I'd use script in the button instead) to retrieve the documents, write the values back to the main document and delete / flag so an agent can delete them. sessionAsSigner will get past any access limitations here.
If you have a reason for not wanting to clutter the database, don't forget XPages allows you to edit data from multiple databases, so you can always have a "temp store" where these sub-documents get created, edited and stored. The database can be computed, so it can be agnostic of the environment - dev, test, prod. Access can be set separately on that database, if you need to (e.g. allowing the users to delete from that temp store).
Every document data source has its own set of query type events. You could use those to get the data and then write it back to the main document.
Howard
I'm trying and trying for some time to resolve a viewPanel functionality - var property set to rowData.
Depending on the form name, I want to open the docs. ( which are listed in my viewPanel ) in a normal way and into a <xe:dialog> control. I did found this question Xpages Dynamic dojo dialog control and I'm trying to make it works in my case. the docs which I want to be open in the <xe:dialog>, are also created inside the dialog. By this viewpanel, I want to show/open them using this viewPanel control.
Here is the code from the onClick column event:
var formName = rowData.getDocument().getItemValueString("Form");
var docUNID = rowData.getDocument().getUniversalID();
var href = facesContext.getExternalContext().getRequest().getContextPath();
var pe:NotesViewEntry = rowData
if ( formName == "fmCompanie") // in this case, it works OK.
{ href + "/doc.xsp?documentId=" + docUNID + "&action=openDocument"; }
else if ( formName == "fmPersContact" ) // hmm... Still trying...
{ viewScope.put("dlgDocUnid", pe.getUniversalID())
getComponent("exampleDialog").show(); }
So, by this event I'm trying to set a viewScope variable which uses the UNID for the datasource in my exampleDialog control.
Also: the dialog control ( which lays on the same custom control as the viewPanel) has the documentId:
<xp:this.data>
<xp:dominoDocument var="Pdoc" formName="fmPersContact"
ignoreRequestParams="true" scope="request">
<xp:this.documentId><![CDATA[#{javascript:viewScope.get("dlgDocUnid");}]]></xp:this.documentId>
</xp:dominoDocument>
</xp:this.data>
Still, when I'm trying to open a doc. ( using form == "fmPersContact") the dialog has all fields empty, even if the doc. is already fill with some field values.
I appreciate your help. Thanks for your time.
The data source in the dialog does not contain action attribute. Therefore it does not respect the documentId parameter and creating a new document within the dialog.
Add action="editDocument" attribute and it will work.
Also, check what you are refreshing with the onclick event. You should partially refresh an area that contains your data (e.g. dialog or the panel in your dialog, etc.)
There is a required field:
<xp:this.validators>
<xp:validateRequired
message="Required field. Please add some text.">
</xp:validateRequired>
</xp:this.validators>
Also, the value from this field is copied ( using the onChange event ) to other fields:
<xp:eventHandler event="onchange" submit="true"refreshMode="norefresh">
<xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]>
</xp:this.action>
</xp:eventHandler>
An inconvenient issue appears when I just click the field to fill it: the validation message appears. Is because the field initially is empty and the code I added is into the onChange event?
I'd like to use this field as required before users can save the doc.
I tried set the values by CSJS, but without a result...
var string = XSP.getElementById("#{id:inputText1}").value
XSP.getElementById("#{id:txt_LocalitateS}").value = string
XSP.getElementById("#{id:txt_LocalitateP}").value = string
Also, let say I enter a value for inputText1 and later on I enter a new value... How can I update automatically the other 2 fields with the new value?
I tried something like this:
<xp:inputText id="inputText1" value="#{Cdoc.txt_LocalitateCompanie}"
style="height:20.0px;width:122.0px;font-weight:bold;font-size:10pt;font-family:verdana"
required="true">
<xp:this.validators>
<xp:validateRequired message="Completarea localitatii este obligatorie.">
</xp:validateRequired>
</xp:this.validators>
<xp:typeAhead mode="full" minChars="1" ignoreCase="true"
id="typeAhead1">
<xp:this.valueList><![CDATA[#{javascript:#DbLookup(#DbName(),"vwLocalitati",Cdoc.txt_LocalitateCompanie,1,"[PARTIALMATCH]");}]]></xp:this.valueList>
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="norefresh">
<xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]></xp:this.action>
<xp:this.script><![CDATA[XSP.partialRefreshGet("#{id:txt_LocalitateS}", {
onComplete: function() {
XSP.partialRefreshGet("#{id:txt_LocalitateP}", {
onComplete: function(){ }
});
}
});]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
Thanks in advance
Two things here. First, you should disable validators for onChange event, therefore it won't display the validation error.
Second, when you use a CSJS script together with a SSJS, it will fire the CSJS one and if it returns true, proceed with the SSJS. So if you want your CSJS code run after SSJS, you can place it into oncomplete.
If I understood your question correctly, the following code would solve it.
<xp:inputText
id="inputText1"
value="#{Cdoc.txt_LocalitateCompanie}"
style="height:20.0px;width:122.0px;font-weight:bold;font-size:10pt;font-family:verdana"
required="true">
<xp:this.validators>
<xp:validateRequired
message="Completarea localitatii este obligatorie.">
</xp:validateRequired>
</xp:this.validators>
<xp:typeAhead
mode="full"
minChars="1"
ignoreCase="true"
id="typeAhead1">
<xp:this.valueList><![CDATA[#{javascript:#DbLookup(#DbName(),"vwLocalitati",Cdoc.txt_LocalitateCompanie,1,"[PARTIALMATCH]");}]]></xp:this.valueList>
</xp:typeAhead>
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="norefresh"
disableValidators="true">
<xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]></xp:this.action>
<xp:this.onComplete><![CDATA[if(dojo.byId("#{id:txt_LocalitateP}")) {
XSP.partialRefreshGet("#{id:txt_LocalitateP}", {
onComplete: function() {
XSP.partialRefreshGet("#{id:txt_LocalitateS}", {
onComplete: function(){ }
});
}
});
}]]></xp:this.onComplete>
</xp:eventHandler>
</xp:inputText>
UPDATE: In your case, the field you want to refresh is on the second tab with partialRefresh="true". It means that at the time of partialRefreshGet, the target fields might not exist in the DOM. I have added a check now.
this is taken from my comments and put into an answer:
onChange events are generally frowned upon due to performance and user experience. If, however, the field is a listed control ie combobox it is not so dramatic. The following options/ideas are available
Take out the onChange() to test whether that makes a difference. If so, move your code.
Use an update button to change all the fields en masse also preventing information that is already inputted from being deleted unwanted-ly
create your own validation method and show/hide a label manually (hack-y)
Research how to manually put text into an errors control
If the field is in a dialog box, move the onChange() to the open/close methods of the dialog
FURTHER EDIT
An idea that I might suggest is using the xspDoc.getDocument(true) method to push all changes from the xpage to the background document. Something tells me that this might make a difference with the server reading the changes to the document and realizing that it is not empty.
ADDITIONAL IDEAS
I did not mention this because it is a bit more advanced, but should also get the job done assuming the refreshes are done. Even that is not that big of a deal. You could read all of your data from the document into a java bean. This bean is then the "data source" for your page and you bind all of your controls to the properties of this bean. You will then use EL to bind your controls to the bean. In the setters for those variables that trigger changes in other fields, change those values. So,
public PageBean(){
//read connection information out of the URL and get the correct information out of the document
//set all variables
firstName=doc.getItemValueString("firstName");
}
private String firstName;
public String getFirstName(){
return firstName;
}
public void setFirstName(String firstName){
this.firstName = firstName;
setLastName("Schmidt");
}
....
Once you register your bean with faces-config.xml, you can then use EL to access the data
#{PageBean.firstName}
#{PageBean.lastName}
Then you can get your document again in save and reset the values, save and release.
I have a computed field on an xpage the result of which is HTML. In that HTML I want to compute a link that will trigger some server side js function followed by a partial refresh.
My current code looks like this:
Click Here
This will work if my js function is a client-side function but I want to use this function to set the value of a field on the document so I need SSJS.
Static links that are created from the controls pallet in an xpage allow the link to call SSJS with partial refreshes. How can I do this with a computed HTML link?
Another option could be creating your own event handler and executing that via client side JavaScript code described in this article. So suppose you create an event handler something like this:
<xp:eventHandler event="name" id="eventhandler1a">
<xp:this.action>
<xp:saveDocument />
</xp:this.action>
</xp:eventHandler>
You can then create a function to call this event handler via JavaScript code:
XSP.executeOnServer = function () {
// the event handler id to be executed is the first argument, and is required
if (!arguments[0])
return false;
var functionName = arguments[0];
// OPTIONAL - The Client Side ID that is partially refreshed after executing the event handler
var refreshId = (arguments[1]) ? arguments[1] : "#none";
var form = (arguments[1]) ? this.findForm(arguments[1]) : dojo.query('form')[0];
// catch all in case dojo element has moved object outside of form...
if (!form)
form = dojo.query('form')[0];
// OPTIONAL - Options object containing onStart, onComplete and onError functions for the call to the
// handler and subsequent partial refresh
var options = (arguments[2]) ? arguments[2] : {};
// OPTIONAL - Value to submit in $$xspsubmitvalue. can be retrieved using context.getSubmittedValue()
var submitValue = (arguments[3]) ? arguments[3] : '';
// Set the ID in $$xspsubmitid of the event handler to execute
dojo.query('[name="$$xspsubmitid"]')[0].value = functionName;
dojo.query('[name="$$xspsubmitvalue"]')[0].value = submitValue;
this._partialRefresh("post", form, refreshId, options);
}
You can then call the event handler via this client side JavaScript code:
XSP.executeOnServer('#{id:eventhandler1a}', '#{id:panel1}')
Here panel1 refers to control which would be partially refreshed.
You can stick with your code if you use the XSP Object in the myFunction() client side function. This allows you to call a partial refresh. The other option is to call a Extlib JSON control and have your logic there. Depends a little on your coding style
The link control is not static. You can compute whatever you want, for example:
<xp:link escape="true" id="lnk">
<xp:this.value><![CDATA[#{javascript:"#"}]]></xp:this.value>
<xp:this.text><![CDATA[#{javascript:"Label here"}]]></xp:this.text>
</xp:link>