Access ArcGIS Enterprise Portal items using OAuthentication and open the item (Web App) with click on Thumbnail

Question

Hi everyone, I'm using the following example (https://developers.arcgis.com/javascript/latest/sample-code/identity-oauth-basic/) to get the access to the items in our ArcGIS Enterrpise portal. I have adapted the example so that all items (Web Mapping Application, Dashboards, ...) are displayed by a group in which I have only changed the "query" property, i.e. added the group id. (query: "group: 59bd561ffc0c50e5b390ef9e78352de6") The access to the ArcGIS Enterprise portal works great and the thumbnails of the web mapping application are displayed in the gallery. The question: How can the web mapping applications and dashboards be opened in the new browser window when the user clicks on the thumbnail? I am very grateful for any help! Code: Identity Manager

BenElan · Accepted Answer

You can add the target="_blank" attribute to the HTML element to open a link in a new tab or window.

https://www.w3schools.com/tags/att_a_target.asp

Den-GIS · Accepted Answer

Hi ben, Thank you very much for your hint! But that can't help me. The "href" only refers to a single URL. I currently have three apps in the group with the above group id in the ArcGIS Enterprise portal and thus in the gallery. I searched online for a solution and found a little code (hint) from Rene Rubalcava (Solved: Re: How to access function in require([]) - Esri Community) that got me further. I have expanded and adapted the "createGallery ()" function a little. When the user clicks on thumbnail, the corresponding url is written in the method window.open (); called up and the app is opened in a new tab. In case anyone has better simpler solution feel free to post. Here is my code: function createGallery(items) { let htmlFragment = ""; items.results.forEach((item) => { htmlFragment += '

' + (item.thumbnailUrl ? '

' : '

Thumbnail not available

') + (item.title ? '

' + (item.title || "") + "

" : '

Title not available

') + // (item.description) + "

"; }); document.getElementById("itemGallery").innerHTML = htmlFragment; // add the event listeners var elements = Array.from(document.querySelectorAll(".esri-item-container")); elements.forEach(element => { element.addEventListener("click", clickHandler); }); // title of all apps and dashboards in the galery var app_1 = elements[0].innerText; var app_2 = elements[1].innerText; var app_3 = elements[2].innerText; function clickHandler(event) { // do something with clicked element var app_path_title = event.path[1].innerText; //console.log(app_path_title); var apps_url = items.results; //console.log(test_results); // apps url var app_1_url = items.results[0].url; var app_2_url = items.results[1].url; var app_3_url = items.results[2].url; if (app_1 === app_path_title) { window.open(app_1_url); } else if (app_2 === app_path_title) { window.open(app_2_url); } else if (app_3 === app_path_title) { window.open(app_3_url); }; }; };