I'm using an XPages Tabbed Panel for the first time. It's generally working well, but I have a lengthy process that runs the first time one tab is clicked on, so I would like to display a client-side busy dialog that we routinely use when it's switched to. I've tried to attach some client-side JS to the associated tabPanel's event handler (with submit="true"), but that doesn't seem to work. It executes the client-side JS, but doesn't switch tabs anymore. (I am returning true in the client-side event handler.) Is there another approach that might work? FYI, I was assuming that I could call view.postScript(...) at the end of my lengthy code in order to remove the busy dialog.
As usual with my questions, I can't post code to demonstrate this, sorry.
Thanks,
Reid
I use this post: http://xpagesera.blogspot.com/2012/05/add-ajax-loading-control-in-xpages-for.html
to great effect for this. Here is the text of the post:
Add AJAX “Loading..” control in XPages for Partial Updates
This is a two step process:
Add following Dojo modules to your XPage.
<xp:this.resources>
<xp:dojoModule name="extlib.dijit.ExtLib"></xp:dojoModule>
<xp:dojoModule name="extlib.dijit.Loading"></xp:dojoModule>
</xp:this.resources>
Add following lines to the EventHandler of your button/link which is going to be used for Partial Update:
<xp:this.onStart><![CDATA[XSP.startAjaxLoading()]]></xp:this.onStart>
That’s all !
A similar “Please wait..” dialog will appear and will display the page again once the Partial Update is complete..
Related
I have a Xpage that takes too long to load. So the client ask me to do a loading indicator.
I searched and found XSP.startAjaxLoading(), that I put in onClientLoad event of the Custom Control.
But now I don't know where should I put XSP.endAjaxLoading() to make the loading screen go away.
I'tried to use in afterRenderResponse and beforeRenderResponse: view.postScript("XSP.endAjaxLoading()"), since this comand is CSJS, but it doesn't work.
Thanks in advance.
I think you want to put it in the onComplete event. That can be difficult to find. You typically need to use the outline control to find it.
I have a video demo on NotesIn9 that has an example on this.
http://www.notesin9.com/2016/02/19/notesin9-188-adding-a-please-wait-to-xpages/?unique=http%3A//www.notesin9.com/2016/02/19/notesin9-188-adding-a-please-wait-to-xpages/
Your attempt (view.postscript) works only with full/partial updates and does not work for page loading.
You have used onClientLoad - which is executed when your page is finished with loading. I guess you get ajax animation after a while and it won't stop.
You should make preload screen - very simple XPage which starts animation and does not care to turn it off. In onClientLoad event redirect to your slow XPage. That will discard the animation.
I'd highly recommend using the Standby Dialog XSnippet https://openntf.org/XSnippets.nsf/snippet.xsp?id=standby-dialog-custom-control. I use it as a standard in all XPages applications.
I used this answer as solution: https://stackoverflow.com/a/35481981/5339322
I've saw it a few days ago, what made me think twice is that using this i should know what is doing my XPages to delay. I ran some tests and discovered what, and it was a call to a method in the afterRestoreView event, then I migrated it to onClientLoad event and used the solution in the answer above cited.
But I'm afraid that I have to keep an eye on it, so if someone adds some code that delays in one of the another events of XPages I have to move it again, of course, if it's possible, if it's not, I'll figure it out something diferent.
Thanks for all the answers ans comments.
has anyone got an example of using tabbedPanel in a formTable ?
my form has alot of fields, I'm new to Xpages so just looking for a best practice.
thanks
I have a working example of the opposite - a tabbedPanel, each with a formTable inside with validation, and it works well when there are a lot of fields. Keep in mind that if you use the SSJS validation, whenever you click any tab, the current tab's validation will be triggered.
You can try a dojo tabContainer, with formTables inside, too, where if you switch tabs, no validation will be triggered. You may get js errors, if you set the focus to a field which is in a different tab. I'm not using a dojo tabContainer, because this project is for IE7 and I find it's very slow for this browser.
I'm XPage-ing a form in a big classic notes application, and I'm struggling to find a way to end the interaction with the form that presents a good UI. Here's my scenario:
1) Parent document (classic notes) is opened from a view
2) Button on parent document opens child document in XPiNC using notes:/// link.
3) Cancel button on child document XPage......
I've tried the following approaches:
a) Use window.close()
I've done lots of googling on this one, and various approaches don't seem to work for me. window.close() is supposed to work if you call it from a window that was opened with window.open, so I tried window.open("closeMe.xsp", "_self") to see if this would give me a window that could be closed by an xpage with window.close() in the onClientLoad client side event. No luck there. The following questions make suggestions but don't provide a solution (apart from a third party product)
How do I close my window in Xpage?
How to close xpages in notes client? I use CSJS window.close but it's not working
b) Redirect to parent document
My next idea was to redirect to the parent document - it's already open in the Notes client. However, I found that when I redirect (using facesContext.getExternalContext().redirect("Notes:///url" ) it does indeed jump to the parent document, but it leaves a blank window open in the tab where the XPage was.
My next try was to close the parent in the original calling LotusScript, then redirect to the parent in the cancel button. This works too - you get to the parent document, but then if you press the escape key or close the tab with the parent document, it leaves you with an empty window again.
Any ideas? I like the idea of being able to return to the newly-opened parent document because I could expect an embedded view to be refreshed with my new child document, but at the moment I'll take anything that works. :)
Cheers,
Brendan
You are stuck between a rock and a hard place. XPiNC and classic Notes don't mix that easily. But there is hope. Head over to the Composite Application Wiki. There you will find that you can open a composite instead of a document which allows you to have tabs and stuff inside a composite.
It is also the way a classic application and a XPages (publish/subscribe using the property broker) can exchange data. Make sure you read the comments too. Karsten has good further links.
I don't have a working example for what you exactly want to do, but Composite feels like the best bet you have.
I found a partial solution, Java is your friend. It works in a button should work in a link too. The only problem is when called from an event like onClose the current xpage looses focus and the current pages stays open. I tried to emulate send keys and it presses the ESC key. It works fine from a button in.
Button on CLick event
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var robot:java.awt.Robot= new java.awt.Robot;var event:java.awt.event.KeyEvent=java.awt.event.KeyEvent;
robot.keyPress(event.VK_ESCAPE);
robot.keyRelease(event.VK_ESCAPE);
enter code here}]]>
</xp:eventHandler>
</xp:button>
In my web application currently there are many pop up windows made by various JS function which i would like to replace with Rich:ModalPanel (I'm using Myfaces 2.0.12 and RichFaces 3.3.3). Below is a typical example i like to replace:
window.open("<%=basePath1%>jsp/custhistory.faces?userid="+pk);
where pk is the value retried from a hidden input such as <h:inputHidden id="userPk" value="#{1234}"/> inside the javascript function and then added to the end of the url above.
Looking at few RichFaces ModalPanel examples (and demos) i can't figure out how i can make the above work using ModalPanel. Can someone please provide an example or a link to a resource o
I have been using Richfaces 4, but the same theory should apply.
The modal panel is essentially a div that can be shown or hidden, so you could add a <ui:include> in there if you specifically need (or want) the panel to be a seperate file.
The modal panel is rendered as part of your page, but is styled as display:none I believe. If this is triggered by a client action you can call the Richfaces API to show the panel on command.
For instance instead of a command(Link|Button) triggering Richfaces.$('elName').show() it could trigger your js function which sets and values/params your modal panel needs and then call .show() itself.
Note: IE and firefox had a truly modal popup. This is not truly modal and javascript will process in the background, and if you do not give focus to the popup panel if the user types it will interact with the application in the background.
I had used a modal js popup to prompt a user with a yes/no question int his type of idiom
if(askUser("some question?")=='yes'){
//some code to do if yes
}else{
//some code to do if no
}
Depending on how generic you want this popup, that is not really possible without using an event that is fired and defining an event handler for that event to handle the rest of the function.
Actually, I want to store some data in background page and the popup page just show that part of data say Data as a div element created in background page document.createElement("div"). Here, the background page will register some listeners to the tab update and change the Data elements accordingly. What the popup will do is to get that Data and appendit use the document.appendChild(Data).
(The purpose I intend is this will cause the popup changes immediately while the tab updage is triggered.)
However, the elements are shown as usual, what I am facing very headache is I have registered the onclick for the div object in backgroundpage as onclick="chrome.extension.getBackgroundPage().somefunc()". However, the first time, all the click will triger the right behavior but after the popup loses foucs and get focus again, all the click won't work.
I try to put something like change the onclick="somefunc()" and leave the func within the script of popup page. And there I want to log whether it is called by console.log("clicked"). Here, something unbelievable happens, the function is succefully trigerred BUT the console is null here, I cannot even call chrome.extension.getBackgroundPage() as well.
Here are a list of questions, maybe very hard to express for me...
1. Whether I can reuse the DOM element from the background page to the popup page directly by appendChild(chrome.extension.getBackgroundPage().getElementById()?
2.Will the onclick event registered in the background page still work in the popup pages?
3. What's the problem with the problem I am encountering? I have tried many ways to find out the reason but all in vain at last...
Best Regards,
If you need any more information, please let me know.
(PS: I am wonderning if it is called something like the event propogation, however, I am not an expert in this two pages communicating...)