esri/minimal-gallery

The Minimal Gallery is a simple way to display maps and apps in a gallery. It is a configurable group application designed to be embedded in a web page or used as a standalone gallery. The Group Gallery presents a collection of maps and apps as cards in a clean and simple design. Maps and apps can be previewed directly in the gallery or opened for full screen viewing and capabilities.

Embedded Group Gallery Application

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

Configuration

dist/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:

• "customCSS": String containing CSS that should be injected into the application at runtime.
• "openDocumentLinksDirectly": Boolean value controlling how "Document Link" items are opened. If true, a "Document Link" will open its underlying link when clicking on the thumbnail or title rather than the ArcGIS Online item page.
• "itemTypes": Comma-delimited list of sharing API item types to allow in the gallery (e.g. "Web Map, Web Mapping Application")
• "bgColor": The background color of the gallery
• "cardColor": The background color of the cards shown in the gallery for each item
• "appCaptionColor": The color of the card caption for the 'Web Mapping Application' item type
• "mapCaptionColor": The color of the card caption for the 'Web Map' item type
• "sceneCaptionColor": The color of the card caption for the 'Web Scene' item type
• "fileCaptionColor": The color of the card caption for any item type qualifying as a 'file'
• "captionFontColor": The color of the text displaying the item type in the card caption
• "fontColor": The color of fonts on the page
• "headColor": The background color for the page header
• "linkColor": The color for links on the page
• "buttonBgColor": The background color for buttons on the page (including the icons at the bottom right of each card, and the gallery pagination controls)
• "buttonTextColor": The color for text appearing on buttons in the gallery
• "showAuthor": Controls whether or not the author will be shown under the item title of each gallery card
• "sortOrder": Controls how items will be sorted in the gallery
• "sortField": The field by which items will be sorted in the gallery
• "showHeader": A boolean (true/false) value controlling whether or not the header will be displayed
• "showItemType": A boolean (true/false) value controlling whether or not item types will be displayed for each gallery item
• "itemTypeBelowThumbnail": Boolean value controlling where the item type will be displayed. If this is set to false, the item type will be displayed over the thumbnail and fade out on mouse-over. If set to true, the item type is displayed below the thumbnail.
• "headerText": The gallery title shown in the header
• "headerTextColor": The color of the header text
• "headerTextURL": A location for the gallery title to link to
• "headerImage": Boolean value controlling whether or not an image will be displayed next to the gallery title
• "headerImageLocation": The URL for the image to be displayed next to the gallery title
• "headerSearch": Boolean controlling whether or not to display the search input in the header
• "searchPlaceholder": The text shown in the search input when nothing has been entered
• "showAgolLink": Boolean controlling whether or not the display a link to ArcGIS Online (or a custom URL) next to the gallery title
• "agolLinkText": The text displayed for the link to ArcGIS Online (or custom URL)
• "agolLinkLocation": The URL for the link displayed next to the gallery title. ${GROUP_ID} will be replaced dynamically with the ID of the group whose items are being displayed in the gallery
• "itemsPerPage": The number of items to display per gallery page
• "showItemTitle": Boolean value controlling whether or not the item title will be displayed in each card
• "showItemSummary": Boolean value controlling whether or not the item summaries will be displayed in each card
• "showItemPageLink": Boolean value controlling whether or not the item page link will be displayed
• "openFullscreenSeparateTab": If true, opening maps, apps and scenes from the gallery fullscreen will always create a new tab
• "openItemDetailsSeparateTab": If true, opening an item's details will default to a new tab
• "showSignInBtn": If true, will show a sign in button in the top right of the gallery
• "alwaysOpenFullscreen": If true, maps, apps and scenes will always be opened fullscreen instead of in the gallery
• "summaryTruncLength": Specifies the number of characters to allow an item summary in the gallery card to extend before truncating it with an ellipsis
• "showSummaryTooltip": Boolean value controlling whether or not the 'Open ArcGIS Online Item Page' icon in the bottom right of the card will have a tooltip showing the summary for the item.
• "tooltipTruncLength": Specifies the number of characters to allow an item summary in the 'Open in ArcGIS Online' tooltip to extend before truncating it with an ellipsis
• "compassWidget": Controls the rendering of a Compass widget on gallery-embedded or fullscreen maps and scenes
• "homeWidget": Controls the rendering of a Home widget on gallery-embedded or fullscreen maps and scenes
• "legendWidget": Controls the rendering of a Legend widget on gallery-embedded or fullscreen maps and scenes
• "locateWidget": Controls the rendering of a Locate widget on gallery-embedded or fullscreen maps and scenes
• "searchWidget": Controls the rendering of a Search widget on gallery-embedded or fullscreen maps and scenes

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 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 2017 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.

minimal-gallery's Issues

ItemsPerPage not well implemented

First of all I would like to say that this project is great! Congratulations for all of these new esri templates that all of you are bringing more a more frequently. The UX/UI is really important so congratulations.

I was implementing a gallery and I wanted to change the number of items per page. However what I noticed is that changing the number of the config file wasn't working properly.

This is because in main.js we are not using the number specified in the config file (we are using 20 in all cases)

So here is my simple solution to fix this problem:

Hope this help you.

Thanks again for this great work,

Alejandro Pequeño Pulleiro from Esri Spain

Sign in button does not appear on mobile form factor

The Sign in button does not appear on mobile form factors. It seems to disappear after getting below a width of about 860px.

Defaults

It would be great to replace empty 'headerText' parameter with group name. Eg. Minimal Gallery for Web Application Templates group
could have header text "Web Application Templates", not "Group Gallery".

Similarly 'headerImageLocation' attribute could defaults to group thumbnail.

Build instructions do not work

The building instructions on the GitHub repo do not appear to work. Rather than npm start I have to type npm run-script build in order to build the application. Even then I get the following build errors:

> webpack -p


[at-loader] Using [email protected] from typescript and "tsconfig.json" from C:/Users/jose3913/Documents/Projects/minimal-gallery-master/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 13 errors
Hash: 196cc0ddb7582451bc87
Version: webpack 3.12.0
Time: 4290ms
             Asset     Size  Chunks             Chunk Names
    application.js  57.1 kB       0  [emitted]  application
application.js.map   314 kB       0  [emitted]  application
   [0] ./src/Component.ts 7.58 kB {0} [built]
   [1] ./src/mainApp/MinimalGallery/_actions/index.ts 774 bytes {0} [built]
  [11] multi ./src/mainApp/index 28 bytes {0} [built]
  [12] ./src/mainApp/index.ts 516 bytes {0} [built]
  [13] ./src/applicationBase/ApplicationBase.js 24.8 kB {0} [built] [1 warning]
  [19] ./src/applicationBase/declareDecorator.js 750 bytes {0} [built] [1 warning]
  [21] ./src/mainApp/Widget.tsx 2.78 kB {0} [built]
  [24] ./src/mainApp/MinimalGallery/index.tsx 2.88 kB {0} [built]
  [30] ./src/mainApp/MinimalGallery/Header.tsx 7.57 kB {0} [built]
  [31] ./src/mainApp/MinimalGallery/Gallery/index.tsx 5.8 kB {0} [built]
  [35] ./src/mainApp/MinimalGallery/Viewer/index.tsx 4.93 kB {0} [built]
  [43] ./src/mainApp/MinimalGallery/Pager.tsx 4.05 kB {0} [built]
  [44] ./src/mainApp/MinimalGallery/_reducers/index.ts 556 bytes {0} [built]
  [49] ./src/mainApp/MinimalGallery/_reducers/page.ts 557 bytes {0} [built]
  [51] ./src/mainApp/MinimalGallery/_utilities/router.ts 695 bytes {0} [built]
    + 37 hidden modules

WARNING in ./src/applicationBase/ApplicationBase.js
(Emitted value instead of an instance of Error) Cannot find SourceMap 'ApplicationBase.js.map': Error: Can't resolve './ApplicationBase.js.map' in 'C:\Users\jose3913\Documents\Projects\minimal-gallery-master\src\applicationBase'
 @ ./src/mainApp/index.ts 1:22-67
 @ multi ./src/mainApp/index

WARNING in ./src/applicationBase/declareDecorator.js
(Emitted value instead of an instance of Error) Cannot find SourceMap 'declareDecorator.js.map': Error: Can't resolve './declareDecorator.js.map' in 'C:\Users\jose3913\Documents\Projects\minimal-gallery-master\src\applicationBase'
 @ ./src/applicationBase/ApplicationBase.js 36:0-515:2
 @ ./src/mainApp/index.ts
 @ multi ./src/mainApp/index

ERROR in [at-loader] ./src/mainApp/MinimalGallery/_actions/base.ts:18:5
    TS2554: Expected 0-2 arguments, but got 3.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Gallery/index.tsx:92:22
    TS2322: Type '{ key: any; store: { reducers: (state: {} | undefined, action: any) => {}; initialState: { applic...' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: any; store: { reducers: (state: {} | undefined, action: any) => {}; initialState: { applic...'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Gallery/Panel/index.tsx:190:12
    TS2322: Type '{ key: string; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: string; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/index.tsx:49:30
    TS2322: Type '{ key: string; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: string; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/index.tsx:52:22
    TS2322: Type '{ key: string; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: string; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/index.tsx:53:22
    TS2322: Type '{ key: string; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: string; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/index.tsx:54:22
    TS2322: Type '{ key: string; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: string; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Viewer/index.tsx:45:25
    TS2322: Type '{ key: any; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: any; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Viewer/index.tsx:47:25
    TS2322: Type '{ key: any; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: any; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Viewer/index.tsx:49:25
    TS2322: Type '{ key: any; }' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: any; }'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Viewer/View/MapView.tsx:16:14
    TS2322: Type '{ key: string; store: { reducers: (state: ViewState | undefined, action: Action) => ViewState; in...' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: string; store: { reducers: (state: ViewState | undefined, action: Action) => ViewState; in...'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Viewer/View/SceneView.tsx:16:14
    TS2322: Type '{ key: string; store: { reducers: (state: ViewState | undefined, action: Action) => ViewState; in...' is not assignable to type 'Store'.
  Property 'parentWidget' is missing in type '{ key: string; store: { reducers: (state: ViewState | undefined, action: Action) => ViewState; in...'.

ERROR in [at-loader] ./src/mainApp/MinimalGallery/Viewer/View/ViewBase/index.tsx:91:24
    TS2345: Argument of type 'IPromise<any>[]' is not assignable to parameter of type '{ [name: string]: Thenable<any>; }'.
  Index signature is missing in type 'IPromise<any>[]'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack -p`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jose3913\AppData\Roaming\npm-cache\_logs\2019-06-13T17_53_43_939Z-debug.log

bgColor not working?

I have tried changing the background color under the "Theme" tab in the configuration UI ("Body Background color‎"), and in the JSON code through AGOL Assistant ("bgColor").

I tried many different colors. In both the UI and the code, changes are saved properly - if I leave and return the choices are still registering as what I saved them as - but the actual application's background stays white.

I plan on embedding this minimal gallery into a "dark" themed story map so I'd like the gallery to have a black background.

Is it possible to reupload minimal-gallery to ArcGIS Online as a configurable app?

Hello,

I've made several changes in different configurable and auto configurable apps of the platform (edit, minimalist, cascade , mapSeries....).

Configurable apps like edit, minimmalist... use to have a config json similar than this:

{
"configurationSettings": [{
"category": "General",
"fields": [{
"type": "webmap",
"conditions": ["edit"]
}, {
"type": "appproxies"
},
{
"placeHolder": "Defaults to web map title",
"label": "Title:",
"fieldName": "title",
"type": "string",
"tooltip": "Defaults to web map title"
}
]
}, {
"category": "Theme",
"fields": [{
"type": "subcategory",
"label": "Colors"
}, {
"type": "color",
"fieldName": "theme",
"tooltip": "Color theme to use",
"label": "Color Theme:",
"sharedThemeProperty": "header.background"
}, {
"type": "color",
"fieldName": "color",
"tooltip": "Title bar text color",
"label": "Title Color:",
"sharedThemeProperty": "header.text"
}, {
"type": "color",
"fieldName": "bodyColor",
"tooltip": "Panel text color",
"label": "Panel Text Color:",
"sharedThemeProperty": "body.text"
}, {
"type": "color",
"fieldName": "bodyBg",
"tooltip": "Panel background color",
"label": "Panel Background Color:",
"sharedThemeProperty": "body.background"
}, {
"type": "subcategory",
"label": "Custom Layout Options"
}, {
"type": "paragraph",
"value": "Use the Custom css option to paste css that overwrites rules in the app."
}, {
"type": "string",
"fieldName": "customstyle",
"tooltip": "Custom css",
"label": "Custom css"
}]
}, {
"category": "Options",
"fields": [{
"type": "subcategory",
"label": "Tools"
}, {
"type": "boolean",
"fieldName": "edittoolbar",
"label": "Display Edit Toolbar"
}, {
"type": "paragraph",
"value": "Enable the Locate Button to add a button to the map that allows users to identify thier current location. To track the users current location set Locate Button and Location Tracking to true."
}, {
"type": "boolean",
"fieldName": "locate",
"label": "Locate Button"
}, {
"type": "boolean",
"fieldName": "locatetrack",
"label": "Location Tracking"
}, {
"type": "boolean",
"fieldName": "home",
"label": "Home Button"
}, {
"type": "boolean",
"fieldName": "scale",
"label": "Scalebar"
}, {
"type": "paragraph",
"value": "Enable the basemap toggle button. The button will use the web map's default basemap as the map main. Select an alternate basemap from the list to toggle."
}, {
"type": "boolean",
"fieldName": "basemap",
"label": "Basemap Toggle"
}, {
"type": "basemaps",
"fieldName": "alt_basemap",
"tooltip": "Select the alternate basemap",
"label": "Alternate Basmap"
}]
}, {
"category": "Search",
"fields": [{
"type": "subcategory",
"label": "Search Settings"
}, {
"type": "paragraph",
"value": "Enable search to allow users to find a location or data in the map. Configure the search settings to refine the experience in your app by setting the default search resource, placeholder text, etc."
}, {
"type": "boolean",
"fieldName": "search",
"label": "Enable search tool"
}, {
"type": "search",
"fieldName": "searchConfig",
"label": "Configure search tool"
}]
}],
"values": {
"color": "#4c4c4c",
"theme": "#f7f8f8",
"bodyBg": "#fff",
"bodyColor": "#666",
"scale": true,
"home": true,
"edittoolbar": false,
"locate": false,
"locatetrack": false,
"search": true,
"basemap": false,
"alt_basemap": "satellite"
}
}

This allows you to create a configurable app on ArcGIS Online and set this json on the code section (advance settings). Then you can use on ArcGIS Online your customized app (hosted on a web server) as a configurable templeate.

In minimal-gallery is it possible to do this ? (the application.json file doesn't have the same format)

Thanks in advance

Change Search to not be Case Sensitive

I would like for my users to be able to search my group items and not be limited to case-sensitive spelling. It appears that the search works with lowercase, but users on mobile devices will default to proper case.

Config Options - need additional support

The following options are present in the "application.json" config file but no documentation is given. I am particularly interested in the "proxy" or "oauthappid" as I want to make items that are only shared with one group viewable by users that are not members of that group.

• "appid": "",
• "group": "",
• "title": "",
• "portalUrl": "",
• "oauthappid": "",
• "proxyUrl": "",
• "units": "",
• "helperServices":

GitHub Minimal Gallery does not force user login

The GitHub-hosted Minimal Gallery does not seem to force the user to log in when they go to it (if the user is not already logged into their portal), forcing the user to manually click "Sign In". This behavior differs from a Portal or ArcGIS Online-hosted Minimal Gallery.

To reproduce:

1. Download Minimal Gallery from GitHub
2. Configure the Minimal Gallery to point to your Portal (my customer is using 10.6.1), and to display content from a group in your Portal. Also set the application.json showSignInBtn configuration option to true.
3. Deploy the configured Minimal Gallery to your web server
4. Add an item to your Portal for the deployed Minimal Gallery. Register the application. Apply the app ID to the deployed Minimal Gallery on your web server. Share the application with the organization.
5. Make sure you are not logged into your Portal.
6. Go to the deployed Minimal Gallery URL in your web browser. Observe that you are not immediately asked to enter credentials. You must click "Sign In" to authenticate.

This reduces the user friendliness of this application. Also, in combination with issue #10, it basically makes a GitHub-downloaded Minimal Gallery unusable on Mobile, because the Sign In button does not even appear on mobile form factors.

This is all in contrast to the behavior of a similarly configured Minimal Gallery (as a template application) in either Portal or ArcGIS Online. If you configure a Minimal Gallery template application in a similar manner, and then visit it while not authenticated against Portal/Online, it will immediately ask for your credentials (on both Desktop and Mobile form factors).

The GitHub Minimal Gallery application should behave in the same way (or at least be configurable so that it can behave in the same way).

Specifying multiple groups in application.json does not work

If you specify multiple groups in the application.json (as an array of strings, e.g., ["d39f4ac802af4c94badad8d5ef3c01ac", "dffdc2ff23544a1bb3b4f19b9a8344ab"], as the application-base-js README seems to suggest should be possible), the application appears to query the groups, but then the application hangs, forever displaying the "Initializing application..." message.

I also set fetchMultiple to true in the boilerplate.json, as the application-base-js README seems to instruct. So my group looks like this:

  "group": {
    "default": "",
    "fetchInfo": true,
    "fetchItems": true,
    "fetchMultiple": true,
    "itemParams": {
      "sortField": "modified",
      "sortOrder": "desc",
      "num": 9,
      "start": 0
    }
  }

LocalStorage

The link in the ApplicationBase.js to get the local config seems to be erroring out in certain browsers.

Guess this is due to LocalStorage not being available? Is this part necessary to the code?