xpages link in new tab ignoring validations - xpages

I have the following link on my footer layout:
<xp:link escape="true" id="link1" text="Click me" target="_blank">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:facesContext.getExternalContext().redirect("http://www.example.com")}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
The main layout contains some required fields. If I click the link I will get the message: "That field is required!" and so on. But, if I click the link in my main page ( which is something like a home page ) , the URL redirects me to the respective site, but on the same tab. Is target="_blank" ignored?
How can I achieve this considering I want when clicking on link the validations to be ignored and the url to be opened on new tab?

The issue is that you are using server-side logic to determine the target/URL to load. Your client-side properties are therefore ignored.
Do this instead:
<xp:link escape="true" id="link1" text="Click me" target="_blank" value="http://www.example.com">
</xp:link>
You also calculate the URL in advance:
<xp:link escape="true" id="link1" text="Click me" target="_blank" value="http://www.example.com">
<xp:this.value><![CDATA[#{javascript:
if (something) {
return "http://example.org";
} else {
return "http://example.com";
}
}]]></xp:this.value>
</xp:link>

Related

Xpages: Hide/Show div based on radio button values

I am binding all of my components to a java source. One field is a radio button, and if the user selects "Other" as a value, then I must show an field labeled "Other" for the user to fill in.
I cannot use SJSS to get the value of the radio button as it doesn't exist yet. But then how do I found out what the user selected? In the change event should I set a viewScope var and refresh the secondary area and check for the value of the viewScope var?
<xc:cc_CommonFormField
id="cc_CommonFormField14"
label="Savings"
placeholder="">
<xp:this.facets>
<xp:radioGroup
xp:key="field"
id="radioGroup1"
value="#{doc.prjSav}">
<xp:selectItem
itemLabel="Financial"
itemValue="Financial">
</xp:selectItem>
<xp:selectItem
itemLabel="Safety"
itemValue="Safety">
</xp:selectItem>
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="partial" refreshId="refresh1">
</xp:eventHandler>
</xp:radioGroup>
</xp:this.facets>
<div id = "refresh1">
<div id = "innerRefresh"
rendered="#{javascript:what to put here}">
</xc:cc_CommonFormField>
<xc:cc_CommonFormField placeholder="Enter Other Reason...">
<xp:this.facets>
<xp:inputText
id="inputText3"
xp:key="field"
value="#{doc.prjOther}">
</xp:inputText>
</xp:this.facets>
</xc:cc_CommonFormField>
</div>
</div>
Here is the code that is correct:
<xc:cc_CommonFormField
id="cc_CommonFormField14"
label="Savings and/or Revenue From the Project"
placeholder="">
<xp:this.facets>
<xp:radioGroup
xp:key="field"
id="radioGroup1"
value="#{doc.prjSav}">
<xp:selectItem
itemLabel="Financial"
itemValue="Financial">
</xp:selectItem>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="norefresh">
<xp:this.script><![CDATA[var result=null;
for(var i=0; i<document.forms[0].elements.length; i++){
if(document.forms[0].elements[i].name=="#{id:radioGroup1}" ){
if(document.forms[0].elements[i].checked == true){
result=document.forms[0].elements[i].value;
break; //remove this if for check box groups and collect multiple values above instead
}}}
var sel = x$("#{id:innerRefresh}");
if (result == "Other")
{
x$("#{id:innerRefresh}").removeClass("scoHidden");
x$("#{id:innerRefresh}").addClass("scoVisible");
}
else
{
x$("#{id:innerRefresh}").removeClass("scoVisible")
x$("#{id:innerRefresh}").addClass("scoHidden");
}
XSP.partialRefreshGet("#{id:innerRefresh}")]]></xp:this.script>
</xp:eventHandler></xp:radioGroup>
</xp:this.facets>
</xc:cc_CommonFormField>
<div id="refresh1">
<xp:div id="innerRefresh" styleClass="scoHidden">
<xc:cc_CommonFormField placeholder="Enter Other Reason...">
<xp:this.facets>
<xp:inputText
id="inputText3"
xp:key="field"
value="#{doc.prjOther}">
</xp:inputText>
</xp:this.facets>
</xc:cc_CommonFormField>
There are 2 approaches to solve this:
- server side rendering using SSJS
- client side rendering using JS
When you opt for the former, you have to submit your data (partial including the hidden div) to recompute your rendered property.
Client side: you render the div in any case, but give it a class attribute that maps to CSS display:none.
In your client side JS you add an onChange handler to the radio buttons and change the class to something visible (and back if others are unselected). This saves you from a server round trip.
Only caveat: (best handled in your Java) you need to dismiss an eventually entered value in the field for other if other wasn't selected.

How do I refresh a repeat that is updated using a dialog

I'm having a problem getting a repeat to refresh when the underlying value is changed using a dialog.
This is the div that contains the repeat:
<xp:div style="display:none;">
<xp:inputText id="linkages" value="#{procureDoc.Linkages}" multipleTrim="true" style="color:cornflowerblue;" multipleSeparator=";">
</xp:inputText>
</xp:div>
<xp:label value="Linkages:" id="linkageLabel" style="font-weight:bold;"></xp:label>
<xp:div id="linkageDiv">
<ul>
<xp:repeat id="linkagesDisplayRepeat" rows="30" var="rowData" indexVar="index" value="#{procureDoc.Linkages}">
<li>
<xp:text escape="true" id="computedField7">
<xp:this.value><![CDATA[#{javascript:rowData;}]]></xp:this.value>
</xp:text>
</li>
</xp:repeat>
</ul>
</xp:div>
Here's the save button from the dialog. It does happen to sit in another custom control, but I don't think that's the problem.
<xp:button value="Save" id="saveButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.script><![CDATA[var linkageSelection = document.getElementById("#{id:linkageComboBox}").value;
var linkageUpload = "";
if (linkageSelection == "Use Category") {
linkageUpload = document.getElementById("#{id:linkageCategoryComboBox}").value;
}
else { linkageUpload = linkageSelection;}
var currentLinkages = document.getElementById("#{id:linkages}").value;
if ( currentLinkages == "" ) {
document.getElementById("#{id:linkages}").value = linkageUpload;
} else {
document.getElementById("#{id:linkages}").value = document.getElementById("#{id:linkages}").value + ";" + linkageUpload;
}
XSP.closeDialog('#{id:linkageDialog}');]]></xp:this.script>
</xp:eventHandler>
</xp:button>
I can put a button on the XPage that just refreshes and it will refresh my repeat with the value selected in the dialog, but just using my save button doesn't do it.
I'm sure I'm missing something simple, but I just can't see it.
You could use the onComplete event from your SSJS eventhandler to call a CSJS script like
XSP.partialRefreshGet("#{id:linkagesDisplayRepeat}");
to refresh the repeat control.
There's a second parameter to the client-side closeDialog() method, denoting the ID of the component to partially refresh. That basically adds the onComplete for you.
SSJS corresponding method uses the ID of the component to subsequently refresh as the only parameter (obviously the method is called on the component being closed, which is the first parameter in CSJS).

Xpages - popupmenu control inside a Details facet on DataView control

I want to place a drop down of actions under a panel inside Details facet on a dataview control. Eventhough it shows up, it does not show the drop down on clicking. Could anyone help solving it?
Here is my code:
<xp:table>
<xp:tr>
<xp:td><xe:popupMenu id="popacts">
<xe:this.treeNodes>
<xe:basicLeafNode label="Assign To Tester"></xe:basicLeafNode>
<xe:basicLeafNode label="Assign to Developer"></xe:basicLeafNode>
</xe:this.treeNodes>
</xe:popupMenu><xp:link escape="true" id="link1" loaded="true" text="Actions">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script>
<![CDATA[XSP.OpenMenu(thisEvent,#javascript:getComponent('popacts').getMenuCtor()})]]>
</xp:this.script>
</xp:eventHandler>
</xp:link>
</xp:td>
</xp:tr></xp:table>
Thanks in advance
It should be openMenu , not OpenMenu
This will work
XSP.openMenu(thisEvent,#{javascript:getComponent('popacts').getMenuCtor()})

My dialog control does not update my xpage

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

No luck while opening a link in new tab using XPages

I am working on application and I got stuck when I wanted to open a link on new tab or window.
I am using Lotus Notes Designer Release 8.5.2FP1.
I have attached my piece of code.
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try{
var doc = database.getProfileDocument("frmConfiguration","");
var url = doc.getItemValueString("HeaderLink1URL");
view.postScript("var tempwindow =window.open('" +url+"','_blank');tempwindow.focus();");
}catch(e){
}}]]></xp:this.action>
Based on your updated code in comment you can simply add target="_blank" and instead of using the onClick event use the value attribute which would point to the URL to be opened. So your code would be something like this:
<xp:link escape="false" id="link1" target="_blank">
<xp:this.text>some code</xp:this.text>
<xp:this.value><![CDATA[#{javascript:var doc = database.getProfileDocument("frmConfiguration","");
var href = doc.getItemValueString("HeaderLink1URL");
return href;}]]></xp:this.value>
</xp:link>
The simpliest way to do this would be something like:
<xp:text escape="false" id="newTab"><xp:this.value><![CDATA[#{javascript:return "Google";}]]></xp:this.value></xp:text>
This will open google in a addtional tab.
Update:
If you want to use a xp:link you could try:
<xp:link escape="false" id="newTab" text="test">
<xp:this.onclick><![CDATA[var ret = window.open("http://www.google.com",'_blank');
]]></xp:this.onclick>
</xp:link>
If you want to open the link in a seperate window or tab i recomend dont use the aktion use the onclick client side event in the option tab.
Here is some sample code of opening a URL both client side and server side.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:button value="Client Side Open Button." id="ClientSideButton">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[var href = "http://www.ibm.com";
var tempwindow = window.open(href,'_blank');
tempwindow.focus();
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:button id="serverSideButton" value="Server Side Open Button ">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var href = "http://www.ibm.com";
view.postScript("var tempwindow = window.open('" + href + "','_blank'); tempwindow.focus();");
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:view>
If this code does not work as expected, two things to check.
Check that the url variable is being set correctly.
Make sure you are on the latest release. window.open() didn't work as expected until 8.5.1FP2.

Resources