topic Access ArcGIS Enterprise Portal items using OAuthentication and open the item (Web App) with click on Thumbnail in ArcGIS JavaScript Maps SDK Questions

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

Den-GIS — Mon, 24 May 2021 10:58:29 GMT

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:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>Identity Manager </title> <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.19/"></script> <style> html, body { font-size: 14px; width: 100%; height: 100%; margin: 0px; padding: 0px; } .esri-item-gallery .esri-item-container { float: left; text-align: center; padding: 10px; width: 204px; display: inline-block; } .esri-item-gallery .esri-image { width: 200px; height: 133px; border: 2px solid gray; border-radius: 5px; } .esri-item-gallery .esri-null-image { line-height: 133px; text-align: center; color: #999999; } .esri-item-gallery .esri-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .esri-item-gallery .esri-null-title { color: #999999; } .action { color: blue; cursor: pointer; text-decoration: underline; } </style> <script> require([ "esri/portal/Portal", "esri/identity/OAuthInfo", "esri/identity/IdentityManager", "esri/portal/PortalQueryParams" ], (Portal, OAuthInfo, esriId, PortalQueryParams) => { const personalPanelElement = document.getElementById("personalizedPanel"); const anonPanelElement = document.getElementById("anonymousPanel"); const userIdElement = document.getElementById("userId"); const info = new OAuthInfo({ // Swap this ID out with registered application ID appId: "YC0EFtVxMfyh9j8r", // Uncomment the next line and update if using your own portal // portalUrl: "https://<host>:<port>/arcgis" portalUrl: "https://myportal.com/arcportal", // Uncomment the next line to prevent the user's signed in state from being shared with other apps on the same domain with the same authNamespace value. // authNamespace: "portal_oauth_inline", popup: false }); esriId.registerOAuthInfos([info]); esriId .checkSignInStatus(info.portalUrl + "/sharing") .then(() => { displayItems(); }) .catch(() => { // Anonymous view anonPanelElement.style.display = "block"; personalPanelElement.style.display = "none"; }); document.getElementById("sign-in").addEventListener("click", () => { // user will be redirected to OAuth Sign In page esriId.getCredential(info.portalUrl + "/sharing"); }); document.getElementById("sign-out").addEventListener("click", () => { esriId.destroyCredentials(); window.location.reload(); }); function displayItems() { const portal = new Portal("https://myportal.com/arcportal"); // Setting authMode to immediate signs the user in once loaded portal.authMode = "immediate"; // Once loaded, user is signed in portal.load().then(() => { // Create query parameters for the portal search const queryParams = new PortalQueryParams({ query: "group: 59bd562ffc0c40e5b390ef9e58352de6", sortField: "numViews", sortOrder: "desc", num: 20 }); userIdElement.innerHTML = portal.user.username; anonPanelElement.style.display = "none"; personalPanelElement.style.display = "block"; // Query the items based on the queryParams created from portal above portal.queryItems(queryParams).then(createGallery); }); } function createGallery(items) { let htmlFragment = ""; items.results.forEach((item) => { htmlFragment += '<div class="esri-item-container">' + (item.thumbnailUrl ? '<div class="esri-image" style="background-image:url(' + item.thumbnailUrl + ');"></div>' : '<div class="esri-image esri-null-image">Thumbnail not available</div>') + (item.title ? '<div class="esri-title">' + (item.title || "") + "</div>" : '<div class="esri-title esri-null-title">Title not available</div>') + "</div>"; }); document.getElementById("itemGallery").innerHTML = htmlFragment; }; }); </script> </head> <body> <div id="anonymousPanel" style="display: none; padding: 5px; text-align: center;"> <span id="sign-in" class="action">Sign In</span> and view your ArcGIS Online items. </div> <div id="personalizedPanel" style="display: none; padding: 5px; text-align: center;"> Welcome <span id="userId" style="font-weight: bold;"></span>  -  <span id="sign-out" class="action">Sign Out</span> </div> <div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div> </body> </html>

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

BenElan — Tue, 25 May 2021 22:38:53 GMT

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

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

Den-GIS — Wed, 26 May 2021 15:07:06 GMT

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: