I have a tabbed panel on my xpage and what I want to achieve is If user switches tab then current tab data should be saved for that I have written code on onClick of tabPanel, but this stops any further server-side code to run.
Sample code:
<xp:tabbedPanel id="tabbedPanel1">
<xp:tabPanel label="Tab1" id="tabPanel1">
<xp:label id="label1" value="Good Morning"></xp:label>
</xp:tabPanel>
<xp:tabPanel label="Tab2" id="tabPanel2">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:print("Click on Tab2");}]>
</xp:this.action>
</xp:eventHandler>
<xp:label id="label2" value="Good Afternoon"></xp:label>
</xp:tabPanel>
<xp:tabPanel label="Tab3" id="tabPanel3">
<xp:label id="label3" value="Good Evening"></xp:label>
</xp:tabPanel>
</xp:tabbedPanel>
Problem: After clicking on tabPanel2 (which has onClick event code) server side stops responding and even tab switch stops.
Thanks.
I know this a bit wired solution but try, invoking the save from ClientSide using the jsonRpcService.
So you can add one function to every tap onClick event on client side wich will not block the ServerSide tabbing funktions.
<xp:text value="#{viewScope.save}"></xp:text>
<xp:tabbedPanel id="tabbedPanel1" selectedTab="tabPanel1">
<xp:tabPanel label="Tab1" id="tabPanel1"
onclick="saveDokumentHelper.save();">
<xp:label id="label1" value="Good Morning"></xp:label>
</xp:tabPanel>
<xp:tabPanel label="Tab2" id="tabPanel2"
onclick="saveDokumentHelper.save();">
<xp:label id="label2" value="Good Afternoon"></xp:label>
</xp:tabPanel>
<xp:tabPanel label="Tab3" id="tabPanel3"
onclick="saveDokumentHelper.save();">
<xp:label id="label3" value="Good Evening"></xp:label>
</xp:tabPanel>
</xp:tabbedPanel>
<xe:jsonRpcService id="jsonRpcService1"
serviceName="saveDokumentHelper" state="true">
<xe:this.methods>
<xe:remoteMethod name="save">
<xe:this.script><![CDATA[currentDocument.save();
viewScope.put("save","saved");]]></xe:this.script>
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
Remember its just a possibility that came to my mind it may have some problems. I have only tested it with the viewScope variable and it works. I have not tested it with the Document.save methode yet.
Related
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()})
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
With your help, I did create an Xpage with FTsearch & export into Excel features. The problem is the search being made based on multiple input fields ( let say > 10 ) the xpage is heavy texted + considering the fact there is also a view panel where I list the search results once the Search button is clicked.
This is the main reason I've tried to create ( after the link to Search&Export is clicked ) some pop-up dialog ( which contains an xpage, I guess ) and this pop-up dialog to contain all my input fields + the 2 buttons already created: search & export. So, after I press the Search button from my pop-up => the pop-up dialog is closed and the search results are displayed in the view panel, same thing for the Excel button: pop-up is closed and I open the excel file.
Currently, when I click the link to Search&Export I 'see' all the input panel for the search ( all the input fields + the two buttons ) and of course the view panel. It does work but I think a pop-up dialog will be more user-friendly and it will give more space for the xpage.
What I want to do: move all the inputs fields + the search and export to excel buttons into a dialog, which should appear when the link is clicked.
How to create a dialog which opens when a link is clicked and contains this panel below ( where all the input fields and button for the FTsearch are contained there )
My code for the panel which contains the input fields and the search & export button:
<xp:panel style="background-color:rgb(242,242,242);border-color:rgb(168,168,168);border-width:thin;border-style:solid">
<xp:table><xp:tr><xp:td><xp:label value="Din" id="label3" style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
</xp:label></xp:td>
<xp:td><xp:inputText id="inputText1" value="#{sessionScope.searchDate1}">
// some extra code
</xp:label></xp:td>
<xp:td></xp:td>
<xp:td>
<xp:inputText id="inputText2" value="#{sessionScope.searchDate2}">
// some extra code
</xp:inputText></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label value="Author" id="label1"
style="font-size:8pt;font-family:Verdana;color:rgb(128,0,0)">
</xp:label>
</xp:td>
<xp:td>
<xp:inputText id="searchAutor"
value="#{sessionScope.searchAutor}">
</xp:inputText>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td style="font-family:Verdana;font-size:8pt">
<xp:label id="label2" value="Titlu carte"
style="color:rgb(128,0,0);font-size:8pt;font-family:Verdana">
</xp:label>
</xp:td>
<xp:td>
<xp:inputText id="searchTitlu"
value="#{sessionScope.searchTitlu}">
</xp:inputText>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:button value="Search" id="button6"
styleClass="lotusFormButton">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true"
id="eventHandler1">
</xp:eventHandler>
</xp:button>
</xp:td>
<xp:td>
<xp:text escape="true" id="computedField1"
rendered="false">
<xp:this.value><![CDATA[#{javascript:return "Query = " + sessionScope.queryString}]]></xp:this.value>
</xp:text>
</xp:td>
<xp:td></xp:td>
<xp:td>
<xp:button value="Export" id="button1"
styleClass="lotusFormButton" style="float:right;">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true"
id="eventHandler2">
<xp:this.action>
<xp:openPage
name="/export_hidden.xsp">
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:button></xp:td>
</xp:tr>
</xp:table></xp:panel>
I appreciate your time.
Here's an example of a dialog where you can add your fields to:
<xe:dialog id="exampleDialog" title="Example dialog">
<xp:div styleClass="lotusDialogContent">
<!-- Add your table here -->
</xp:div>
<div class="lotusDialogFooter">
<!--
add your buttons here
-->
<!-- example cancel link -->
<xp:link id="link1" text="Cancel" styleClass="lotusAction">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.closeDialog('#{id:exampleDialog}')]]></xp:this.script>
</xp:eventHandler>
</xp:link>
</div>
</xe:dialog>
You open the dialog using server-side JS like this:
getComponent("exampleDialog").show();
Or like this using client-side JS:
XSP.openDialog("#{id:exampleDialog}")
You can also style the content and button bar area entirely using extension library. Your dialog would then look like this:
<xe:dialog id="exampleDialog">
<xe:dialogContent id="dialogContent1">
<!-- content here -->
</xe:dialogContent>
<xe:dialogButtonBar id="dialogButtonBar1">
<!-- buttons here -->
</xe:dialogButtonBar>
</xe:dialog>
Here's an example of a button that you can use inside the dialog to close the dialog and refresh the viewpanel on the same XPage (assuming the viewpanel is called "viewpanel1"):
<xp:button value="Search" id="searchButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" immediate="false" save="false" refreshId="viewpanel1">
<xp:this.action><![CDATA[#{javascript:
getComponent('exampleDialog').hide()
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
You can use XSP.addOnLoad() to open the dialog once the page is loaded. Add this to your XPage:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
XSP.addOnLoad(function(){
XSP.openDialog("#{id:exampleDialog}")
});
]]></xp:this.value>
</xp:scriptBlock>
My Xpage has five sections for workflow. Section 1 submit button works fine.
For second section submit button I'm calling xe:dialog box (using ssjs) to get some user inupt and it does open the xe:dialog box. But original document is now in read mode and submit button is not visible
If I remove the section 1, the section 2 button open dialog and does not change the document mode of original document.
Here is a sample code of xpage with dialog box and button.
<?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"
dojoTheme="true"
dojoParseOnLoad="true">
<xp:this.resources>
<xp:dojoModule
name="dijit.Dialog"></xp:dojoModule>
<xp:dojoModule
name="dijit.form.Button"></xp:dojoModule>
<xp:dojoModule
name="dijit.form.TextBox"></xp:dojoModule>
</xp:this.resources>
<xp:br></xp:br>
<xp:this.data>
<xp:dominoDocument
var="document1"
formName="MetalWorking">
</xp:dominoDocument>
</xp:this.data>
<xp:panel>
<xp:panel>
<xp:button
value="Lab Man Approval"
id="button4">
<xp:this.rendered><![CDATA[#{javascript:document1.isEditable() & (document1.getItemValueDate("Section1DateCompleted")!=null) & (document1.getItemValueDate("Section2DateCompleted") == null)
}]]></xp:this.rendered>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
immediate="false"
save="true">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:var d=getComponent('dialog2');
d.show();}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xe:dialog
id="dialog2">
<xp:panel
style="background-color:rgb(226,226,226)">
<xp:table>
<xp:tr>
<xp:td>
<xp:label
value="Response"
id="responseArea_Label1"
for="responseArea1">
</xp:label>
</xp:td>
<xp:td>
<xp:inputText
id="responseArea1">
</xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
</xe:dialog>
</xp:panel>
</xp:panel>
<xp:table>
<xp:tr>
<xp:td>
<xp:label
value="Doc history:"
id="docHistory_Label1"
for="docHistory1">
</xp:label>
</xp:td>
<xp:td>
<xp:inputText
value="#{document1.DocHistory}"
id="docHistory1">
</xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xp:view>
Are you sure thats because of the "document1.isEditable()" and not because of all the other parts in your if your statement?
if i change your rendering code just like that
<xp:this.rendered><![CDATA[#{javascript: document1.isEditable() }]]></xp:this.rendered>
the button is pretty much visible.
I have a simple page inside mobile controls. I have an edit box and what I want to happen is to a partial refresh of the current in the onChange event of the edit control. Basically type something in the edit control - hit enter and do the partial refresh.
What's happening is hitting enter if returning the page to the main menu. If I put a value in and hit TAB then it works as I would want.
I'm starting a new app from scratch. But I've done this concept many times with an app in production. I can't find anything special in the code that would "trap" an enter button... So I'm at a loss why I can't get the behavior I want this time around.
Here's a video demo of the problem:
http://traffic.libsyn.com/notesin9/SO-Question2-HB.mp4
Below is the full code.
Thanks for any 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"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css">
</xp:styleSheet>
<xp:styleSheet href="/mobile.css"></xp:styleSheet>
</xp:this.resources>
<xe:singlePageApp id="singlePageApp1"
selectedPageName="mainMenu">
<xe:djxmHeading id="djxmHeading1" label="My App"></xe:djxmHeading>
<xe:appPage id="mainMenuID" pageName="mainMenu">
<xe:djxmRoundRectList id="djxmRoundRectList1"
title="Main Menu">
<xe:djxmLineItem id="djxmLineItem9" moveTo="#container"
label="Test Page">
</xe:djxmLineItem>
</xe:djxmRoundRectList>
</xe:appPage>
<xe:appPage id="containerID" pageName="container"
resetContent="true">
<xe:djxmHeading id="djxmHeading5" label="My Page"
back="Main Menu">
</xe:djxmHeading>
<xe:djxmRoundRectList id="djxmRoundRectList2">
<xp:panel id="mainPanel">
<xp:table style="width:100.0%">
<xp:tr>
<xp:td style="width:50%"></xp:td>
<xp:td>Details</xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:inputText id="inputText1" styleClass="target alignVMiddle"
value="#{sessionScope.myValue}">
<xp:this.attrs>
<xp:attr name="autocorrect" value="off"></xp:attr>
<xp:attr name="placeholder" value="Tap to Scan...">
</xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:viewScope.put("test", "test");}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
</xp:td>
<xp:td></xp:td>
</xp:tr>
</xp:table>
<xp:br></xp:br>
Current Value:
<xp:text escape="true" id="computedField1" value="#{sessionScope.myValue}"></xp:text>
<xp:br></xp:br>
<xp:br></xp:br>
Current Time:
<xp:text escape="true" id="computedField2" value="#{javascript:#Now();}">
<xp:this.converter>
<xp:convertDateTime type="time"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
</xp:panel>
</xe:djxmRoundRectList>
</xe:appPage>
</xe:singlePageApp>
</xp:view>
Can you do something like this to force a partial refresh on Enter?
<xp:inputText id="inputText1" value="#{sessionScope.myValue}">
<xp:eventHandler event="onkeypress" submit="true" refreshMode="partial" refreshId="something">
<xp:this.script><![CDATA[//partial refresh on Enter
if( thisEvent.keyCode === dojo.keys.ENTER ){
dojo.stopEvent( thisEvent );
} else {
return false;
}
]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
I think the problem is that enter will try to do a submit and submit will return you to the first page. Try to add a check in onkeyup or down for charcode 13 and if this is found return false.
You might also need to do a stopproprigate or something like that.
Google for enter key submit form
From my mobile ;-)
Or perhaps this post. http://tinyurl.com/bsgy9g6