Release 1.1

See what's new for the latest release.

Storybook

We are introducing a new component inside ArcGIS Experience Builder called Storybook. This powerful capability provides you with a view into the UI components for the jimu-ui library and the theme system. It also provides the API docs to help you build the UI for your experience.

Samples

Several new samples are added, some of these include: how to utilize 3rd party libraries in your widget, editing features in a map, and how to use redux to share state between widgets. Here are the newest samples:

• redux
• d3
• jquery
• react data grid
• editor
• get map coordinates
• add layers
• view layers toggle

Unit testing

We have added support for unit testing using Enzyme/@testing-library/react and Jest as part of our release package. The @testing-library/react is recommended.

Offline install

We have added support to install Experience Builder without an internet connection. See the install guide for more information.

We have also made the documentation available for offline use.

Builder updates

Experience Builder includes three new widgets, support for more data types, new animation styles, configurable windows, and more themes, templates, and quick styles. Some of the highlights are listed below.

• Animation—Set eye-catching animation styles on pages, windows, and widgets using effects such as fly-in, spin in, and fade in. You can also set transition modes for moving between section views.
• Data types—You can now connect to more data types, including feature service, map service, group layer, and feature table.
• Data views—Create data views of feature layers by adding filter and sort criteria to control what appears in connected widgets.
• Data refresh interval settings—Keep the data in your app updated automatically.
• Templates and themes—Start with one of many new default templates, including two multipage templates. Two more themes have also been added.
• Windows—Configure windows that appear when the app or a page loads, or when activated by another widget. Include custom splash screens, confirmation messages, and alerts in your web experiences.
• Guided tour—For a quick start, follow guided instructions that step you through configuring an experience or a List widget.

Widgets

Several widgets have more settings and styles, including Views Navigation, Text, Menu, Feature Info, List, and Fly Controller. You can pin a widget to keep it visible on scrolling pages and rotate widget's for more flexibility. Use the new widget operations to duplicate widgets and copy and paste them across pages for streamlined page design. Other improvements include the following new and updated widgets:

• Bookmark widget (new)—Provide a collection of 2D and 3D spatial bookmarks for a selected map. Use the provided templates to add rich detail for a place, such as images, descriptions, links, and embedded apps. The traditional templates allow end users to create bookmarks at runtime.
• Card widget (new)—Display related bits of content in a flexible and extensible container that supports hover effects. Use one of many classic or advanced templates or design your own.
• Divider widget (new)—Separate widgets with a visual line to improve page structure.
• Filter widget—Choose from several new arrangement and activation styles. There are also more input styles for ask-for-value clauses, more supported operators, and duplicate clause and clause set have been enabled.
• Image widget—Populate image widgets from feature layer attachments and web map feature symbols.
• Map widget—You can now add the Select tool to your maps or scenes.

Breaking changes

• Removed theme-builder. It has been replaced with Storybook.
• Widget and theme manifest
  • supportedLocales is changed to translatedLocales.
• jimu-core
  • polished.getValueAndUnit(value) is changed to polished.stripUnit(value, true).
  • Removed DataSourceQueryComponent.
  • Removed FeatureQueryDataSource.
  • DataSourceComponent:
    • Added widgetId and localId props.
    • Removed defaultQuery and onQueryStart.
    • The render callback function is changed to (ds: DataSource, info: IMDataSourceInfo, query: QueryParams): React.ReactNode.
  • DataSource class:
    • label is renamed to getLabel().
    • dataSourceJson is renamed to getDataSourceJson().
    • layerDefinition is named to getLayerDefinition().
• jimu-ui
  • Entries in jimu-ui have been refactored. Some entries are moved to the basic and advanced folder. Below are the entry details:
    • jimu-ui/index
    • jimu-ui/basic/sql-expression-runtime
    • jimu-ui/basic/item-selector
    • jimu-ui/basic/file-uploader
    • jimu-ui/basic/qr-code
    • jimu-ui/basic/color-picker
    • jimu-ui/basic/date-picker
    • jimu-ui/basic/imagecrop
    • jimu-ui/basic/guide
    • jimu-ui/advanced/sql-expression-builder
    • jimu-ui/advanced/expression-builder
    • jimu-ui/advanced/data-source-selector
    • jimu-ui/advanced/setting-components
    • jimu-ui/advanced/rich-text-editor
    • jimu-ui/advanced/style-setting-components
    • jimu-ui/advanced/theme-components
    • jimu-ui/advanced/resource-selector
    • jimu-ui/advanced/map
  • These components are removed: CardImgOverlay, CardGroup, CardLink, CardSubtitle, CardText, and CardTitle.
  • Tab component needs two new props: id and defaultActive.
  • Popper component:
    • Removed popperOptions prop and added two new props: strategy and onFirstUpdate.
      • strategy: Defines the positioning strategy to use. By default, it is absolute, if your reference element is in a fixed container, use the fixed strategy.
      • onFirstUpdate: Invoked when a popper is positioned the first time.
    • Removed container prop. The current behavior is the following: if the disablePortal property is false, then the dom of the popper will be appended to the body by ReactDOM.createPortal. Otherwise, the dom of the popper will be rendered under its parent node.
    • Removed onCreate.
    • toggleClass is renamed to toggleSelector.
  • DropdownMenu component:
    • The properties appendTo(string) is changed to appendToBody(boolean). If appendToBody is true, the dom of the DropdownMenu will be appended to the body by ReactDOM.createPortal. Otherwise, the dom of DropdownMenu will be rendered under its parent node.
  • DataSourceSelector component:
    • onRemove and onSelect are replaced by onChange, the onChange callback returns UseDataSource structure.
    • SelectedDataSourceJson is removed, replaced by UseDataSource.
    • selectedDataSourceIds is changed to useDataSources.
    • closeDataSourceListOnSelect is renamed to closeDataSourceListOnChange.
    • The type of parameters for disableSelection and disableRemove has been changed to UseDataSource[].
    • Removed sort and filter related props.
  • FieldSelector component:
    • onSelect is changed to onChange.
  • LinkSetting component:
    • showDialog is renamed to isOpen.
  • ThemeColorPicker component:
    • Removed palette, use specificTheme instead.
  • These theme variables have changes: Color, Dropdown, Slider, Pagination.