SAPUI5: Control cannot override Table row click - javascript

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(...);
}

Related

WebXR overlay interferes with ThreeJS AR Controller

So for school I am making a webshop that allows users to view the product in AR.
With WebXR I have added an overlay to the AR session that contains a button to reposition the model.
I found out that when I press the button, the click event on the button is triggered but also the select event on the ARController is also triggered.
Is there a way to prevent the controller from triggering when I click the button?
Thanks :)
You need to use the beforexrselect event and call preventDefault() as explained here : https://www.w3.org/TR/webxr-dom-overlays-1/#onbeforexrselect
buttonOnOverlay.addEventListener('beforexrselect', e => {
e.preventDefault();
});

event.stopPropogation() not working in IPAD/Tablet

I am using coveo Framework and i used facets inside a dropdown button i wrote a window.onclick function so that when clicked outside dropdown button the dropdown should be closed.
everything seems to be working fine but when i clicked facets checkbox the dropdown was closing and when i talked to coveo team they said the query was triggered when coveo checkbox was clicked thats the reason the dropdown was closing when clicked.
To fix this i used event.stopPropogation and that was working fine in desktop mode but when it comes to IPAD Mode this is not working any help
Here is my code
// Prevent event bubble up to window.
document.getElementById('dropdown').addEventListener('click', function(event) {
event.stopImmediatePropagation();
});
function close() {
document.getElementById('dropdown').classList.remove('show');
}
window.onclick = function(event) {
if (!navigator.userAgent.match(/Android|webOS|iPhone|iPod|Blackberry/i)) {
if ((!event.target.matches('.dropdown-backdrop')) && event.target.closest('#dropdown') === null) {
close();
}
}
};
I believe the issue is on a touch screen device, you actually get touch events possibly in addition to mouse events. I suspect if you attached another listener to touchstart that does the same thing as click you will see the same results on the tablet.
In theory you should see no click events on a tablet (a user cannot click without a mouse) but in practice the browser emulates click events. However, when those events are generated the browser may fire both touch events and mouse events in response to the same user input. If both events are fired you're successfully stopping the click event from propagating but not the touch event.
Update
You haven't given enough detail to fully give an example, but the change happens in the listeners you attach to your dropdown element.
// Note instead of using the same anonymous function twice,
// I've defined a function to stop propigation
function stopProp(e) {e.stopImmediatePropagation();}
document.getElementById('dropdown').addEventListener('click',stopProp);
document.getElementById('dropdown').addEventListener('touchstart',stopProp);

Android click event div element

I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers

Dynamics CRM 2011 - opening custom activity from main grid opens "new record" window instead

I have a custom activity entity named "slfn_technischonderhoud" which is setup not to appear in activity menus. I have one record of this in my development environment. whenever I try to open this record from the main.aspx grid, it redirects me to the "new record" form. this only happens when opening it from the main.aspx grid. When opening it from an embedded subgrid on a related entity, it opens the right record.
I do have a Javascript function which does exactly this (open the "new record" form in a new window). Is there a way that this function somehow got assigned to the doubleclick event on the main.aspx grid? and is there a way to unbind this?
Did you try to create a web resource and add it to the custom entity form and use the javascript and Jquery this way:
$( document ).ready(function() {
// Insert your code here to add the event to the main.aspx grid.
// This code will be loaded outside the form i suppose.
});
Note: This strategy is not supported from Microsoft Dynamics CRM. So i would suggest you to use the OnLoad Form Event with a subgrid.
You can unbind that by removing the onClick Event or supress them this way:
/*Normal Browser:*/ event.stopPropagation();
/*For IE:*/ window.event.cancelBubble = true;

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.

Categories

Resources