Item Gallery - Where do I load my data

BillShockley — Wed, 25 Apr 2012 12:52:12 GMT

I am a new guy to the java scripting world and I am trying to customize some sample code from the Java code list:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/portal_browse.html

I got it to work on my end..but I can't seem to figure out in the code where I add the connection to my group. Can someone advise

<!DOCTYPE html> <html>     <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior     of the samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Grid Layout</title>     <link rel='stylesheet' href='css/grid960.css'>     <script type="text/javascript">     var djConfig = {       parseOnLoad: true     };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>     <script type="text/javascript">     dojo.require('esri.arcgis.Portal');     dojo.require("esri.IdentityManager");     dojo.require("dojox.lang.aspect");       var displayOptions = {       templateUrl: 'http://www.arcgis.com/apps/OnePane/basicviewer/profile.html',       themeName:'gray',       numItemsPerPage: 6,       group: {         "owner": "Kelly",         "title": "Running Routes"       },       portalUrl: 'http://www.arcgis.com/sharing/rest/'     };     var portal;     var group;     var nextQueryParams;     var queryParams;      function init() {       portal = new esri.arcgis.Portal(displayOptions.portalUrl);       dojo.connect(portal, 'onLoad', loadPortal);       dojox.lang.aspect.advise(portal, "queryItems", {         afterReturning: function (queryItemsPromise) {           queryItemsPromise.then(function (result) {             nextQueryParams = result.nextQueryParams;             queryParams = result.queryParams;           });         }       });     }      function loadPortal() {         var params = {             q: 'title: ' + displayOptions.group.title + ' AND owner:' + displayOptions.group.owner         };          portal.queryGroups(params).then(function(groups){         //get group title and thumbnail url         if (groups.results.length > 0) {           group = groups.results[0];           if (group.thumbnailUrl) {             dojo.create('img', {               src: group.thumbnailUrl,               width: 64,               height: 64,               alt: group.title             }, dojo.byId('groupThumbnail'));           }            dojo.byId('groupTitle').innerHTML = group.title;           dojo.byId('sidebar').innerHTML = group.snippet;                     //Retrieve the web maps and applications from the group and display           var params = {             q: ' type: Web Map',             num: displayOptions.numItemsPerPage           };           group.queryItems(params).then(updateGrid);         }       });     }      function updateGrid(queryResponse) {         //update the gallery to get the next page of items               var galleryList = dojo.byId('galleryList');       dojo.empty(galleryList);  //empty the gallery to remove existing items             //navigation buttons       (queryResponse.results.length < 6) ? esri.hide(dojo.byId('next')) : esri.show(dojo.byId('next'));       (queryResponse.queryParams.start > 1) ? esri.show(dojo.byId('prev')) : esri.hide(dojo.byId('prev'));             //Build the thumbnails for each item the thumbnail when clicked will display the web map in a template or the web application       var frag = document.createDocumentFragment();       dojo.forEach(queryResponse.results, function (item) {         if (item.id) {           var url = (item.type === 'Web Map') ?  displayOptions.templateUrl + '?webmap=' + item.id + '&theme=' + displayOptions.themeName : item.url;                     var li = dojo.create('li', {}, frag);           var a = dojo.create('a', {             href: url,             target: '_blank',             innerHTML: '<div class="tooltip"><p>' + item.snippet + '</p></div><img src="' + item.thumbnailUrl + '"/><div>' + item.title + '</div>'           }, li);         }       });        dojo.place(frag, galleryList);     }      function getNext() {       if (nextQueryParams.start > -1) {         group.queryItems(nextQueryParams).then(updateGrid);       }      }      function getPrevious() {       if (nextQueryParams.start !== 1) { //we aren't at the beginning keep querying.         var params = queryParams;         params.start = params.start - params.num;         group.queryItems(params).then(updateGrid);       }      }      dojo.addOnLoad(init);     </script>   </head>     <body>     <div id='header'>       <div class='container_16'>         <div class='grid_2'>           <span id='groupThumbnail'></span>         </div>         <div class='grid_14'>           <h1 id='groupTitle'></h1>         </div>       </div>     </div>     <div id='mainContent'>       <div class='container_16'>         <div class="grid_3">           <div id='sidebar'></div>         </div>         <div class="grid_13">           <a id='prev' style='left:-8px;' class="large leftbutton gray navButton"           href='javascript:getPrevious();'>??? Prev</a>           <ul id='galleryList' class='gallery'></ul>           <a id='next' style='right:20px;' class="large rightbutton gray navButton"           href='javascript:getNext();'>Next ???</a>         </div>       </div>     </div>   </body>  </html>

Re: Item Gallery - Where do I load my data

JMcNeil — Wed, 25 Apr 2012 17:12:07 GMT

You need to create a group in ArcGIS.com that contains the basemaps/apps you want to display. This basemapsGroup option to specify the owner and name of the group you created:

Currently the group is Running Routes and the owner is Kelly.
This is where you would connect to your group:

 var displayOptions = {       templateUrl: 'http://www.arcgis.com/apps/OnePane/basicviewer/profile.html',       themeName:'gray',       numItemsPerPage: 6,       group: {         "owner": "Kelly",         "title": "Running Routes"       },       portalUrl: 'http://www.arcgis.com/sharing/rest/'     };

You'll want to follow the instructions on this page to create a group:

http://help.arcgis.com/en/arcgisonli...0016000000.htm

Once the group is created you can add web maps to the group that contain the basemaps you want to display. So if your organization has a basemap you'd like to add just create a web map with just that basemap added then share it to the group.

The group needs to be public...I think.

Jay

Re: Item Gallery - Where do I load my data

BillShockley — Wed, 25 Apr 2012 18:31:46 GMT

Yep that did it...now how do I do it for private groups? I want to do an internal gallery to be shared on an intranet for now.

Re: Item Gallery - Where do I load my data

JMcNeil — Wed, 25 Apr 2012 20:08:03 GMT

Bill,

I've never built a portal site with an item gallery. I'm only speaking from experience gained by building my unique BasemapGallery (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi_start.htm), which seems basically the same. I don't see away to serve private groups, meaning your code would have to include a key or login information. I think it has to be public. I would start a new post and raise this question; I'm sure someone from ESRI will quickly answer it for you.

Jay

*If I answered your previous question would you please mark my response;)

topic Re: Item Gallery - Where do I load my data in ArcGIS JavaScript Maps SDK Questions

Item Gallery - Where do I load my data

Re: Item Gallery - Where do I load my data

Re: Item Gallery - Where do I load my data

Re: Item Gallery - Where do I load my data