esri / filter-gallery

Category Gallery is a configurable app for group content. It enables browsing by group or organization categories. The app is built with the Esri ArcGIS API for JavaScript v4 and the Esri Application-Base

Filter Gallery Application

This is a group gallery built with the Esri ArcGIS API for JavaScript v4.11 and the Esri Application-Base

Configuration

src/config/application.json contains settings that may be altered to change the appearance and behavior of the application. The configurable options included with this application (in addition to the existing boilerplate options) are as follows:

• "group": The ID of the group that the gallery should point to.
• "portalUrl": The URL for the portal that the gallery should point to.
• "title": The title of the gallery (only shown if headHTML option is not set)
• "allowedItemTypes": Array of all item types permitted in the gallery. Item types must be listed as the exact name corresponding with the REST API: https://developers.arcgis.com/rest/users-groups-and-items/items-and-item-types.htm . By default all item types are included.
• "compassWidget": Controls the rendering of a Compass widget on gallery-embedded in maps and scenes.
• "homeWidget": Controls the rendering of a Home widget in maps and scenes.
• "legendWidget": Controls the rendering of a Legend widget in maps and scenes.
• "locateWidget": Controls the rendering of a Locate widget in maps and scenes.
• "searchWidget": Controls the rendering of a Search widget in maps and scenes.
• "basemapGalleryWidget": Controls the rendering of a Basemap Gallery widget in maps and scenes.
• "resultsPerQuery": Controls how many results are returned per query to the portal Search API. This is equivalent to how many items are shown per page.
• "useOrgCategories": If set to true, will use the organization's categories instead of those associated with the group. Note that organization categories are only available for signed-in organizational users. They will not be visible for public users.
• "filters": Array of filters to show in the gallery. Options are categories, itemType, created, modified, shared, status, and tags. If no filters are included in this array, then the button to open the "filter" panel will not be shown.
• "sortOptions": Array of sort options available in the gallery. Options are relevance, title, owner, created, modified, and numviews. If no sort options are included in this array, then the button to open the "sort" dropdown will not be shown.
• "availableItemTypeFilters": Array of item type filters to show in the gallery. Options are maps, webMaps, mapFiles, layers, featureLayers, tileLayers, mapImageLayers, imageryLayers, sceneLayers, tables, layerFiles, scenes, apps, webApps, instantApps, mobileApps, desktopApps, tools, locators, geodatabaseAccess, geometricOperations, geoprocessingTasks, networkAnalysis, files, documents, images, pdfs, and notebooks. By default all item type filters are available.
• "headHTML": String of HTML to render instead of the default header. This can be used to customize the content in the header of the gallery.
• "customCSS": String of custom CSS to inject into the application. This can be used to customize the appearance of the gallery.

For the widget options, setting to an empty string or null will disable the widget. Setting to "top-left", "top-right", "bottom-right" or "bottom-left" will render the widget in the corresponding position of the map.

Development

If you wish to build additional functionality into the application, development dependencies, unit tests, and convenient npm scripts are available in this repository. First, clone the repository and install the dependencies using npm i.

Once the operation is complete, npm start will compile the TypeScript to JavaScript in the /dist/ directory. It will also watch the /src/ directory for changes to the source TypeScript files, and transpile them to JavaScript in the /dist/ directory as you edit.

You can run the test suite with npm test to help determine if the basic functionality of the application is intact.

Deployment

When ready to deploy the application, serve the contents of the /dist/ directory from your favorite web server.

Issues

Found a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Anyone and everyone is welcome to contribute.

Licensing

Copyright 2018 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.​

A copy of the license is available in the repository's LICENSE file.

filter-gallery's Issues

Can't get this to work!

I am new to hosting configurable apps from my own web server, so help is appreciated. I downloaded this app to my web server.

I have gone in to the application.json file and adjusted the group id that I want to show in the gallery. This is a group that is public on ArcGIS Online. However, I am not able to get this to work.

I know the readme file lists those items that can be adjusted but which items are absolutely necessary to adjust to get this to work?

Also, to access this it mentions to serve the contents of the /dist/ directory from my web server. Does that mean the link would look something like this https:///FilterGallery/dist/index.html ?

New gallery commit?

Hi, I was looking to download the updated ArcGIS Online filter gallery to utilize in Portal. When I choose to download from AGOL I am redirected here - but the code is the same as the latest Portal install and not the latest AGOL code I am looking for. Could we get that code committed?

Thanks!

Add an attribute in category filter links

@nwisehart - As we discussed last week, in the new branch you are planning to create for instant app gallery, could you please add an attribute called data-langlabel in category filter link. Category name should be the value for this attribute. It will be great if spaces can be replaced with "-" in value so that we can use it as a slog and localize from client side.

defaultSort option set on application.json in not honored

The gallery items are always sorted by relevance by default. I tried to set it to created for https://docdev.arcgis.com/en/insights/gallery/ but it didn't work as expected. Users can still select the filter that they want to sort the gallery items with from the dropdown. However, it will be great if we can customize the default sort option for the gallery.

FYI @kellyhutchins

URL parameters

Is it possible to open the app gallery passing url parameters? for example to open with defined filters activated?

Operations Dashboard Content Items

Operations Dashboard applications do not display the 'View App' options which appear beside the favorite button and when you hover over the item thumbnail.

This means that the end-user has to open the item page and then launch from there instead of launching directly from the gallery.

It would be great if this functionality could be expanded to Operations Dashboard items.

it didn't run after initial set up

So I set it up using files under dist folder but am getting the following error:
hostReportError.ts:8 Uncaught TypeError: Cannot read property 'trim' of undefined
at Object.w [as normalize] (dojo.js:471)
at Object.h._sanitizeUrl (IdentityManager.js:197)
at Object.h.findOAuthInfo (IdentityManager.js:181)
at IdentityManager.js:178
at Array.filter ()
at Object.h.registerOAuthInfos (IdentityManager.js:178)
at Object.t._registerOauthInfos (ApplicationBase.js:465)
at Object.t.load (ApplicationBase.js:146)
at e.project (portal.ts:13)
at e._next (switchMap.ts:104)