CODEWITHSUNDEEP
javascriptsapui5
Shalini
Shalini

Reputation: 9

open sapui5 detail page in a new tab of the browser on click of a button

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <script src="resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m,sap.ui.table,sap.ui.commons"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->

        <script>
                var bFlag;
                sap.ui.localResources("views");
                sap.ui.localResources("i18n");
                sap.ui.localResources("utils");
                jQuery.sap.registerModulePath('Application', 'Application');
                jQuery.sap.require("Application");
                var oApp = new Application({
                    root : "content"
                });
        </script>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">

    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

I am developing a sapui5 application in which I have a split app,now on the detail page in the toolbar I have a button called open in new window.So I want to open this particular detail page(only detail page) in a new tab on clicking this button.
Can anyone help me on this as in how to go about it?

Thanks in advance.

Regards,
Shalini

Upvotes: 0

Views: 14310

Answers (2)

21stking
21stking

Reputation: 1251

Use the SAP's Router API. Basically, define your router, routes, pattern and targets objects in your manifest.json file:

"sap.ui5": {
  "rootView": {
    "viewName": "path.to.view.name",
    "type": "XML",
    "async": true
  },
  "routing": {
    "config": {
      "routerClass": "sap.m.routing.Router",
      "viewType": "XML",
      "viewPath": "path.to.view",
      "controlId": "init",
      "controlAggregation": "pages",
      "async": true
    },
    "routes": {
      "init": {
        "pattern": "",
        "target": "init",
        "viewId": "vid_init"
      },
      "target_name": {
        "pattern": "url_parameter",
        "target": "target_name",
        "viewId": "vid_view_name"
      }
    },
    "targets": {
      "target_name": {
        "viewName": "view_name",
        "transition": "show"
      }
    }
  }
}

Assign a press event handler in your button's properties:

<Button id="myButton" press=".onOpenNewWindow" />

In your view's controller write a code to handle your event. Example:

onOpenNewWindow: funtion(oEvent){
  sap.ui.require([
    "sap/m/library"
  ], sapMLib => sapMLib.URLHelper.redirect("#/url_parameter", /*new window*/true));
},

Resources

Upvotes: 3

Tim Gerlach
Tim Gerlach

Reputation: 3390

Basically, you can open a new tab in JavaScript like this:

window.open("<yourURL>", _blank');

For your SAPUI5 Application you simply have to provide an additional .html file at a dedicated URL which loads your View/Controller. If you want to pass information from the Master/Detail application to the new tab you could add URL parameters.

As I can see in your edited question you´re using an Application. I don´t know the further structure (especially what your Application.js does) but in a separate .html a very simple solution could look like this:

<script>
            sap.ui.localResources("views");
            sap.ui.localResources("i18n");
            sap.ui.localResources("utils");
            sap.ui.jsview("name.of.your.detailView").placeAt("content");
</script>

If you want to reuse your Application.js file you can extend it and pass a simple parameter which tells to display only one View.

One more thing: I guess you´re using sap.m.SplitApp somewhere in your application. To display only the DetailView you should use sap.m.App instead at that point.

Upvotes: 0

Related Questions