In ssjs I try to change the state of a checkbox.
I tried :
doc.replaceItemValue( 'picWeb', "true" );
which doesn't seem to change anything (checkbox doesn't change to checked)
I also tried :
doc.replaceItemValue( 'picWeb', true );
which throws an error
( [TypeError] Exception occurred calling method NotesDocument.replaceItemValue(string, boolean) null)
If I understand it well : you can't change a checkbox (boolean) with replaceItemValue, but how do I change it then ?
Is it possible with ssjs or java or ...
Define in checkbox which string relates to checked value and which to unchecked value with the properties checkedValue and uncheckedValue:
<xp:checkBox
...
uncheckedValue="false"
checkedValue="true">
</xp:checkBox>
You can set the value then with
document1.replaceItemValue("picWeb", "true")
This is a complete example to demonstrate how to set a checkbox value in SSJS:
<?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:this.data>
<xp:checkBox text="picWeb" id="checkBox1"
value="#{document1.picWeb}"
uncheckedValue="false"
checkedValue="true">
</xp:checkBox>
<xp:button value="True" id="button2">
<xp:eventHandler event="onclick" submit="false"
refreshMode="partial" refreshId="checkBox1">
<xp:this.action><![CDATA[#{javascript:
document1.replaceItemValue("picWeb", "true")
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="False" id="button3">
<xp:eventHandler event="onclick" submit="false"
refreshMode="partial" refreshId="checkBox1">
<xp:this.action><![CDATA[#{javascript:
document1.replaceItemValue("picWeb", "false")
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Submit" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true">
</xp:eventHandler>
</xp:button>
</xp:view>
The value is set in document as string
Related
I want to use the feature of the checkbox control by using SSJS to return "true" or "false" based on the value of a session variable. The calculation only runs when the page is completely refreshed. The code does not on a partial or full refresh once the page is loaded (The only exception is that the code will run on the first partial or full refresh - which is interesting). I wrote a quick demonstration program.
I am sure this has something to do with the JSF lifecycle, but am not sophisticated in the technology to decipher what is going on.
Thanks,
---Lisa&
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.beforeRenderResponse><![CDATA[#{javascript:if (sessionScope.uncheck === true) {
sessionScope.checked = false;
} else {
sessionScope.checked = true;
}}]]></xp:this.beforeRenderResponse>
<xp:panel id="Panel1">
<xp:label id="label1" value="Panel1" style="font-weight:bold"></xp:label>
<xp:button id="button1" value="Button1 - Check the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:sessionScope.checked = true;
print("just clicked Button1 sessionScope.checked = ",sessionScope.checked);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button3" value="Button 2 - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:sessionScope.checked = false;
print("just clicked Button2 sessionScope.checked = ",sessionScope.checked);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button2" value="Reload page - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:sessionScope.uncheck = true;
context.reloadPage();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button4" value="Reload page - Check the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:sessionScope.uncheck = false;
context.reloadPage();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
<xp:panel id="Panel2">
<xp:label id="label2" value="Panel2" style="font-weight:bold">
</xp:label>
<xp:checkBox id="checkBox1" text="Computed Checkbox">
<xp:this.defaultChecked><![CDATA[#{javascript:print("Calculating CheckBox - sessionScope.checked = ",sessionScope.checked);
return sessionScope.checked}]]></xp:this.defaultChecked>
</xp:checkBox>
</xp:panel>
</xp:view>
Bind your sessionScope variable directly to the xp:checkBox. This way any changes to the sessionScope variable will be reflected by the checkbox when refreshed:
<xp:checkBox id="checkBox1" text="Computed Checkbox" value="#{sessionScope.checked}"></xp:checkBox>
Here's an example using your buttons for partial refresh and for full reload:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel id="Panel1">
<xp:label id="label1" value="Panel1" style="font-weight:bold"></xp:label>
<xp:button id="button1" value="Button1 - Check the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = true;
print("just clicked Button1 sessionScope.checked = ",sessionScope.checked);
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button3" value="Button 2 - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = false;
print("just clicked Button2 sessionScope.checked = ",sessionScope.checked);
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button2" value="Reload page - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = true;
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button4" value="Reload page - Check the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = false;
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
<xp:panel id="Panel2">
<xp:label id="label2" value="Panel2" style="font-weight:bold">
</xp:label>
<xp:checkBox id="checkBox1" text="Computed Checkbox" value="#{sessionScope.checked}"></xp:checkBox>
</xp:panel>
</xp:view>
I have a Xpages in which I have repeat control, Now I have the list of documents from a view. Onclick on the row is setting the viewScope Array with the Unid.
I have done this actually for the purpose of selecting the document and to keep track that which document is selected, I am successfull in doing that but the main purpose was, I wanted to obtain the UNID on right-Click context menu.
Now, Also the right click event is providing me the UNID in one text field. I have obtained this by using "oncontextmenu" attribute in a div tag.
<div oncontextmenu="javascript:
var a = document.getElementById('#{id:inputText1}').value;
document.getElementById('#{id:inputText2}').value=a;
return false;">
There is "inputText1" in each row with the default value UNID of the perticular row.
In above code I am getting the UNID from "inputText1" and setting it up to the "inputText2", So on right click I am successfully getting the UNID of the clicked row.
In futher case I have an idea that I can do any operation by using that UNID but instead of setting the UNID to the "inputText2", I want to set this UNID to viewScope not in "inputText2".
Basically my overall issue is that I want to set UNID which I am getting on right-click(oncontextmenu) to viewScope not in any text field("inputText2") using above client-side java script.
example 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">
<xp:this.afterPageLoad><![CDATA[#{javascript:var myList = new java.util.ArrayList();
sessionScope.put("myList",myList);}]]></xp:this.afterPageLoad>
<xp:button value="Refresh" id="button3">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="repeat2">
</xp:eventHandler></xp:button>
<xp:repeat id="repeat2" rows="30" value="#{sessionScope.myList}"
var="listData">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:listData+" , "}]]></xp:this.value>
</xp:text>
</xp:repeat>
<xp:inputText id="inputText2"></xp:inputText>
<xp:repeat id="repeat1" rows="30" var="rowData"
indexVar="repeatIndex" first="0" styleClass="abc">
<xp:this.value><![CDATA[#{javascript:var viewName = "Adressakten";
var v:NotesView = database.getView(viewName);
return v.getAllEntries();}]]></xp:this.value>
<xp:br></xp:br>
<div oncontextmenu="javascript:
var a = document.getElementById('#{id:inputText1}').value;
document.getElementById('#{id:inputText2}').value=a;
return false;">
<xp:inputHidden id="inputText1">
<xp:this.defaultValue><![CDATA[#{javascript:var doc:NotesDocument = rowData.getDocument();
return doc.getUniversalID();}]]></xp:this.defaultValue>
</xp:inputHidden>
<xp:div id="div1">
<xp:this.style><![CDATA[#{javascript:javascript:var keyCode = rowData.getDocument().getUniversalID();
var myArray = sessionScope.get("myList");
if(myArray.contains(keyCode))
return "border-color:rgb(192,192,192);border-style:solid;border-width:thin;height:42.0px;background-color:green;cursor:pointer;"
else
return "border-color:rgb(192,192,192);border-style:solid;border-width:thin;height:42.0px;background-color:rgb(255,255,128);cursor:pointer;"}]]></xp:this.style>
<xp:text escape="true" id="computedField2">
<xp:this.value><![CDATA[#{javascript:var doc:NotesDocument = rowData.getDocument();
return doc.getItemValueString('aTitel');}]]></xp:this.value>
</xp:text>
<br />
document Id:
<xp:text escape="true" id="computedField3">
<xp:this.value><![CDATA[#{javascript:var doc:NotesDocument = rowData.getDocument();
return doc.getUniversalID();}]]></xp:this.value>
</xp:text>
<xp:br></xp:br>
<xp:button value="Add" id="button1" rendered="false">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="computedField2">
<xp:this.action><![CDATA[#{javascript:var keyCode = rowData.getDocument().getUniversalID();
var myArray = sessionScope.get("myList");
if(!myArray.contains(keyCode)){
myArray.add(keyCode);
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Remove" id="button2" rendered="false">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var keyCode = rowData.getDocument().getUniversalID();
var myArray = sessionScope.get("myList");
myArray.remove(keyCode)}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var keyCode = rowData.getDocument().getUniversalID();
var myArray = sessionScope.get("myList");
if(!myArray.contains(keyCode)){
myArray.add(keyCode);
}
else{
myArray.remove(keyCode);
}}]]></xp:this.action>
</xp:eventHandler>
</xp:div></div>
<br />
</xp:repeat>
</xp:view>
It sounds like the JSON RPC Service from the Extension Library is what you need. That will allow you to run SSJS using a value passed from CSJS. It's covered on pages 351-3 of XPages Extension Library book and there may be examples in Extension Library Demo database.
I absolutely agree with the answer of Paul Stephen Withers, the best way to do this is using JSON RPC.
Here a JSON RPC working example:
<?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:jsonRpcService id="jsonRpcService1" serviceName="rpcService">
<xe:this.methods>
<xe:remoteMethod name="setUniqueID" script="sessionScope.put('sessionScopeVarTest', unid);">
<xe:this.arguments>
<xe:remoteMethodArg name="unid" type="string"></xe:remoteMethodArg>
</xe:this.arguments>
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
Show Value of "sessionScope.sessionScopeVarTest" ->
<xp:text escape="true" value="#{sessionScope.sessionScopeVarTest}" style="font-weight:bold">
</xp:text>
<br/>
<br/>
<xp:button id="btnTriggerRPC" value="Trigger RPC Method">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[rpcService.setUniqueID('13F51C65D8C257FCC1257ED000361786')]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button id="btnRefresh" value="Refresh Page">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
</xp:eventHandler>
</xp:button>
</xp:view>
In a xe:dialog (XPages Extension Library dialog), I want to use XSP.partialRefreshPost function, but when refreshing the entered values are lost.
The following example demonstrate the problem.
ComboBox1, inputText1, ComboBox2, inputText2 : OK but not in a xe:dialog
ComboBox3, inputText3 : OK but not use XSP.partialRefreshPost
ComboBox4, inputText4 : NOK because it uses XSP.partialRefreshPost function in xe:dialog
I try to change the properties xe:dialog without success.
How to use XSP.partialRefreshPost in a xe:dialog to have refresh OK ?
Thanks
<?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:label id="label1" value="refresh partial"></xp:label>
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial"refreshId="comboBox1">
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText1">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="inputText1">
</xp:eventHandler>
</xp:inputText>
<xp:br></xp:br>
<xp:label id="label2" value="refresh XSP.partialRefreshPost"></xp:label>
<xp:comboBox id="comboBox2">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:comboBox2}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText2">
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:inputText2}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
<xp:br></xp:br>
<xe:dialog id="dialog1" partialRefresh="true">
<xp:label id="label3" value="refresh partial"></xp:label>
<xp:comboBox id="comboBox3">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="comboBox3">
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText3">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="inputText3">
</xp:eventHandler>
</xp:inputText>
<xp:br></xp:br>
<xp:label id="label4" value="refresh XSP.partialRefreshPost"></xp:label>
<xp:comboBox id="comboBox4">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:comboBox4}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText4">
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:inputText4}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
</xe:dialog>
<xp:button id="button1" value="dialog">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.openDialog('#{id:dialog1}');]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:view>
partialRefreshPost doesn't work as expected in <xe:dialog>, e.g., when you choose a value in a combobox then partialRefreshPost sends the selected value on change event to server but server's response contains the old value and combobox value jumps back to old value. Even binding the field to data like a scope variable doesn't help.
But there is a workaround. Add parameter execId to partialRefreshPost:
XSP.partialRefreshPost("#{id:comboBox4}",
{execId: "#{id:comboBox4}", immediate: true})
Specify the element which you want to refresh, in this case the same (comboBox4). This way it will work as expected - like outside of a dialog box.
I have a section in my xpage, it's open by default. When i close the section and make a partial refresh it opens the section again.
Is there a easy way the prevent this.
Hehe, according to your problem i build a small XPage to test what i commented here is what i got:
<xp:panel id="refresh">
<xp:section id="section1" initClosed="false">
<xp:panel id="innerRefresh">Section content</xp:panel>
</xp:section>
</xp:panel>
<xp:button value="refresh inner div" id="button3">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="innerRefresh">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="refresh outer div" id="button4">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="refresh">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="refresh section" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="section1">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:button value="full refresh" id="button2">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler></xp:button>
By trying to refresh the sction in differen ways i saw nothing unusual if i pressed each button once or twice with about one secound in between, but if you press the button "refresh section" multiple times the section opens again. This effekt works in my IE8 and Firefox 19.0.2. I would recomend using a panel/div around your section and refresh it instead of the section direkt.
Update:
Try this, it creates up to 3 sections dynamical and each refreshable by its own button, and they will stay closed,
<xp:this.beforePageLoad><![CDATA[#{javascript:var sectioncount:java.util.Vector = #Explode("1,2,3",",");
viewScope.put("sectioncount",sectioncount);
viewScope.put("selectedSection", sectioncount)
}]]></xp:this.beforePageLoad>
<xp:checkBoxGroup id="checkBoxGroup1"
value="#{viewScope.selectedSection}">
<xp:this.defaultValue><![CDATA[#{javascript:return viewScope.get( "sectioncount" );}]]></xp:this.defaultValue>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:// full update //partial update}]]></xp:this.action>
</xp:eventHandler>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return viewScope.get( "sectioncount" );}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup>
<xp:repeat id="repeat2" rows="30" var="varcollection"
repeatControls="true">
<xp:this.value><![CDATA[#{javascript:return viewScope.get( "sectioncount" );}]]></xp:this.value>
<xp:panel>
<xp:this.rendered><![CDATA[#{javascript:var vec:java.util.Vector = viewScope.get( "selectedSection" );
return #IsMember(varcollection,vec);
}]]></xp:this.rendered>
<xp:button value="refresh this section:" id="button3">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="refresh">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:panel id="refresh">
<xp:section id="section1" initClosed="false">
<xp:panel id="innerRefresh">
<xp:text>
<xp:this.value><![CDATA[#{javascript:var date:java.util.Date = new java.util.Date;
return date.toTimeString()}]]></xp:this.value>
</xp:text></xp:panel>
</xp:section>
</xp:panel>
</xp:panel>
</xp:repeat>
I created a sample to demonstrate. I have a view called "testView" with three columns referencing "field1", "field2", "field3".
When I run this XPage all three columns in the display when it should not show the third column. Clicking the button does not hide the second column either.
Can anyone tell me what I have wrong?
<?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">
<xp:this.beforePageLoad><![CDATA[#{javascript:if ( sessionScope.showCol2 == null )
sessionScope.showCol2 = true;}]]></xp:this.beforePageLoad>
<xe:restService id="restService1">
<xe:this.service>
<xe:viewJsonService viewName="testView"
defaultColumns="true">
</xe:viewJsonService>
</xe:this.service>
</xe:restService>
<xp:panel style="margin-left:20.0px;margin-top:20.0px">
<xe:listView id="listView1" storeComponentId="restService1">
<xe:listViewColumn id="listViewColumn1" columnName="field1"
columnTitle="Field1">
</xe:listViewColumn>
<xe:listViewColumn id="listViewColumn2" columnName="field2"
columnTitle="Field2">
<xe:this.rendered><![CDATA[#{javascript:return sessionScope.showCol2;
}]]></xe:this.rendered></xe:listViewColumn>
<xe:listViewColumn id="listViewColumn3" columnName="field3"
columnTitle="Field3" rendered="false">
</xe:listViewColumn>
</xe:listView></xp:panel>
<xp:panel style="margin-top:20.0px;margin-left:20.0px">
<xp:button id="button1" value="Toggle Column 2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="listView1">
<xp:this.action><![CDATA[#{javascript:if ( sessionScope.showCol2 == false ) {
sessionScope.showCol2 = true;
}
else {
sessionScope.showCol2 = false;
}}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xp:panel></xp:view>
Looks like a bug in ExtLib. But you can hide the column in your code with hidden* property:
<xp:button id="button1" value="Toggle Column 2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="listView1">
<xp:this.action>
<![CDATA[#{javascript:
var cmp = getComponent('listViewColumn2');
if( cmp.isHidden() ){
cmp.setHidden(false);
}else{
cmp.setHidden(true);
}
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
*: the property is hidden too