I would like to show the JavaScript Alert in my WKWebView. I have implemented the IWKUIDelegate and its methods RunJavaScriptAlertPanel, RunJavaScriptConfirmPanel. These gets called for a JavaScript Alert. I would like to know how to handle the buttons and action on those buttons.
Is there a way i can write a generic UIAlertView for all JavaScript Alerts. For example below i have added errorAlert.AddButton("OK"); but in reality i don't know number of buttons and button title. Also how to handle the completionHandler action
[Export ("webView:runJavaScriptConfirmPanelWithMessage:initiatedByFrame:completionHandler:")]
public void RunJavaScriptConfirmPanel (WKWebView webView, String message, WKFrameInfo frame, Action<bool> completionHandler)
{
Console.WriteLine ("RunJavaScriptConfirmPanel");
UIAlertView errorAlert = new UIAlertView();
errorAlert.Title = "Alert";
errorAlert.Message = message;
errorAlert.AddButton("OK");
errorAlert.Show();
}
I'm not sure where you're trying to handle the action, whether it is in javascript or with C# in the app, so I'll try to address both. The short answer is, let javascript handle it, and if need be, make a call back to the app from javascript once a selection has been made from the dialog.
Alert Example
public override void RunJavaScriptAlertPanel(WKWebView webView, string message, WKFrameInfo frame, Action completionHandler)
{
var alert = UIAlertController.Create("Alert", message, UIAlertControllerStyle.Alert);
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
//Let javascript handle the OK click by passing the completionHandler to the controller
ViewController.PresentViewController(alert, true, completionHandler);
}
Confirm Example
public override void RunJavaScriptConfirmPanel(WKWebView webView, string message, WKFrameInfo frame, Action<bool> completionHandler)
{
var alert = UIAlertController.Create("Please confirm", message, UIAlertControllerStyle.Alert);
//Let javascript handle the OK click by passing the completionHandler to the controller
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, action => completionHandler(true)));
//Let javascript handle the Cancel click by passing the completionHandler to the controller
alert.AddAction(UIAlertAction.Create("Cancel", UIAlertActionStyle.Cancel, action => completionHandler(false)));
ViewController.PresentViewController(alert, true, null);
}
Prompt Example
public override void RunJavaScriptTextInputPanel(WKWebView webView, string prompt, string defaultText, WKFrameInfo frame, Action<string> completionHandler)
{
var alert = UIAlertController.Create("Prompt", prompt, UIAlertControllerStyle.Alert);
alert.AddTextField(textfield => { textfield.Placeholder = defaultText; });
alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, action => completionHandler(alert.TextFields[0].Text)));
alert.AddAction(UIAlertAction.Create("Cancel", UIAlertActionStyle.Cancel, action => completionHandler(null)));
ViewController.PresentViewController(alert, true, null);
}
So that gives you an example of how to pass the button clicks back to javascript. If you want javascript to make a call back, you'll need to register script handlers by subclassing from WKScriptMessageHandler. There's a basic example here https://forums.xamarin.com/discussion/41777/wkwebview-caching-not-working
Just as a note, UIAlertView has been deprecated. You might want to start using UIAlertController instead. See https://stackoverflow.com/a/32690371/5606840. If you want access to the view controller to display the alerts, pass it into your WKUIDelegate class at initialization.
Edit
To expand on how to handle the results in javascript
alert('This is an alert');
The webview will pause the javascript thread and call RunJavaScriptAlertPanel. Once the OK button has been clicked, it will call back the completionHandler in the webview and the rest of the javascript code will execute.
if (confirm('Do you want to confirm this?')) {
//Do some code here when the user clicks ok
} else {
//Do other code here when the user clicks cancel
}
As with the alert example, when javascript comes across the confirm method, it will call RunJavaScriptConfirmPanel. You can then show the dialog with the text passed through the message, along with an OK and Cancel button. Depending on the button clicked, the method will push either a true or false back to the webview and allow the rest of the javascript code to execute via the completion handler.
Related
I'm using the built in Acumatica browser commands to insert a new shipment record by pressing a function key. The function Key triggers the command with px.searchFrame(window.top,"main")['px_alls'].ds.executeCommand("Insert"); For some reason, it triggers the insert command, but it doesn't shift the focus to the Shipment Nbr input field. Also, if you try to shift the focus manually using var field=px_alls["edShipmentNbr"]; field.focus(); that doesn't work either. I've been able to shift the focus to other fields, so I know the code is correct, but I can't figure out why the focus can't be shifted to the Shipment Nbr input. Any ideas on what else can be done? It's not just the Insert command either. Calling the Cancel command, which should shift the focus, doesn't work either.
What's strange is that the Insert command can be called by pressing Ctrl+Insert, and it works perfectly.
I built some code that shifts the focus to the ship date field and then tabs backwards 5 times, which emulates correctly what the insert command should do, but it only works intermittently on the client's computer.
Thanks
The Acumatica Framework provides built-in support for keyboard shortcuts via the following properties defined in PXButtonAttribute:
ShortcutShift = true/false : Determines Shift key presence
ShortcutCtrl = true/false : Determines Control key presence
ShortcutChar = ‘x’ : Determines shortcut character
Below is the sample to insert new Shipment when the user presses F2. Since the code snippet below utilizes capabilities of the framework, by pressing F2 the user executes the Insert command from the SOShipmentEntry BLC instead of simulating button click in JavaScript. This approach guarantees that all logic embedded into the Insert command, including setting focus to the Shipment Nbr input, is properly executed.
public class SOShipmentEntryExt : PXGraphExtension<SOShipmentEntry>
{
public class PXInsertShortCut<TNode> : PXInsert<TNode>
where TNode : class, IBqlTable, new()
{
public PXInsertShortCut(PXGraph graph, string name)
: base(graph, name)
{
}
public PXInsertShortCut(PXGraph graph, Delegate handler)
: base(graph, handler)
{
}
[PXUIField(DisplayName = ActionsMessages.Insert, MapEnableRights = PXCacheRights.Insert, MapViewRights = PXCacheRights.Insert)]
[PXInsertButton(ShortcutChar = (char)113)]
protected override IEnumerable Handler(PXAdapter adapter)
{
return base.Handler(adapter);
}
}
public PXInsertShortCut<SOShipment> Insert;
}
If you're executing a callback to the server in JavaScript, the callback return might set focus to another field after it finishes execution. Your focus() statement works but the callback return performs another focus() on a different control after yours.
Hooking the Ajax callback allows you to put your focus() statement after the Acumatica framework focus():
window.addEventListener('load', function () { px_callback.addHandler(ActionCallback); });
function ActionCallback(callbackContext) {
px_alls["edShipmentNbr"].focus();
};
I have the following code in a javascript file:
if(dojo.byId('WC_selectedColorNumber') == null && this.defaultColor != null)
{
dijit.byId('WC_color_selection').domNode.style.display = 'block';
dojo.html.set(dojo.query(".message__button .add"), "Add product with only base color " + this.defaultColor + "?");
var userResponse = true;
dojo.connect(WC_add_color_yes, "onclick", function(evt){
userResponse = true;
});
dojo.connect(WC_add_color_no, "onclick", function(evt){
userResponse = false;
});
//var userResponse = confirm("Add product with only base color " + this.defaultColor + "?");
//I WANT TO WAIT HERE FOR THE RESPONSE
if(userResponse == false) //if user clicks Cancel or 'no', display a message and leave the function.
{
alert("Remember to select a color before adding to cart."); //should be a tooltip/popup (not javascript alert) with the same message
return; //return so item doesn't get added to cart
}
}
Firstly, the logic behind this code is correct and it works perfectly well when using javascript confirm's.
As of now, everything comes up and displays correctly, and clicking the buttons perform the correct actions (if I put a console.log in the onclick dojo events, they do indeed print to the console when I click the buttons). However, the program doesn't wait for the responses and continues beyond the dojo.connect methods before it sees the user's input.
I need it to wait until either the yes or no button have been pressed, but I cannot figure out how to do it. I've tried using a
while(userResponse == null);
but a) it's generally a terrible idea and b) it didn't work anyways.
How can I make my code wait until the user has clicked one of the two buttons?
If you can make a jsfiddle I'd be able to help you more, I think, but your dojo.connect calls shouldn't be inside a logic flow like this. Instead, set up your connects on widget startup, and have them act generically.
In your example code, it looks to me like saying "Yes" means "Use default color", and "No" means "User must specify color". So...
startup: function () {
this.inherited(arguments);
dojo.connect(WC_add_color_yes, "onclick", dojo.hitch(this, function(evt){
this.useDefaultColor();
}));
dojo.connect(WC_add_color_no, "onclick", dojo.hitch(this, function(evt){
this.displayColorPicker();
}));
}
And then... only display those two buttons (or the dialog they're hopefully in) when applicable.
There is no "wait" or "sleep" function in javascript and each invocation of javascript code executes to completion (it does not get interrupted in mid execution by a response to some other event). You have correcly identified the historical execeptions that overcome this - global alert and confirm functions execute in browser native code and wait on user input.
Because of this your code will have to be restructured in some way, e.g. an event handler for "add to cart" validates the color choice and calls a function to really add it to the cart if valid. If it is not valid it modifies the DOM to present user with some buttons. The handler for the "yes" option would likewise call the same function to really add it to the cart.
Specific code is outside the scope of this answer - there must be many methods in page and code design to achieve the desired result. For example only: breaking up the sequential code and putting it in separate event handlers, coding using Promise objects defined in EC6 but not supported in MSIE, or perhaps even providing an option of "none - base color only" in the color selection logic.
FYI the dojo 1.10 toolkit documentation reports support for Dojo Promises but I leave research to determine its suitability with you.
We recently discovered that Chrome no longer supports window.showModalDialog which is problematic because our enterprise application uses this method.
There is, apparently, a short term workaround that allows you to restore showModalDialog but it involves modifying the registry which is too complicated (and risky) four our average user. Therefore I'm not a big fan of this workaround.
The long term solution is obviously to remove all calls to this obsolete method and replace them with a convenient jQuery plugin (such as VistaPrint's Skinny Modal Dialog plugin, for example. Other suggestions are welcome by the way).
The typical scenario we use the modal dialog is to ask the user for Yes/No confirmation before executing an action that cannot be undone, ask the user to agree to terms and condition before proceeding, etc. Typically the onclick event on the "Yes" or "Ok" button in the modal dialog looks like this:
window.returnValue = true;
window.close();
Similarly, the "Cancel" or "No" button looks like this:
window.returnValue = false;
window.close();
The fact that we can return a value from the dialog is very convenient because it allows the "parent" window to be notified whether the user has clicked the "Ok" or the "Cancel" button like so:
var options = "center:1;status:1;menubar:0;toolbar:0;dialogWidth:875px;dialogHeight:650px";
var termsOfServiceAccepted = window.showModalDialog(myUrl, null, options);
if (termsOfServiceAccepted) {
... proceed ...
}
The last thing I'm going to mention about the showModalDialog is that it works great even when the document displayed in the dialog is from a different domain. It's very common for us to have our javascript running from http://the-client.com but the "Terms of Service" web page is from http://the-enterprise-vendor.com
I need a temporary solution that I can deploy ASAP while we work on the long term solution. Here are my criteria:
minimal code change in existing JavaScript
the pop up window must be able to return a value to the "parent". Typically this value is a Boolean but it could be any simple type (e.g.: string, int, etc.)
solution must work even if the URL of the content is from different domain
Here's what I have so far:
1) Add the following method in my JavaScript:
function OpenDialog(url, width, height, callback)
{
var win = window.open(url, "MyDialog", width, height, "menubar=0,toolbar=0");
var timer = setInterval(function ()
{
if (win.closed)
{
clearInterval(timer);
var returnValue = win.returnValue;
callback(returnValue);
}
}, 500);
}
As you can see in this method, I try to make the pop up window look as similar to a dialog as possible by hiding the menu and the toolbar, I setup a time every 500 milliseconds to check if the window has been closed by the user and if so, get the 'returnValue' and invoke a callback.
2) replace all calls to showModalDialog with the following:
OpenDialog(myUrl, 875, 650, function (termsOfServiceAccepted)
{
if (termsOfServiceAccepted)
{
... proceed ....
}
});
The fourth parameter to the method is the callback where I check if the user has clicked the "Ok" button before allowing her to proceed.
I know it's a long question but basically it boils down to:
What do you think of the solution I propose?
In particular, do you think I'll be able to get a returnValue from a window that was opened with window.open?
Any other alternative you can suggest?
I have two ideas that could help you but the first one is tied to CORS, so you won't be able to use it from different domains at least you can access both services and configure them.
FIRST IDEA:
The first one is related to this native api. You could create on the parent window a global function like this:
window.callback = function (result) {
//Code
}
As you can see it receives a result argument which can hold the boolean value you need. The you could open the popup using the same old window.open(url) function. The popup's onlick event handler could look like this:
function() {
//Do whatever you want.
window.opener.callback(true); //or false
}
SECOND IDEA: Solves the problem
The other idea I got is to use this other native api to trigger an event on the parent window when the popup resolves (better known as cross-document messaging). So you could do this from the parent window:
window.onmessage = function (e) {
if (e.data) {
//Code for true
} else {
//Code for false
}
};
By this way you are listening to any posted message on this window, and checking if the data attached to the message is true (the user clicks ok in the popup) or false (the user clicks cancel in the popup).
In the popup you should post a message to the parent window attaching a true or a false value when corresponds:
window.opener.postMessage(true, '*'); //or false
I think that this solution perfectly fits your needs.
EDIT
I have wrote that the second solution was also tied to CORS but digging deeper
I realized that cross-document messaging isn't tied to CORS
As in the title,
how can i close a MessageDialog from code in HTML5 Windows Store app?
my code so far:
var msg = new Windows.UI.Popups.MessageDialog("Please wait");
msg.commands.append(new Windows.UI.Popups.UICommand("OK",
function (command) {
...
}));
msg.showAsync();
and then i would like to close this popup FROM THE CODE, i have not found any methods
in the specification like
msg.close();
is there a way?
thanks
The fact that your message is "Please wait" suggests to me that you might want to use a different tool for this job.
If what you're trying to do is inform the user that you're doing something in the background that they need to wait for, consider using a Progress control instead, as documented here:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465487.aspx
If you use a Progress control, you can both include a text label with your desired text, and dismiss the progress control when you've finished whatever task it is you're asking the user to wait for.
And to answer your original question, I don't believe there's any API for dismissing a MessageDialog programmatically, as that would break the interaction pattern of this control, which is for the app to display a message, and then allow the user to dismiss it when they're ready to.
Hope that helps.
For more information on Windows Store app development, register for App Builder.
I think you want to use a flyout, similarly to this answer. The link solves a slightly different problem in that it closes the flyout after a timeout.
However, you should be able to define a flyout that you, as well as the user, can close. In both cases, you end up calling something like:
flyout.winControl.hide(); // Dismiss the flyout
Take a look at this...
(function(){
"use strict";
var page = WinJS.UI.Pages.define("/html/cancelcommand.html", {
ready: function (element, options) {
document.getElementById("cancelCommand").addEventListener("click", cancelCommand_Click, false);
}
});
// Click handler for the 'cancelCommand' button.
// Demonstrates setting the command to be invoked when the 'escape' key is pressed.
// Also demonstrates retrieval of the label of the chosen command and setting a callback to a function.
// A message will be displayed indicating which command was invoked.
// In this scenario, 'Try again' is selected as the default choice, and the 'escape' key will invoke the command named 'Close'
function cancelCommand_Click() {
// Create the message dialog and set its content
var msg = new Windows.UI.Popups.MessageDialog("No internet connection has been found.");
// Add commands and set their command handlers
msg.commands.append(new Windows.UI.Popups.UICommand("Try again", commandInvokedHandler));
msg.commands.append(new Windows.UI.Popups.UICommand("Close", commandInvokedHandler));
// Set the command that will be invoked by default
msg.defaultCommandIndex = 0;
// Set the command to be invoked when escape is pressed
msg.cancelCommandIndex = 1;
// Show the message dialog
msg.showAsync();
}
function commandInvokedHandler(command) {
// Display message
WinJS.log && WinJS.log("The '" + command.label + "' command has been selected.", "sample", "status");
}
}());
http://code.msdn.microsoft.com/windowsapps/Message-dialog-sample-00c928f5/sourcecode?fileId=50972&pathId=1064922824
I have a Flex application which allows the user to edit a cloud-based document. (Think SlideRocket.) When the user tries to navigate away or close the browser window, I'd like to show them an are-you-sure dialog iff they have unsaved changes.
I'm using the following custom class, which I found at Flash player notified on browser close or change page (as3). I don't think it is the problem.
package
{
import flash.external.ExternalInterface;
public class ExternalInterfaceUtil
{
public static function addExternalEventListener(qualifiedEventName:String, callback:Function, callBackAlias:String):void
{
// 1. Expose the callback function via the callBackAlias
ExternalInterface.addCallback( callBackAlias, callback );
// 2. Build javascript to execute
var jsExecuteCallBack:String = "document.getElementsByName('"+ExternalInterface.objectID+"')[0]."+callBackAlias+"()";
var jsBindEvent:String = "function(){"+qualifiedEventName+"= function(){"+jsExecuteCallBack+"};}";
// 3. Execute the composed javascript to perform the binding of the external event to the specified callBack function
ExternalInterface.call(jsBindEvent);
}
}
}
In my applicationComplete function, I add an event listener to the javascript window.onbeforeunload event, as follows:
ExternalInterfaceUtil.addExternalEventListener("window.onbeforeunload", requestUnloadConfirmation, "unloadConfirmation");
The Actionscript function requestUnloadConfirmation (below) is successfully called when the user tries to close the browser window. However, it does not prevent the browser from closing. (In Chrome, the browser closes and the Actionscript function is called subsequently. In Firefox, the browser stays open for the duration of the function but then closes.)
private function requestUnloadConfirmation():String {
if (changedSinceSave)
return "There are unsaved changes. Are you sure you want to leave without saving?";
else
return null;
}
Behavior is identical in both debug and release builds, and on the production server as well as the local machine.
Any help would be greatly appreciated,
Dave
Right now, when the JavaScript event is fired, it is set to call your function in your AS3 code, which it does. The JavaScript function, however, is not returning the value that your AS3 function returns. To get this behaviour, add 'return' to the JavaScript event-handling function created in addExternalEventListener like so:
var jsBindEvent:String = "function(){"+qualifiedEventName+"= function(){return "+jsExecuteCallBack+"};}";
Since the event handler should return a true or false value, your requestUnloadConfirmation function should have a return type of Boolean and return false to cancel the event, and true otherwise. Use the following to get a confirmation dialog box:
private function requestUnloadConfirmation():Boolean {
if (changedSinceSave)
return ExternalInterface.call("confirm", "There are unsaved changes. Are you sure you want to leave without saving?");
else
return false;
}
UPDATE:
It turns out that returning a string to window.onbeforeunload causes a confirmation dialog box to be shown automatically. The ExternalInterface.call to confirm causes a second dialog box to show; it is redundant. The only change required in the AS3 code is to add the "return" in the generated JavaScript.
In a regular html/javascript web-app you would use the window.onbeforeunload event to do this.
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm
Perhaps you can use this event, and check some value of your flex app to determine if you should ask the user (not familiar with flex...)?
I had to run some modifications in the above code to make it work.
The problem was due to the fact that the function which handles the event window.onbeforeunload, should not return any value to avoid popup confirmation and should return text value when a popup confirmation is in-order
Here are my changes:
private function requestUnloadConfirmation():String {
if (changedSinceSave){
return "There are unsaved changes. Are you sure you want to leave without saving?";
}
return null;
}
And a little change in embedded JS
var jsBindEvent:String = "function(){"+qualifiedEventName+"= function(){ if ("+jsExecuteCallBack+") return "+jsExecuteCallBack+"};}";