I have a SAPUI5 application and want to open a link if I click on a button.

I get the value of the specific link from an OData call and a normal <Link> control is working fine with the remote data path.

<Link href="{oData>/Url}" target="_blank" text="Click me" />

Tried several ways to open the website with a <Button> instead, but none of them were working for me.

I tried to put a Button inside of it.

<Link target="_blank" href="{oData>/Url}" text="Click me">
  <Button text="Open Website"/> <!-- Error: Cannot add direct child without default aggregation defined for control sap.m.Link -->
</Link>

But I'm getting the above error.

Tried using an HTML link, but it can't deal with the path of the remote data:

<html:a href="{oData>/Url}" target="_blank"><Button text="Open Website"/></html:a>

Then I tried to use the onPress event handler when using a Button and the window.open function:

<Button text="Open Website" press=".onPress" />

{ // In the Controller
  onPress: function () {
    window.open("{oData>/Url}","_blank");
  },
}

But the Controller also can't deal with the path of the remote data resulting in the same invalid URL.

I also read from URLHelper and tried this sample, but I'm unable to add the "value" attribute to the Button.

I have a SAPUI5 application and want to open a link if I click on a button.

I get the value of the specific link from an OData call and a normal <Link> control is working fine with the remote data path.

<Link href="{oData>/Url}" target="_blank" text="Click me" />

Tried several ways to open the website with a <Button> instead, but none of them were working for me.

I tried to put a Button inside of it.

<Link target="_blank" href="{oData>/Url}" text="Click me">
  <Button text="Open Website"/> <!-- Error: Cannot add direct child without default aggregation defined for control sap.m.Link -->
</Link>

But I'm getting the above error.

Tried using an HTML link, but it can't deal with the path of the remote data:

<html:a href="{oData>/Url}" target="_blank"><Button text="Open Website"/></html:a>

Then I tried to use the onPress event handler when using a Button and the window.open function:

<Button text="Open Website" press=".onPress" />

{ // In the Controller
  onPress: function () {
    window.open("{oData>/Url}","_blank");
  },
}

But the Controller also can't deal with the path of the remote data resulting in the same invalid URL.

I also read from URLHelper and tried this sample, but I'm unable to add the "value" attribute to the Button.

• javascript
• xml
• sapui5

Share Improve this question Follow edited Apr 3, 2021 at 21:56 Boghyon Hoffmann 18.1k1414 gold badges9393 silver badges205205 bronze badges asked Apr 3, 2021 at 20:03 XukiXuki 4311 gold badge11 silver badge55 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

UI5 provides sap/m/library.URLHelper for this.

<Button xmlns="sap.m"
  xmlns:core="sap.ui.core"
  core:require="{ sapMLib: 'sap/m/library' }"
  text="Open Website"
  press="sapMLib.URLHelper.redirect(${myModel>/Url}, ${myViewModel>/newTab})"
/>

Documentation

• API reference: sap.m.URLHelper.redirect
• Section "Passing Parameters" from the topic "Handling Events in XML Views" (since UI5 1.56)
• Topic "Require Modules in XML View and Fragment" (since UI5 1.69)

---

If the target URL needs to be further processed:

<Button text="Open Website" press=".openUrl(${myModel>/urlPart}, true)" />

openUrl: function(urlPart, newTab) {
  const url = urlPart/*...*/;
  const { URLHelper } = sapMLib; // sapMLib required from "sap/m/library"
  URLHelper.redirect(url, newTab);
},