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

Question

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

Does this answer your question? [SAPUI5 Open link on Button press](https://stackoverflow.com/questions/66935407/sapui5-open-link-on-button-press) — Boghyon Hoffmann, Apr 04 '21 at 14:25

score 2 · Answer 1 · edited Nov 07 '19 at 12:17

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

Tim Gerlach · Answer 2 · 2015-04-08T09:03:23.373

0

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.

edited Apr 08 '15 at 09:03

answered Apr 08 '15 at 06:53

Tim Gerlach

3,390
3
20
39

I tried this piece of code,but seems like the way i want to open that specific detail view is wrong.Because when i tried this: window.open("./index.html") it opened the page wher in i can see my master-detail page.So can you tell me what should be the url for detail page look like? – Shalini Apr 08 '15 at 08:28
The point is to create another `.html` file in your project which is responsible for displaying only the detail page. You can append your current `.html` file to your Question post so I can extend my answer specifically to your use case. – Tim Gerlach Apr 08 '15 at 08:35
I have attached a code snippet of the index.html.I am just thinking how i should use that additional html file to open my sap ui5 js view? – Shalini Apr 08 '15 at 08:43
@Tim-thanks for your answer.I am using application.js inside which i have written one container view App.view.js. Inside App.view.js i have added app,splitapp & shell.I tried your solution, so I am able to get the detail view in a new tab but the object header is coming empty even though it had data,so the thing is it is taking the basic structure of detail view and opening it in another tab from the new view & not taking the latest detail view.As detail view is inside App.view.js & also inside new html page. Should be the detail view added only at one place or at both places? – Shalini Apr 08 '15 at 09:53
@Shalini: Would you please extend your Question post with Application.js and App.view/controller snippets? Since it´s going more and more into details it would help to see some actual coding. – Tim Gerlach Apr 13 '15 at 07:47

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

2 Answers2

Resources