ArcGIS Blog

Announcements

ArcGIS API for JavaScript 4.0 beta 3 released

By Lloyd Heberlie and Björn Svensson and Julie Powell

We are excited to announce that beta 3 of the ArcGIS API for JavaScript 4.0 is now available.

The following are some of the highlights of this release.

Developer-friendly widgets

All widgets in version 4.0 of the ArcGIS API for JavaScript are being reengineered to enhance their extensibility and customization. Each widget’s presentation is now separate from its properties, methods and data. This separation of core logic and presentation, makes each widget highly customizable when working with other frameworks and libraries such as Bootstrap, React, and JQuery. It also means developers can use the logic without having to render its UI components.

See the code example below, Search (MapView, SceneView), Home, Locate, BasemapToggle (MapView, SceneView) widget samples, and the Widgets section in the What’s New article for more information.

require([
  "esri/widgets/Search",
  "esri/widgets/Search/SearchViewModel",
  "dojo/domReady!"
], function(Search, SearchVM) {
  ...
  var searchWidget = new Search({
    //Setting widget properties via viewModel is subject to 
    //change for the 4.0 final release    
    viewModel: new SearchVM({
      view: view //instance of MapView
    })
  }, "searchDiv");
  ...
});

Consistent API for working with Renderers

All of the properties of SimpleRenderer, UniqueValueRenderer, and ClassBreaksRenderer can be set directly in the constructor object or directly on an instance of the class.

Create the renderer by constructor:

var renderer = new UniqueValueRenderer({
  defaultSymbol: defaultSym,
  attributeField: "myField"
});

Set properties on the renderer instance:

renderer.attributeField2 = "mySecondField";
renderer.attributeField3 = "myThirdField";

String Templates: new placeholder syntax

Template strings have been supported in the JSAPI for a long time. They provide a convenient way to define strings that contain placeholders – where the placeholders are substituted with actual values at a later time. The code snippet below shows the old versus the new syntax:

// Old syntax (with dollar sign): 
${placeholder}
// New syntax (without dollar sign): 
{placeholder}

Template strings can be found in the title and description of popups, in the URL template for WebTiledLayer, and used when formatting search results and suggestions in the Search widget. For more information see the What’s New article, PopupTemplate, Search widget, and WebTiledLayer.

WebTiledLayer

var tiledLayer = new WebTiledLayer({
  urlTemplate: "http://{subDomain}.tile.stamen.com/toner/{level}/{col}/{row}.png",
  subDomains: ["a", "b", "c", "d"],
  copyright: "Copyright here ..."
});

Popups

var template = new PopupTemplate({
  title: "Households on food stamps in {COUNTY}",
  content: "<b>Average home value:</b> {AVGVAL_CY}",
  fieldInfos: [{
    fieldName: "AVGVAL_CY",
      format: {
        digitSeparator: true,
	places: 0
      }
  }]
});

Support

Esri provides support via the standard Technical Support channels for version 4.0. You may also post and view questions on the GeoNet “4.0 beta” forum. Please tag forum posts with “4.0beta”.

For the complete list of the 4.0 beta 3 release details see the What’s New article in the Guide section.

Share this article