Configure a disconnected deployment for Custom Chart Builder

Available with Standard or Advanced license.

Available with Production Mapping license.

Available with ArcGIS Maritime license.

You can deploy Custom Chart Builder (CCB) in a disconnected environment. This is necessary if there is no internet connection available or internet access is prohibited by your organization. Referenced sources must be replaced with locally available sources.

Note:

Registering the portal is required only for custom product types where the sign-in capability is needed to add data layers to your map.

Register your CCB app in portal

Use the following steps to add data from your portal:

1. Register your web app and get the App ID.

   Note:

   You can skip this step if your web app is configured for the Fixed Product type. For the Custom Product type, this is an optional setting. If you want to activate sign-in capability and need to add data from your ArcGIS organization account, this step is required.

2. Browse to C:\inetpub\wwwroot\ccb\js if you are using Internet Information Server (IIS).
3. For all Microsoft Windows operating systems, choose one of the following:
   • Windows 7 and earlier—Choose Windows Explorer.
   • Windows 8 and later—Choose File Explorer.
4. Open the ccbconfig.js file and update the appId with the information you created in step 1.
5. Click Save.

Update JavaScript files

Follow the steps below if you registered your web app in your portal:

1. Browse to the CCB folder in your web root folder. For example, browse to C:\inetpub\wwwroot\ccb if you are deploying your web app using Internet Information Server (IIS).
2. In the widgets\AddData folder, open Widget.js.
3. Update the portalUrl variable to https://portalserver.domain.com/arcgis.
4. Click Save.
5. In the widgets\LayerList folder, open Widget.js.
6. In the appConfig section, update the portalUrl to https://portalserver.domain.com/arcgis.
7. Click Save.
8. In the js folder, open SignInButton.js.
9. Uncomment // portalUrl: "https://portalserver.domain.com/arcgis", and update the portalUrl parameter.
10. Click Save.

Set ArcGIS API for JavaScript

1. Sign in to ArcGIS Developer using your credentials.
2. Browse to and download ArcGIS API for JavaScript 3.31.

   The extracted library is located on your local machine at <downloaded location>\arcgis_js_v331_api\arcgis_js_api\library.

3. Create an arcgis_js_api folder in the C:\inetpub\wwwroot\ccb\js folder if you are using IIS to deploy your web app.
4. Copy the entire extracted library folder to C:\inetpub\wwwroot\ccb\js\arcgis_js_api\.
5. Open the init.js file (in the C:\inetpub\wwwroot\ccb\js\arcgis_js_api\library\3.31\3.31\ folder) in a text editor.
6. Browse through the .js file and replace https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo with https://gisserver.domain.com/ccb/js/arcgis_js_api/library/3.31/3.31/dojo.
7. Click Save and close the init.js file.
8. Open the dojo.js file (in the C:\inetpub\wwwroot\ccb\js\arcgis_js_api\library\3.31\3.31\dojo\ folder) in a text editor.
9. Browse through the .js file and replace https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo with https://gisserver.domain.com/ccb/js/arcgis_js_api/library/3.31/3.31/dojo.
10. Click Save and close the dojo.js file.
11. Open the index.html file (in theC:\inetpub\wwwroot\ccb folder) in a text editor and change the following style sheet paths:
    • Browse through the index.html file and replace //js.arcgis.com/3.31/dojo/resources/dojo.css with js/arcgis_js_api/library/3.31/3.31/dojo/resources/dojo.css.
    • Browse through the index.html file and replace //js.arcgis.com/3.31/dijit/themes/claro/claro.css with js/arcgis_js_api/library/3.31/3.31/dijit/themes/claro/claro.css.
    • Browse through the index.html file and replace https://js.arcgis.com/3.31/esri/css/esri.css with js/arcgis_js_api/library/3.31/3.31/esri/css/esri.css.
    • Browse through the index.html file and replace http://js.arcgis.com/3.31/ with js/arcgis_js_api/library/3.31/3.31/init.js.
12. Click Save and close the index.html file.

Set Bootstrap

Complete the following steps to set Bootstrap:

1. Download Bootstrap 3.1.1.

   The bootstrap.js and bootstrap.min.js files are in download path\bootstrap-3.1.1\bootstrap-3.1.1\dist\js on your local machine upon extraction.

2. Create a bootstrap folder at C:\inetpub\wwwroot\ccb\js.
3. Copy the bootstrap.js and bootstrap.min.js files to the bootstrap folder you created.
4. Browse to the index.html file at C:\inetpub\wwwroot\ccb.
5. Change the path for bootstrap from //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js to js/bootstrap/bootstrap.min.js.
6. Click Save and close the index.html file.

Set jQuery

Complete the following steps to set jQuery:

1. Create a jQuery folder in the C:\inetpub\wwwroot\ccb\js folder.
2. Download and save the jquery-3.1.0.min files.
3. Move the extracted files to the jQuery folder you created.
4. Open the index.html file in the C:\inetpub\wwwroot\ccb folder in a text editor.
5. Change the jquery-3.1.0.min file path from https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js to js/jQuery/jquery-3.1.0.min.js.
6. Click Save and close the index.html file.

Update basemaps

Learn more about creating and publishing a map service

Once the URL is generated, you must set the basemap to be the URL in the ccbconfig.js and ccbconfig_i18n.js files in the C:\inetpub\wwwroot\ccb\js\ folder.

basemap: https://gisserver.domain.com/arcgis/rest/services/yourBaseMap/MapServer,

Note:

When publishing a basemap, choose the Using tiles from a cache option on the Caching tab to draw a map service.

Update a locator service

The default locator service is configured to use ArcGIS Online and is not available for disconnected deployments. You must provide your own locator services in a disconnected deployment.

1. Open the ccbconfig.js and ccbconfig_i18n.js files in the C:\inetpub\wwwroot\ccb\js\ folder in a text editor.
2. Change the geometryServiceUrl from https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer with the custom locator service URL.
3. Click Save and close the ccbconfig.js and ccbconfig_i18n.js files.