What's new 1.12

Builder updates

ArcGIS Experience Builder 1.12 includes several new features and enhancements as listed below:

  • Accessibility—Expands accessibility features, including support for screen readers and keyboard navigation.
  • Builder—Adds breadcrumb navigational aids, which appear at the bottom left of the builder when you select a widget. The breadcrumbs tell you if the selected widget is contained in any other widgets, blocks, or screen groups.
  • Locales—Adds support for Austrian German (de-at).
  • Sharing—Public users can no longer generate a template of a publicly shared app using its App ID. Only app owners and organization administrators can generate templates and share them with other users.
  • SQL Expression Builder—Adds the is in the next and is not in the next operators. When writing expressions with date fields, you can use these operators to filter upcoming events, expiration dates, and more. Both new operators only work with ArcGIS Online hosted feature services. Some examples of features that use the SQL Expression Builder include the Filter widget, the Query widget, data views, and some message actions.
  • Templates—Adds the Blank window template, the Elevate multi-page template, and two new full-screen page templates: Multiverse and Frame. You can find these new default templates by looking for the New badge on their thumbnails in the Templates gallery. All templates created by Esri have an official Esri badge.
  • URL parameters—Adds the disable_window_focus parameter, which you can use to stop an app from automatically jumping or scrolling to a window, such as a splash window. This parameter is appropriate for apps that are embedded in other web pages, where you don't want the app to pull focus unexpectedly.

Widgets

Other improvements include the following new and updated widgets:

  • Basemap Gallery widget (new)—Connects to a Map widget and adds a panel for changing the map's basemap. The widget can synchronize with your organization's basemap settings, or you can choose which basemaps to include.
  • Near Me (beta) widget (new)—Finds features within a certain distance of a defined location. The location can be an address, a drawn feature, the user's current location, and more. The widget can summarize quantitative and qualitative information about the resulting features and can answer questions like "What is the total population living within three miles of this hospital?" and "Which nearby buildings are ADA compliant?". You can download results in CSV format.
  • Swipe widget (new)—Allows you to compare different layers and maps by moving, or swiping, a divider across the map.
  • Add Data widget—You can now upload KML files. Additionally, the search tool now includes a Type button, which you can use to narrow a search to specific types of data (for example, feature layers, elevation layers, scene layers). In the widget's settings, you now can create a data collection, which appears in the search drop-down menu and functions like a pre-entered search term.
  • Business Analyst widget—Adds drawing tools, which allow users to create an input point or polygon feature for which to run the infographic. The View mode setting adds Auto as an option, which responsively adjusts the infographic's layout to fit different screen sizes. Also, it works with ArcGIS Enterprise configured with the ArcGIS Online GeoEnrichment utility service or GeoEnrichment service from ArcGIS Business Analyst Enterprise.
  • Chart widget—When creating a line or area chart with a date field, you can now add bins based on time intervals.
  • Draw widget—You can now choose the number of decimal places for measurements associated with points, lines (including perimeters), and areas.
  • Edit widget—If you choose Geometry and attribute mode and connect the widget to a map, you can now turn off attribute and geometry editing for specific layers. You can use this new feature to allow attribute-only updates for some layers and geometry-only updates for other layers.
  • Elevation Profile widget—You can now display the elevation of intersecting features along a selected or drawn profile. You can define a buffer to include intersecting features within a distance of the profile on the map. You can also export the data for each profile and the intersecting layers.
  • Fly Controller widget—You can now set initial rotate and fly speeds in the widget's settings.
  • Grid widget—Adds new buttons to the menus that appear when you select a grid row, grid column, or nested widget in the Page panel's outline and click the More button. Grid rows and grid columns now have the Distribute space horizontally and Distribute space vertically buttons, respectively. If a row or column makes up a tab, you also have the option to rename the row or column. Individual widgets contained in a Grid widget have the Split horizontally and Split vertically buttons on the More menu. Also, you can now change the color of the padding spaces around the inner edges of the widget. All these updates also apply to grid pages.
  • Map widget—This update includes major performance enhancements. Previously, when you linked two Map widgets with the Extent changes trigger and the Zoom to and Pan to message actions, one map would take a moment to catch up when you changed the extent of the other. Now, synchronized extent changes happen simultaneously. For web maps, the rotate behavior is now also included in synchronized Zoom to extent changes. For web scenes, the rotate and tilt behaviors are included. Additionally, the Map widget now hides tools from its user interface depending on the widget's height to make the widget more responsive to medium and small screen devices.
  • Map Layers widget—Supports the View in table and Export data actions. Also, you can now display a legend for each layer and swap the visibility icons for check boxes.
  • Placeholder widget—You can now add every widget to a Placeholder widget.
  • Search widget—The widget no longer automatically filters layer sources by the search criteria. You can now turn this behavior on or off in the widget's settings.
  • Section widget—You can now set icons for individual views.
  • Share widget—In Inline mode, you can choose to show or hide media labels. If you show media labels, you can now change their font color.
  • Survey widget—In addition to maps, users can now select a feature in other widget (such as tables and lists) to have the feature's geometry and attributes populate survey questions. To do this, the Survey widget must be connected to the same data source as the other widgets.
  • Table widget—Adds formatting options for sheet headers. You can now apply bold formatting to a sheet's header text, change the text's font color, change the font size in pixels (px), and choose the header background color.
  • Timeline widget—If you choose to customize time settings, you can now set a default play speed in the Configure time panel of the widget's settings.
  • Views Navigation widget—With the Tab default, Tab underline, and Tab pills styles, you can now show each view's icon and change the icons' color and size. With the Arrow 1 and Arrow 3 styles, you can now change the font color of the pagination text.
  • Widget Controller widget—Previously, when opened, the panels of widgets in the widget controller appeared floating next to the controller, anchored to each widget's icon. With the new Widget panel arrangement setting, you can now choose to have widget panels appear floating, like before, or open in a fixed position anywhere on the canvas. You can change the fixed area's position, size, and offset from the x- and y-axes. You can also add animations.

Developer documentation updates

Updates on developer documentation topics include:

  • Added recommended React.js version in About release versions page. Updated cecommended Node.js.
  • New Storybook components: jimu-ui/basic/DatePicker, jimu-ui/advanced/SQLExpressionBuilder.

Breaking changes

Upgrade to React 18

  • React 18 introduces some new features, but it introduces breaking changes as well. See React 18 Upgrade Guide. The most notable change is the Auto batching. You need to pay attention to it because it may cause potential bugs.
  • For unit test:
    • @testing-library/react-hooks is removed, import renderHook from @testing-library/react instead.
    • enzyme is removed, all unit tests that use it need to be migrated to @testing-library/react.

DataSource

  • Creating MapDataSource does not create the layer data source at runtime. The layer data sources will be created on the fly if you use <DataSourceComponent>. If you need to make sure all layer data sources are created, please refer to the following code snippet:
Use dark colors for code blocksCopy
1
2
3
if (mapDs.isDataSourceSet && !mapDs.areChildDataSourcesCreated()) {
  await mapDs.childDataSourcesReady()
}

However, in the builder, all data sources are still created.

Here are some methods that help your code fit the change:

  • Use ds.createDataSourceById(dsId) to create any child/descendant data source of a map data source.
  • Use mapDs.createDataSourceByLayer(jsAPILayer) to create any child/descendant data source of a map data source.
  • Use mapDs.getDataSourceIdByLayer(jsAPILayer) to get any child/descendant data source ID of a map data source.
  • Use DataSourceManager.getInstance().isDataSourceUsed(dsId) to check whether a data source is used by widgets, message actions, or other data sources.

JimuMapView and JimuLayerView

  • Creating JimuMapView will still create all layer views, but it will not wait until all layer views are loaded. If you need to make sure all layer views are created, please use await jimuMapView.whenAllJimuLayerViewLoaded().
  • To wait for one jimu layer view, please use await jimuMapView.whenJimuLayerViewLoaded(id).
  • When you get a JimuLayerView, the JimuLayerView.layerDataSourceId will always exist, but JimuLayerView.getLayerDataSource() may return null. Call JimuLayerView.createLayerDataSource() to create the data source.

Lint rule

  • In previous versions, we can use this way to import the interface import { Foo } from 'Foo', but we need to use this way: import type { Foo } from 'Foo' or import type Bar from 'Bar' now.
  • In previous versions, we can call the method using this way promise.then(value => window.postMessage(value)), now we should use this way:
Use dark colors for code blocksCopy
1
2
3
promise.then(value => {
  window.postMessage(value);
})

This rule prevents void type expressions from being used in misleading locations such as being assigned to a variable, provided as a function argument, or returned from a function.

  • In previous versions, we can use these to suppress TypeScript compiler errors: // @ts-expect-error, now we need to use this way: // @ts-expect-error: describe.
  • In previous versions, we can define types in the following way:
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// use lower-case primitives for consistency
const str: String = 'foo';
const bool: Boolean = true;
const num: Number = 1;
const symb: Symbol = Symbol('foo');
const bigInt: BigInt = 1n;

// use a proper function type
const func: Function = () => 1;

// use safer object types
const lowerObj: Object = {};
const capitalObj: Object = { a: 'string' };

const curly1: {} = 1;
const curly2: {} = { a: 'string' };

now we need to use this way:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// use lower-case primitives for consistency
const str: string = 'foo';
const bool: boolean = true;
const num: number = 1;
const symb: symbol = Symbol('foo');
const bigInt: bigint = 1n;

// use a proper function type
const func: () => number = () => 1;

// use safer object types
const lowerObj: object = {};
const capitalObj: { a: string } = { a: 'string' };

const curly1: number = 1;
const curly2: Record<'a', string> = { a: 'string' };
  • In previous versions, we can use this way to create an empty object defining only an index signature type Foo = Record<string, unknown>, now we need to use this way in Exb:
Use dark colors for code blocksCopy
1
2
3
interface Foo {
  [key: string]: unknown;
}

jimu-core

  • The DataActionDropdown component is deprecated, use DataActionList instead. For backward compatibility, please pass DataActionListStyle.Dropdown as the listStyle value. The type and size fields are renamed to buttonType and buttonSize.
  • ExtentChangeMessage
    • In the previous version, the ExtentChangeMessage is published only when the extent is stable. From this release, the message is published multiple times with stationary value set to false. This value will be changed to true when the extent is stable.
    • Two properties are added: viewpoint and stationary.

jimu-ui

  • jimu-ui/advanced/setting-components
    • Component SettingCollapse is moved to jimu-ui and renamed to CollapsablePanel.
    • Component CollapsableToggle is moved to jimu-ui.
    • Component CollapsableRadio is moved to jimu-ui.
    • Component CollapsableCheckbox is moved to jimu-ui.
  • jimu-ui/hooks
    • useTranslate is deprecated in jimu-ui, use useTranslation from jimu-core instead.
    • useRefValue is deprecated in jimu-ui, use useLatest from jimu-core instead.
    • useLatest is deprecated in jimu-ui and moved to jimu-core.
    • useForkRef is deprecated in jimu-ui and moved to jimu-core.
    • useForwardRef is deprecated in jimu-ui and moved to jimu-core.
    • useFirstMountState is deprecated in jimu-ui and moved to jimu-core.
    • useUpdateEffect is deprecated in jimu-ui and moved to jimu-core.
    • useEffectOnce is deprecated in jimu-ui

jimu-arcgis

  • geometryUtils is deprecated, please import it from jimu-core instead.

Previous releases

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.