Trigger.IO: Action handler on native back button? - trigger.io

Is it correct that native back buttons don't use their action handlers?
This works, it fires the alert message (regular native button):
forge.topbar.addButton( {text:"Button", position:"left"}, function(){ alert("OK") }, null);
But this doesn't work (native back button):
forge.topbar.addButton( {text:"Button", position:"left", type:"back"}, function(){ alert("OK") }, null );
...If so, how can I find out that the back button has been pressed?

Documentation says:
type: Create a special type of button, the only option currently is
"back" which means the button will cause the webview to go back when
pressed.
I think the back button will basically trigger a ´window.history.back()´. It probably doesn't take a callback different from that.

Related

How to show "Back" option in IOS devices for InappBrowsers in Ionic 5?

I am using InAppBrowser Plugin in my Ionic 5 project . My expectation is to have a back button visible in InappBrowser in order to return to original app (which is usually present in Ios) , but as per my current implementation the Back option is not visible in ios device.
below is the code I am using -
this.inAppBrowser.create(url, '_blank', { location: 'no', hardwareback: 'yes', fullscreen: 'no' });
In iOS there is no "back" button but "Done" button (which is the same, takes you back to the app). It should already display, you can't disable it, so you should see a blue "Done" button.
If location is false, the Done button does not appear. Then you need to set the option "footer" to true, to display the Done button at the bottom.
With the options closebuttoncolor and closebuttoncaption you can change the text and the color, so change the text to "Back".

Is there a way to catch and cancel the back button event in a NativeScript app on the iOS platform?

I'm working on a NativeScript-Angular app for both Android and iOS but have hit a problem with standard back button navigation. I have resolved the issue for Android, but cannot find a solution for iOS.
The event is causing a problem when going back to a particular page where routing data is expected, resulting in the exception:
"Error: Currently in page back navigation - component should be reattached instead of activated".
My Android solution catches the back button event and cancels it, then calls the router to do the navigation.
ngOnInit() {
if (app.android) {
app.android.on(app.AndroidApplication.activityBackPressedEvent,
(args: any) => this.backEvent(args));
}
}
backEvent(args) {
args.cancel = true;
this.backToRegister(false);
}
backToRegister(accepted: boolean){
this.router.navigate(['/register',
this.registerParametersEntered.password,
this.registerParametersEntered.confirmPassword,
this.registerParametersEntered.code,
this.registerParametersEntered.email,
accepted]);
}
I want to do something similar with iOS, such as: -
if (app.ios) {
this.page.on('navigatingFrom', (data) => {
// TODO cancel the back button event
this.backToRegister(false);
})
}
I can't find a way of doing this for iOS - my research is leading me to the conclusion it is not possible to cancel the iOS back button - for example, see here.
Any ideas or alternative suggestions greatly appreciated!
You can't override the back button for iOS. See this SO question. You basically need to create a custom button, you can mimic the appearance of the back button on iOS and add your own event handler. That's how you'd do it in a native iOS app, and how you do it in NativeScript since the native controls are used via NativeScript.
The actionbar in nativescript can have a custom layout inside or you can just use an action-item and position it on the left for iOS, while also hiding the button on Android if you desire.
Another solution would be, instead of catching the back button event just to throw it away/disable it - to just clear the history after you are switching a page where there no "back" to go to.
this.router.navigate(['level1'], {
clearHistory: true
}

Angular Material: How to display one toast after another one is displayed while keeping both on screen?

I'm using $mdToast (Angular Material framework) directive to show several status messages in my Angular(-Material) web app.
When the user signs-in, if the login is successful a toast is shown by calling:
$scope.showToastMessage = function() {
var toast = $mdToast.simple()
.content("Login successful);
.action('OK')
.highlightAction(false)
.position($scope.getToastPosition());
$mdToast.show(toast).then(function(toast) {
//...
}
});
};
After login success I need to make another check (e.g. valid session cookie) and show another toast message without overriding the previous one and after the previous one is actually showed.
The issues I get here are:
the second toast is shown before the new one (probably due to $mdTost's async nature)
this second toast is shown for less than one second and then disappears leaving on screen only the first one (basicly the second one is shown first and then hidden when the first one appears)
A solution could be either:
creating the second toast inside then .then callback: this doesn't work either because requires the user interventions to press the "OK" action button
calling $mdToast.updateContent(); (https://material.angularjs.org/#/api/material.components.toast/service/$mdToast) which would overwrite previous toast message (this is not the best solution but would be fine either) but I can't figure out how:
(1) choose a specific toast shown on screen (let's suppose I have several toasts shown by different calls) , and
(2) update the toast message after a delay (let's say 3 seconds) in order to show to make the user undersand that the login was successful but there is some other information.
Any clue?
I was not sure if you wanted to show both toasts at the same time or not. If you wanted to show the sequentially you can put the second call to toast inside of the then because the action (OK) resolves the promise of the first toast. This is what I've tried:
var toast = $mdToast.simple()
.content('top left')
.action('OK')
.highlightAction(false)
.position($scope.getToastPosition());
var toast2 = $mdToast.simple()
.content('Checking some other things')
.highlightAction(false)
.position('top left');
$mdToast.show(toast).then(function() {
$mdToast.show(toast2);
});
See this CodePen.

Showmodaldialog help button in title bar

I have an HTA which opens a showmodaldialog and this JavaScript code in the dialog page:
function helpButton(){
document.body.style.curosor = "help";
my_div.onclick = function(){alert("Help for the div is displayed here")}
}
I want a help button in the title bar of the showmodaldialog, like on the picture below:
(don't mind about the fact that the picture's in French, it's my computer's language)
When I push on that help button, I want it to execute the helpButton() function.
There was showModalDialog('path', 'arg', 'help:yes'); and you could attach an onhelp handler within the opened dialog's window. However, this dialog property is obsoleted - since IE9, if I'd recall correctly - and can't be returned by downgrading the app using X-UA when running a HTA with a newer IE.
You still can set onhelp, and call it by hitting F1:
window.onhelp = function () {
alert('Help is asked.');
};

Unable to use back button property in Popup screen in blackberry

In my application , am using popup screen, that implements FieldChangeListener.I used close() method for back button. but its not working.
Can some give sample code without using KeyListener,TrackwheelListener ?
if u want to close the popup screen on back button try this:
UiApplication.getUiApplication().
popScreen(UiApplication.getUiApplication().getActiveScreen());

Resources