Develop Reference

SAPUI5: Control cannot override Table row click

I have SAP microchart in smart table.
This smart table has navigation to other app, when user clicks on table row (via "itemPress" method).
Now, I implemented StackedBarMicroChart in one of the columns. I implemented onClick method for the StackedBarMicroChart, which inturn opens an popup showing more details.
When I click on StackedBarMicroChart, due to row-click-event of table, I am navigating to another app before StackedBarMicroChart can open the popup.
How can I override this behaviour, so that if I click on StackedBarMicroChart, it opens popup; If I click anywhere else in table row, it navigates to another app?
Thanks.

I guess this issue is not happening with sap.m controls(e.g. sap.m.Button#press event) since those controls, as a convention, mark the (simulated)touch events but the microchart library controls stop the event propagation for the "click" event which is a different (not a touch) event.
In this case maybe you can check the srcControl parameter of the itemPress event and execute your navigation code only if the srcControl is not a microchart. e.g.
onItemPressHandler: function(oEvent) {
var oSourceControl = oEvent.getParameter("srcControl");
if (oSourceControl.isA("sap.suite.ui.microchart.StackedBarMicroChart")) {
return;
}
this.navigateToNextPage(...);
}

How to trigger an event in jQuery?

I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)

This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/

How do I detect if a button was clicked with a keyboard key pressed? (Ctrl-click, Alt-click etc.)

I'm trying to write a UI for an Adobe After Effects script. I want to add a functionality where a user can CTRL click a button instead of just clicking it with no keypresses to get a slightly different behavior.
The problem is, however, I don't to know how to detect if a key was pressed when the button was clicked.
I've managed to detect a keypress with
myPanel.addEventListener("keydown", function (kd) {alert(kd.keyIdentifier); return(kd.keyIdentifier);});
This piece of code adds a listener that alerts me a name of the button when it is being pressed. I also have a button onClick event to control what happens when a button is pressed. However, I can't figure out how to combine those two listeners and get an information about whether a key was pressed during the button click. I tried to place the keydown listener inside the onClick function, but then it doesn't work at all.

I managed to make it work.
The Adobe ScriptUI environment lets you monitor the keyboard status at all times using the Keyboard state object. You can get it from: ScriptUI.environment.keyboardState. It has properties such as altKey, ctrlKey and so on that return a boolean based on whether they key was pressed or not. All you have to do is put the object initiation into the onClick event of the button:
button.onClick = function() {
isCtrlPressed = ScriptUI.environment.keyboardState.ctrlKey;
}
For more information, I refer to p.155 of the Adobe JavaScript Tools Guide

<button onclick="sample(event)">Click Me!</button>
function sample(event){
if (event.ctrlKey){
alert('Button click with ctrlKey pressing.');
}else{
alert('Button click without ctrlKey pressing.');
}
}
Event object has some key press or not. Check that then use it.
Example

Disable swipe-to-open for Drawer in specific view

I'm developing a web application with Kendo Mobile and using the Drawer widget as a menu. One of my views is a Google map and I'd like to disable the swipe-to-open feature of Kendo Mobile's Drawer when in this view, for obvious reasons...
I've tried the following :
Bind to the Drawer's beforeShow event
...and stop it from opening if the current view is the map view
beforeShow: function (beforeShowEvt) {
if(app.view().id == "#stationMap") {
beforeShowEvt.preventDefault();
}
}
The problem with this is that it also trigger's (and prevents drawer from opening) when I click on the menu button in my top bar.
I've looked through the beforeShowEvt and can't seem to find anything to let me know if it was triggered via swipe of via menu click.
Bind to the Google maps containing div
...and catch touchstart events to stop them propagating up and being picked up by Kendo.
This hasn't worked at all.

Here's how I solved my problem :
Added an event handler to Google Map's dragstart event which sets a flag to true
Added an event handler to the Drawer button's touchstart event which sets this flag to false
Added a check in the Drawer's beforeShow event to see if flag is true, if it is I preventDefault();
Works like a charm!

I know this isnt the real answer but I have a work around. Just create a new .html file and put your google widget in that and then call it like so:
app.navigate("nodrawerwidgets.html");
OR
<a href="nodrawerwidgets.html">Google widget<a>
My first thought was to intercept the swipe actions by wrapping your widget in a div :
<div id="divStopSwipe">
...
$("#divStopSwipe").kendoTouch({
enableSwipe: true,
swipe: function (e) { //do nothing or figure out how to let the action pass down to the widget
}
});
..however this would stop the google widget from getting the swipe actions.
hope this helps a little - I am new to mobile ui as well.

Dojo dialog close event on X (top-right)

Im using Dojo to create a simple dialog to create a user in a system. The problem is I get the error:
Tried to register widget with `id==user_submit` but that `id` is already registered
user_submit, is a Dojo button I have to finish the form inside the dialog. When I close the dialog by clicking it and submitting the form there is no problem in opening the dialog again (in the click event on the button I have this line of code:
dijit.byId("user_submit").destroy();
but if I close the dialog through the [x]-link / button in the top-right corner I don't destroy the button and then can't open the dialog again without reloading the page.
How do I get Dojo to destroy the button or how to a overload the click-event on [X]-link / button, so I can write the destroy command for the button?

"Developer shouldn't override or connect to this method" for "onCancel" see documentation.
A better solution is:
var myDialog = new Dialog({
id: "myDialogId1",
onHide: function() {
myDialog.destroy()
}
});

Found a solution. by using dojo.connect().
myDialog.connect(myDialog, "hide", function(e){
dijit.byId("user_submit").destroy();
});
Would have postet this shortly after i posted the quistion, but I didn't have enough points, so here is the answer again, just a little late :-)

IIRC, the onClose extension event gets called when you click on the X thing, so you could try putting your cleanup code there.
You could also consider sidesteping the issue entirely. Perhaps you don't need to destroy the widget and could instead reuse the same one? You could also do a widget existence test before you create it again, destroying the old version if its still alive.

You can override onCancel() method as stated above or you can attach event to the
dijit.dialog.closeButtonNode domElement.
dijit.dialog.closeButtonNode is the name of data-dojo-attach-point attribute for close button.
Exp:
dojo.on(dijit.Dialog.closeButtonNode, "click", function(evt){
//add your logic here
});

When pressing the X on the top of the dialog the "onCancel" event is triggered.
Dispose of the element there.