Awesome

ArcGIS Configurable Apps will be retired in 2025. The ArcGIS Configurable Apps source code repro is deprecated and will not receive further updates. In addition, this repository will be removed in October 2025, along with the October 2025 ArcGIS Online update.

Looking for 4.x? See the ArcGIS JS API Base Class

application-boilerplate-js

The Application Boilerplate is a starter application for building custom templates with the ArcGIS API for JavaScript.

Features

This bare-bones app includes all the code you need to build an ArcGIS Online template. It will save you time when:

• Making an ArcGIS Online compatible template.
• Using your ArcGIS Online webmap to power the template.
• Localizing your application in different languages.
• Capturing URL parameters and using them in your application.
• Using settings from your ArcGIS Online organization or configured application.
• Enabling your application to sign-in to ArcGIS Online using OAuth 2.0.

View it live

Getting Started

Review the following ArcGIS.com help topics for details on Templates:

• Writing your first application
• Make your first app
• Create apps from maps
• Add configurable parameters to templates

Folders and Files

The template consists of the following folders and files:

/config/: A folder for your application's configuration files.

• defaults.js: Define the default configuration information for the template. You can use this file to specify things like a default web map id, a proxy url, default services, a Bing maps key, default color theme and other template-specific settings.

• templateConfig.js: Options file for configuring your template to query for specific resources and items. You can edit this file and your template can enable or disable querying for things such as localization files, ArcGIS group information, group items, custom url parameters, etc.

• demoMap.js: This map file can be used as a substitute for an arcgis.com hosted webmap. It contains webmap JSON that can be used to configure a map locally. To use this file instead of an online hosted webmap, set the useLocalWebmap option to true in templateConfig.js. Make sure the option localWebmapFile is pointing to this file location.

/css/: Contains the CSS files for the application.

• main.css This file contains the map styles that set the margin, padding and initial height (100%).

/images/: Contains images used by the application.

/js/: Contains JavaScript files:

• /nls/: The nls folder contains a file called resources.js that contains the language strings used by the application. If the application needs to be supported by multiple locales you can create a folder for each locale and inside that folder add a resources.js file with the translated strings. See the resources.js file in the nls/fr folder for an example of this in French.
• main.js: Creates the map based on configuration info. You will write all your main application logic in here.
• template.js: Module that takes care of "template"-specific work like retrieving the application configuration settings by appid, getting the url parameters (web map id and appid), handling localization details and retrieving organization specific info if applicable. You will most likely not need to modify this file. Also sets the proxy and geometry service if the url's have been provided in the defaults.js file or are available from the org. Once executed you'll have access to an object that contains properties that give you access to the following:
  • Template specific properties
  • appid
  • webmap
  • helperServices: geometry, print, locator service urls
  • i18n: Strings and isRightToLeft property that can be used to determine if the application is being viewed from a language where text is read left-to-right like Hebrew or Arabic.
  • proxy url

index.html: The default html file for the application.

/resources/: Contains helpful files for your application.

• resources/configurationPanel.js Default configuration panel settings for the template. This is only applicable to configurable templates. This example will create a configuration panel with one dropdown list that contains three template color choices (seaside, chrome, pavement). When the templateConfig.js module retrieves any configurable settings you'll get the theme name back in a parameter named theme. Then you can apply the necessary css to your application to apply the new colors - like change the border color etc. See the Adding configurable parameters to templates help topic for more details.

Instructions

1. Download and unzip the .zip file or clone the repository.
2. Web-enable the directory.
3. Access the .html page.
4. Start writing your template!

New to Github? Get started here.

Deploying

1. To deploy this application, download the template from Portal/ArcGIS Online and unzip it.
2. Copy the unzipped folder containing the web app template files, such as index.html, to your web server. You can rename the folder to change the URL through which users will access the application. By default the URL to the app will be http://<Your Web Server>/<app folder name>/index.html
3. Change the sharing host, found in defaults.js inside the config folder for the application, to the sharing URL for ArcGIS Online or Portal. For ArcGIS Online users, keep the default value of www.arcgis.com or specify the name of your organization.

• ArcGIS Online Example: "sharinghost": "https://" + “<your organization name>.maps.arcgis.com
• Portal Example where arcgis is the name of the Web Adaptor: "sharinghost": "https://" + "webadaptor.domain.com/arcgis"

4. If you are using Portal or a local install of the ArcGIS API for JavaScript, change all references to the ArcGIS API for JavaScript in index.html to refer to your local copy of the API. Search for the references containing "https://js.arcgis.com/3.13" and replace this portion of the reference with the url to your local install.

• For example: "https://webadaptor.domain.com/arcgis/jsapi/jsapi" where arcgis is the name of your Web Adaptor.

5. Copy a map or group ID from Portal/ArcGIS Online and replace the default web map ID in the application’s index.html page. You can now run the application on your web server or customize the application further.

Note: If your application edits features in a feature service, contains secure services or web maps that aren't shared publicly, or generate requests that exceed 200 characters, you may need to set up and use a proxy page. Common situations where you may exceed the URL length are using complex polygons as input to a task or specifying a spatial reference using well-known text (WKT). For details on installing and configuring a proxy page see Using the proxy. If you do not have an Internet connection, you will need to access and deploy the ArcGIS API for JavaScript documentation from developers.arcgis.com.

Requirements

• Text or HTML editor.
• A little background with JavaScript.
• Experience with the ArcGIS JavaScript API would help.

Resources

• Community
• ArcGIS for JavaScript API Resource Center
• ArcGIS Blog
• twitter@esri

Issues

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

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2013 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.txt file.

[](Esri Tags: ArcGIS ArcGIS Online Web Application boilerplate template widget dijit Esri JavaScript application) [](Esri Language: JavaScript)