Search code examples
sapui5popover

How 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.

I tried to use 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.

So is my only option is to use addEventListener in vanilla js or .click() in jQuery? is there any more UI5 way?

Event the jQuery work around did not work, QuickViewGroupElement id in UI5 and DOM is not the same, just as in this Plunker Demo:

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

UI:

enter image description here

Solution

  • 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.

    Working example - jsbin

    <!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>