Set field focus after validation in dialog (Extension Library Dialog) - xpages

I have the following dialog, the password field focus is set when the dialog has focus but this only works when first loaded, I want to set the password field focus when the passwords don't match (i.e. after clicking the OK button and running the SSJS).
<xe:dialog id="dialogConfirmPassword" title="Confirm Your Password">
<xe:dialogContent id="dialogConfirmPasswordContent">
<xp:messages id="messagesConfirmPassword" layout="table" />
<xp:table style="width:100%" id="tableConfirmPassword">
<xp:tr>
<xp:td>
<xp:label value="Password" id="lblPassword"
for="confirmPassword" />
</xp:td>
<xp:td>
<xp:inputText id="confirmPassword"
password="true">
</xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xe:dialogContent>
<xe:dialogButtonBar id="dialogButtonBarConfirmPassword">
<xp:button value="OK" id="btnConfirmPasswordOk">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:try{
var confirmPassword:String = getComponent("confirmPassword").getValueAsString();
if (session.verifyPassword(confirmPassword, HTTPPassword)){
/* RUNS NOTES AGENT */
getComponent('dialogConfirmPassword').hide();
return true;
} else {
facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("You have entered an incorrect password, please try again.") );
/* WANT TO SET FOCUS FOR PASSWORD FIELD */
return false;
}
} catch (e) {
facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("ERROR! " + e.toString()) )
return false;
}}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xe:dialogButtonBar>
<xp:eventHandler event="onFocus" submit="false">
<xe:this.script><![CDATA[dijit.byId("dialogConfirmPassword").focus();]]></xe:this.script>
</xp:eventHandler>
</xe:dialog>
Can I set the password field focus after setting the facesContext.addMessage or another way?
Update: The following output script worked:
<xp:scriptBlock id="scriptBlockConfirmPassword">
<xp:this.value><![CDATA[#{javascript: if(viewScope.PWDSuccess === null) {
return "";
};
var result = "dojo.byId(\"";
result += getComponent("confirmPassword").getClientId(facesContext);
result += "\").focus();";
return result;}]]></xp:this.value>
</xp:scriptBlock>

A few pointers:
Don't go after components like getComponent("confirmPassword") but bind your component to a scope variable, makes better code
You can't directly run a Client JavaScript action in your SSJS (where you indicated)
Your event handler never works since the XPages ID is different from the clientside ID
A outputscript probably can solve your challenge
So modify your code (only essentials here):
<xp:inputText id="confirmPassword" password="true" value="#{viewScope.confirmPWD}">
</xp:inputText>
<xp:button value="OK" id="btnConfirmPasswordOk">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:try{
viewScope.PWDSuccess = session.verifyPassword(viewScope.confirmPWD, HTTPPassword);
if (viewScope.PWDSuccess){
/* RUNS NOTES AGENT */
getComponent('dialogConfirmPassword').hide();
} else {
facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("You have entered an incorrect password, please try again.") );
}
} catch (e) {
facesContext.addMessage("messagesConfirmPassword", new javax.faces.application.FacesMessage("ERROR! " + e.toString()) );
viewScope.PWDSuccess = false;
}
return viewScope.PWDSuccess
}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:outputScript>
<this.value><!CDATA[#{javascript:if(viewScope.PWDSuccess) {return "";};
var result = "dijit.byId(\"";
result += getComponent("confirmPassword").getClientId();
result += "\").focus();";
return result;
}]]</this.value>
</xp:outputScript>
(Typed off my head - will contain errors).
Let us know how it goes.

Related

how to define a conditional xp:confirm?

I would like to use the xp:confirm action on a conditional status. Is there a way to compute the rendered property of this control?
I can compute the rendered property for the whole xp:eventHandler but not for an xp:actionGroup or xp:confirm.
xp:confirm just adds client-side JavaScript to the button with:
if (!XSP.confirm("YOUR MESSAGE")){
return false;
}
XSP.confirm() is an XPages wrapper for JavaScript confirm. The most flexible approach is to code the client-side JavaScript you want on the "Client" tab of the button, doing return false to prevent the button sending to the server as required.
This is a very synthetic snippet which you however can fit to your needs, if I got you right and if it suits your use case. Not so elegant, but works.
<xp:panel id="mainPanel">
<xp:button id="myBtn1"
value="Ask confirmation on submit">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="mainPanel">
<xp:this.action>
#{javascript:
requestScope.put('myAnyVar', 'askConfirmation');
}
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="myBtn2"
value="Dont ask confirmation on submit">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="mainPanel">
<xp:this.action>
#{javascript:
requestScope.put('myAnyVar','dontAskConfirmation');
}
</xp:this.action>
</xp:eventHandler>
</xp:button>
<input type="hidden" id="doConfirm"
value="#{requestScope.myAnyVar eq 'askConfirmation' ? '1' : '0'}">
</input>
</xp:panel>
<br />
<br />
<xp:button id="btnSubmit"
value="Submit">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.script>
var confirmOption = dojo.byId('doConfirm').value;
if (confirmOption === '1') {
if (confirm('Proceed the submit?')) {
return true;
} else {
return false;
}
} else {
return true;
}
</xp:this.script>
<xp:this.action>
#{javascript:
viewScope.smthSubmitted = new java.util.Date();
}
</xp:this.action>
</xp:eventHandler>
</xp:button>
<br />
<br />
<xp:text value="Submit time: #{viewScope.smthSubmitted}" />

XPages Dialog boxes stacking

I got the problem, that my dialog boxes are stacking each time I click the button that opens the dialog. So if I've clicked three times I get this:
I couldn't find out how to prevent this. No matter which button I click (OK does a partial refresh | Abbrechen (Cancel) does a full update) I get another box each time I click the button.
Code of the button that opens the dialog:
<xp:button value="Plan meeting" id="buttonPlanMeeting">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try {
var c = getComponent("dPlanMeeting")
c.show();
} catch(e) {
dBar.error(location + e);
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Code for the complete dialog box:
<xe:dialog id="dPlanMeeting" title="Plan meeting" keepComponents="true">
<xp:panel>
<xp:text escape="true" id="MBPlanMeeting">
<xp:this.value><![CDATA[#{javascript:specialstrings.getString("ccEsgDocWflContentEditInfos.dPlanMeeting.MBPlanMeeting")}]]></xp:this.value>
</xp:text>
</xp:panel>
<xe:dialogButtonBar>
<xp:button value="Ok" id="buttonDelegateOk" styleClass="lotusFormButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try {
//will create a meeting for every day the visit is registered
var wfDoc:NotesDocument = docApplication.getDocument(true);
specialMeetingCreate(wfDoc);
var c = getComponent("dPlanMeeting");
c.hide();
var c = getComponent("dMeetingCreated")
c.show();
} catch (e) {
dBar.error(location + e);
}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Cancel" id="buttonDelegateCancel" styleClass="lotusFormButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try {
var c = getComponent("dPlanMeeting");
c.hide();
} catch (e) {
dBar.error(location + e);
}
}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xe:dialogButtonBar>
</xe:dialog>
Does this have anything to do with keepComponents? I've tried true and false, but the effect stays the same.
Any idea?
Ok it seems that the solution was just to set "keepComponents = false". I've tried that before, but now it'S working. I get the dialog box only once no matter how often I click the button

Xpages cannot get getComponent to work in Ext:Dialog

I have an value picker in a dialog box. The user selects a value and that value is entered into an Edit Box, which is bound to a scope variable. So far so good.
I then have a button where I want to ask the access the value that is in the edit box.
I have tried using
var satLoc:String = viewScope.get("selLoc");
var satLoc:String = getComponent("selLoc").getValue();
neither of which works - I just get null.
My code is below. I would appreciate some help.
<?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:button id="button15" style="font-weight:bold;font-size:8pt" value="Load Satellite Dialog">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dialogAddSat">
<xp:this.action><![CDATA[#{javascript:var d = getComponent('dialogAddSat')d.show()}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xe:dialog id="dialogAddSat" style="width:300px">
<xe:this.title><![CDATA[#{javascript:"Make This Location A Hub"}]]></xe:this.title>
<xe:dialogButtonBar>
<xp:table id="tblCrd" style="width:99.0%">
<xp:tr>
<xp:td>
<xp:label id="label24" for="region" value="Hub Location Number" />
</xp:td>
<xp:td>
<xe:djTextBox id="djTextBox2"
style="width:35px;text-align:right">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="readOnly"
value="true">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
<xe:this.value><![CDATA[#{javascript:"0002"}]]></xe:this.value><xp:eventHandler event="onChange"
submit="true" refreshMode="partial" refreshId="tblCrd">
</xp:eventHandler>
</xe:djTextBox>
</xp:td>
<xp:td style="text-align:right">
<xp:button id="button13" value="Attach Satellite">
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete" id="eventHandler7"
disableValidators="true">
<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogMakeHub}');]]></xp:this.script>
<xp:this.action>
<xp:actionGroup>
<xp:confirm>
<xp:this.message><![CDATA[#{javascript:try {
var satLoc:String = viewScope.get("selLoc");
//var satLoc:String = getComponent("selLoc").getValue();
var hubLoc = "0002";
//var hubLoc:String = document1.getDocument().getItemValueString("locNum");
return "Make Location " + satLoc + " a Satellite for Location Number " + hubLoc
} catch(e){
return e;
}
}]]></xp:this.message>
</xp:confirm>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:print ("Here")}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label id="label25" for="region" value="Select Location..." />
</xp:td><xp:td>
<xp:inputText id="selLoc" value="#{viewScope.selLoc}"></xp:inputText>
<xe:valuePicker id="valuePicker77"
dialogTitle="Choose A Location To Add As A Satellite"
pickerIcon="/picker.png" for="selLoc">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:import xpUtilities
var tmpLocView:NotesView = database.getView("(DbLocsOperActiveLOnly)");
var arr = new Array();
var tmpLocNum:String;
var hubLocNum:String;
//hubLocNum = padToFour(document1.getDocument().getItemValueString("locNum"));
hubLocNum = "0002;"
//arr[0] = hublocNum
var tmpLocDoc:NotesDocument = tmpLocView.getFirstDocument();
while (tmpLocDoc != null) {
tmpLocNum = tmpLocDoc.getItemValueString("locNum");
if (tmpLocNum != hubLocNum)
{arr.push(tmpLocDoc.getItemValueString("locNum"));}
var tmpdoc = tmpLocView.getNextDocument(tmpLocDoc);
tmpLocDoc.recycle();
tmpLocDoc = tmpdoc;
}
return arr
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker></xp:td>
<xp:td style="text-align:right">
<xp:button value="Cancel" id="button10">
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete" id="eventHandler4">
<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogAddSat}')]]></xp:this.script>
</xp:eventHandler>
</xp:button></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
</xp:td>
<xp:td>
</xp:td>
<xp:td style="text-align:right">
</xp:td>
</xp:tr>
</xp:table>
</xe:dialogButtonBar>
</xe:dialog>
</xp:view>
I have found a solution. I had an action group with a Confirmation Action. I was trying to get the value in the confirmation action. For some reason, it doesn't work there. I just ignore it in the confirmation action and now it work.
The problem is about the timing. On the following code, you compute a confirmation text. But this is being computed at the server side, when it's being rendered. At the time of rendering, the viewScope variable is empty.
<xp:button
id="button13"
value="Attach Satellite">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
id="eventHandler7"
disableValidators="true">
<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogMakeHub}');]]></xp:this.script>
<xp:this.action>
<xp:actionGroup>
<xp:confirm>
<xp:this.message><![CDATA[#{javascript:try {
var satLoc:String = viewScope.get("selLoc");
//var satLoc:String = getComponent("selLoc").getValue();
var hubLoc = "0002";
//var hubLoc:String = document1.getDocument().getItemValueString("locNum");
return "Make Location " + satLoc + " a Satellite for Location Number " + hubLoc
} catch(e){
return e;
}}]]>
</xp:this.message>
</xp:confirm>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:print ("Here")}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
If you refresh the button component when the input value changes, it will show the correct value. However, I'd prefer computing the value of the confirmation on the client side, in the script attribute. Closing dialog should be the final action (if the user does not confirm the value, it shouldn't be closed. Here is the modified version.
<xp:button
id="button13"
value="Attach Satellite">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
id="eventHandler7"
onComplete="XSP.closeDialog('#{id:dialogAddSat}');"
disableValidators="true">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:print ("Here")}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
<xp:this.script><![CDATA[return confirm("Location will be set "+dojo.byId('#{id:selLoc}').value+". Confirm?")]]></xp:this.script>
</xp:eventHandler>
</xp:button>

Trying the Partial Refresh Optimizes by Sven Hasselbach

I set up a really simple little test page with this code:
<xp:panel id="panelAll">
<xp:panel rendered="#{javascript:(viewScope.vsPanelRed) ? true : false;}" style="background-color:rgb(255,0,0)">
Panel Red
</xp:panel>
<xp:panel
rendered="#{javascript:(viewScope.vsPanelRed) ? false : true;}"
style="background-color:rgb(0,255,0)">
Panel Green
</xp:panel>
</xp:panel>
<xp:br></xp:br>
<xp:panel id="panelMain">
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script>
<![CDATA[XSP.partialRefreshPost('#{id:panelAll}',{clearForm: true});]]>
</xp:this.script>
<xp:this.action><![CDATA[#{javascript:println( "in Click Button");
if (viewScope.vsPanelRed == true){
viewScope.vsPanelRed = false;
}else{
viewScope.vsPanelRed = true;
}
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel><!-- panelMain -->
the action toggles the viewScope vsPanelRed from true to false and displays either the red panel or the green on. If I use the conventional refreshMode="partial" refreshId="panelAll" on the eventHandler for the onclick the panel toggles if I use the partialResheshPost as the blog says (and I think I have it entered correctly the partial refresh does not happen infact the action to toggle the vsPanelRed does not happen either. So I must have something wrong in the ![CDATA ] but I can't figure out why.
What am I missing?
Sven Hasselbach did not include support for event handlers in his optimized partial refresh. I have extended his solution to include support for this - see my blog post "XPages: Optimized partial refreshes for event handlers".
If you include my optimized version as a xp:scriptBlock on your XPage then you need to change your button to this:
<xp:button value="Label" id="button1">
<xp:eventHandler id="submitEventHandler" event="onclick" submit="false">
<xp:this.script>
<![CDATA[
XSP.partialRefreshPost(
'#{id:panelAll}',
{clearForm: true, submitid: '#{id:submitEventHandler}'}
);
]]>
</xp:this.script>
<xp:this.action><![CDATA[#{javascript:
println( "in Click Button");
if (viewScope.vsPanelRed == true){
viewScope.vsPanelRed = false;
}else{
viewScope.vsPanelRed = true;
}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>

How to Save Values in Documents Edited In-line On Repeat Control

I have a repeat control on an xPage with a text field displayed directly in edit mode. When a user changes the value in the field, I need them to be able to either:
Select an icon directly beside the field to save the value in the document.
Make changes to this field in more than one document and click a button to save all of these changes to the appropriate documents saved simultaneously.
What I have so far is a method of capturing the unids of the documents whose editable field has been updated.
I cannot get either of these saves to work. I have listed below the portion of the code that controls these areas.
Here's the save all and sessionScope information
<xp:panel id="InlineEditContainer" xp:key="facetMiddle" style="width:100%">
<xp:this.data>
<xp:dominoView var="view1" viewName="vwMetricsByAssigned">
<xp:this.postOpenView><![CDATA[#{javascript:var myList = new java.util.ArrayList();
sessionScope.put("myList", myList);}]]></xp:this.postOpenView></xp:dominoView>
</xp:this.data>
<xp:button value="Submit All" id="button1">
<xp:eventHandler event= <"onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:// Getting list of unids from docs which have been updated, and saving those docs
var db:NotesDatabase
if(sessionScope.myList == null){
return;
}else{
for (var s in sessionScope.myList){
var doc:NotesDocument = (db ? db.getDocumentByUNID(s) : database.getDocumentByUNID(s));
if (doc && doc.isValid()) {
doc.save();
}
}
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xp:repeat id="repeat1" rows="30" value="#{sessionScope.myList}" var="listData">
<xp:text escape="true" id="computedField6"><xp:this.value><![CDATA[#{javascript:listData + " , "}]]></xp:this.value></xp:text></xp:repeat>
<xp:br></xp:br>
Here's all the repeat data
<xp:repeat id="repeat2" rows="20" var="FColl" indexVar="idx" value="#{javascript:view1}">
<xp:panel id="InlineEditContainer2">
<xp:this.data>
<xp:dominoDocument var="document1" formName="frmMetricData" action="editDocument" documentId="# {javascript:FColl.getNoteID();}" >
</xp:dominoDocument>
</xp:this.data>
<xp:tr>
<xp:td id="td1">
<xp:text escape="true" id="computedField3">
<xp:this.value> <![CDATA[#javascript:FColl.getDocument().getItemValueString("BusinessUnit")}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td id="td2">
<xp:link escape="true" id="link1" value="/MetricData.xsp">
<xp:this.text><![CDATA[#{javascript:FColl.getDocument().getItemValueString("MetricName")}]]> </xp:this.text>
<xp:eventHandler event="onclick" submit="true" refreshMode="norefresh" immediate="true">
<xp:this.action>
<xp:openPage name="/MetricData.xsp" target="editDocument" documentId="#{javascript:return FColl.getNoteID();}" />
</xp:this.action></xp:eventHandler>
</xp:link>
</xp:td>
<xp:td id="td3">
<xp:inputText id="EditBox3" value="#{document1.Actual}" tabindex="1">
<xp:this.defaultValue><![CDATA[# {javascript:FColl.getDocument().getItemValueString("Actual")}]]></xp:this.defaultValue>
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true" />
</xp:this.converter>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="repeat1">
<xp:this.action><![CDATA[#{javascript:// get the universalID of the document
var keyCode = FColl.getDocument().getUniversalID();
// Create an Array
var myArray = sessionScope.get("myList");
//If it's not already in the Array then add it.
if (!myArray.contains(keyCode)) {
myArray.add(keyCode);
}}]]></xp:this.action>
</xp:eventHandler></xp:inputText>
<xp:span>
<xp:image url="/.ibmxspres/domino/oneuiv2/images/iconConfirmation16.png" id="image1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:saveDocument var="document1" />
</xp:this.action>
</xp:eventHandler>
</xp:image>
</xp:span>
If anybody can give me any ideas to try, I would be very grateful.
Make it simple! There is a simple action "save". Comes in save and save all flavors. The later goes below the repeat and saves any changed document.

Resources