How to add click event for link type QuickViewGroupElement？
Multi tool use
Clash Royale CLAN TAG#URR8PPPHow to add click event for link type QuickViewGroupElement？
I have a QuickView popover like this:
<core:FragmentDefinition id="table_popover">
<QuickView id="popover_quickView">
<QuickViewPage id="popover_quickViewPage">
<QuickViewGroup id="popover_quickViewGroup">
<QuickViewGroupElement
id="nav_link"
type="link"
value="navTo somePage" />
</QuickViewGroup>
</QuickViewPage>
</QuickView>
</core:FragmentDefinition>
There is only target property for QuickViewGroupElement, no press/click event. I want to use CrossApplicationNavigation service in click event.
target
QuickViewGroupElement
CrossApplicationNavigation
I tried to use attachBrowserEvent:
attachBrowserEvent
var oLink = sap.ui.core.Fragment.byId("AssignedTablePopover", "nav_link");
oLink.attachBrowserEvent("click", function() {
console.log("click");
});
But found that QuickViewGroupElement did not extends sap.ui.core.Control, so do not borrow attachBrowserEvent.
QuickViewGroupElement
sap.ui.core.Control
attachBrowserEvent
So is my only option is to use addEventListener in vanilla js or .click() in jQuery? is there any more UI5 way?
addEventListener
.click()
Event the jQuery work around did not work, QuickViewGroupElement id in UI5 and DOM is not the same, just as in this Plunker Demo:
QuickViewGroupElement
var oView = this.getView();
var oLink = oView.byId("nav_link");
var sId = oLink.getId(); // "idFirstPage1--nav_link"
// get nothing
var jQueryLink = $("#" + sId);
var vanillaLink = document.getElementById("document.getElementById("idFirstPage1--nav_link")")
// returns link element, in real application, generated id might be __linkXXX
var realjQueryLink = $("__link0");
var realvanillaLink = document.getElementById("__link0");
The unique IDs of QuickView is very strange, I created an issue for UI5 in github : OPENUI5 issues
QuickView
UI:
I've used
ResponsivePopover before, but UX prefers QuickView. I've also tried to mimic QuickView using ResponsivePopover + Page + SimpleForm, but SimpleForm did not shows in Page, that's another question.– Tina Chen
20 hours ago
ResponsivePopover
QuickView
QuickView
ResponsivePopover
Page
SimpleForm
SimpleForm
Page
If possible kindly share the screenshot of the UI
– inizio
20 hours ago
Updated @inizio
– Tina Chen
6 hours ago
Kindly share me the UI which you are trying to achieve it.
– inizio
1 hour ago
1 Answer
1
Yes, this is a complicate thing to do. here is what you can try
I have attach the afterOpen event to a function quickViewOpen
and then I query for pages and group elements that have link type.
Next, I use jquery to look for the link to attach click event.
I have it working at http://jsbin.com/nuroqew/edit?html,output
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>MVC</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Button text="Click" press="openQuickView"></Button>
<QuickView id="popover_quickView" afterOpen="quickViewOpen">
<QuickViewPage id="popover_quickViewPage">
<QuickViewGroup id="popover_quickViewGroup">
<QuickViewGroupElement
id="nav_link"
type="link"
value="navTo somePage" />
<QuickViewGroupElement
id="nav_link2"
type="link"
value="navTo otherPage" />
</QuickViewGroup>
</QuickViewPage>
</QuickView>
</mvc:View>
</script>
<script>
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";
var oController = Controller.extend("myView.Template", {
openQuickView: function(oEvent) {
var quickview = this.getView().byId("popover_quickView");
quickview.openBy(oEvent.getSource());
},
quickViewOpen: function() {
var fn = this.quickViewLinkClick; // event handle
var oQuickView = this.getView().byId("popover_quickView");
// get the link elements so that we can associate the values with the link click
var linkElements = oQuickView.getPages()[0].getGroups()[0].getElements().filter(function(e) {
return e.getType() === 'link';
});
// use jquery to look for the links and attach on click event
this.getView().byId("popover_quickView").$().find("a.sapMLnk").each(function(i, e) {
var elm = linkElements[i];
$(e).click(function() {
fn(elm);
});
});
},
quickViewLinkClick: function(elm) {
console.log(elm.getValue());
}
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You can try sap.m.Popover, where you can use any controls.
– inizio
20 hours ago