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

1671
2
Jump to solution
05-24-2021 03:53 AM
Den-GIS
Occasional Contributor

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> &nbsp;-&nbsp;
      <span id="sign-out" class="action">Sign Out</span>
    </div>

    <div id="itemGallery" class="esri-item-gallery" style="width: 100%;"></div>
  </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

0 Kudos
2 Solutions

Accepted Solutions
BenElan
Esri Contributor

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

View solution in original post

0 Kudos
Den-GIS
Occasional Contributor

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 +=
            '<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>') +
            // (item.description) + 
            "</div>";
    });
    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);
        };
    };
};

 

 

View solution in original post

0 Kudos
2 Replies
BenElan
Esri Contributor

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

0 Kudos
Den-GIS
Occasional Contributor

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 +=
            '<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>') +
            // (item.description) + 
            "</div>";
    });
    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);
        };
    };
};

 

 

0 Kudos