SAP Fiori Elements DataFieldWithURL in separate window

[former_member435529]

Hello,

I am using annotations DataFieldWithURL and the link is open up in the same window.

How can it be open in a separate window ?

Thanks,

Javier

[gopalmishra673]

Hi Javier,

Could you please explain the solution of this problem the way you achieved? I have same issue with dynamic link list card in Over View Page. Link is opening in same window.

[gregorw]

Ami Nakano filed an influencing request on this topic:

Option to open a cross navigation target app in a new tab

[monokizsolt7]

I solved it by adding this to my Component.js:

$('body').on('click', 'a', (e) => e.target.target = '_blank');

[Shiv_602]

Thank you, It's working for me.

[rahullohia]

Hello,

The annotation 'datefieldwithurl' doesnt have an inbuilt property to force a new browser page. There are two ways you can achieve this.

1. If using annotations, return the 'url' like this-> |javascript:void( window.open('| && |{ url }| && |') )|

adding the javascript function to the final url will force the browser to open a new page.

2. If not using annotation, add an 'onclick' or 'onpress' event and then use 'sap.m.URLHelper.redirect(url, true)' in the handler

Thanks,

Rahul

[former_member435529]

Thanks for your inputs, Rahul.

I finally used annotations but attached link operation to that field.

[former_member738409]

Hi Rahul,

I used first method working as expected! Thank you!

[smritigupta]

Hello Rahul, @rahullohia

I have a list card in overview page, where in i have some quicklinks for the apps. I want to open the app in new tab upon clicking the link. I tried the code with the annotation , however it didn't work. This is how my annotation looks like:

<Record Type="UI.DataFieldWithUrl">

                            <PropertyValue Property="Url" Path="URL"/>

                            <PropertyValue Property="Value" String = "Description"/>

</Record>

Could you please suggest how it should be added to Path?

Thanks,

Smriti Gupta

[former_member435529]

Gopal,

Please add attachPress to your field ID. This will make your field clickable. You can find this ID in Elements tab in Developer Tools.

Attach a function from where you can launch the URL in a separate window: yourField.attachPress(this.yourNewFunction).

I added the above in the onInit method of the Extension Controller.

Hope this helps.

Javier

[gopalmishra673]

Thanks Javier, Its was helpful.

[vinod_snair]

Hello Javier,

Good to know that you found a solution.

I kindly request you to provide a feedback to Fiori guideline with details of your use case so they consider the same in future.

Regards,

Vinod

[vinod_snair]

Hello Javier,

DataFieldWithUrl as per the UI Vocabulary doesn't offer this capability. That is also aligned with the Fiori design principles for navigation. You can take a look at the design principal here. The introduction section itself describe the following

Navigation in SAP Fiori follows standard navigation paradigms of various web applications. When a user navigates to a new screen, the user’s system default navigation is in place. Depending on individual browser settings and functionality, new screens can also be opened in a new tab or window by using a long tap or right-click (using a mouse)

Hope this answers why do you see this annotation capability. I would strongly recommend you to keep your application aligned to the Fiori design guideline so that end users have a consistent user experience through out.

Regards,

Vinod

[former_member435529]

Thank you Vinod. I finally found a workaround by creating Link

[gregorw]

Hi Vinod,

should I consider it as a bug and file an incident if the right-click -> Open in new tab option doesn't work with DataFieldWithUrl?

Best Regards
Gregor