The symbology of a hosted feature layer published from ArcGIS Pro is not retained in JavaScript 3.x apps

Description

The symbology of a hosted feature layer published from ArcGIS Pro displays correctly in ArcGIS Online Map Viewer, but is not retained in an ArcGIS Web AppBuilder web app. The images below show the layer in ArcGIS Pro, ArcGIS Online Map Viewer, and ArcGIS Web AppBuilder.

In ArcGIS Pro:

In ArcGIS Online Map Viewer:

In ArcGIS Web AppBuilder:

Cause

Due to different ArcGIS API for JavaScript versions, symbology configured in ArcGIS Pro displays differently or is not retained in ArcGIS Web AppBuilder. ArcGIS Pro, Map Viewer, and newer apps, such as ArcGIS Experience Builder use ArcGIS Maps SDK for JavaScript 4.x (formerly known as ArcGIS API for JavaScript), whereas ArcGIS Web AppBuilder uses ArcGIS API for JavaScript 3.x. Therefore, certain symbol properties available in ArcGIS Pro are not supported in ArcGIS Web AppBuilder. Refer to Esri Community: Apps that use ArcGIS API for JavaScript 3.x vs 4.x for more information.

Solution or Workaround

Share the map as a web map to ArcGIS Online with the 'Use symbol types compatible with all clients' option checked

In ArcGIS Pro, in the Share As Web Map pane, check the Use symbol types compatible with all clients check box, and share the map as a web map to retain and view its symbology in ArcGIS Web AppBuilder. Refer to ArcGIS Pro: Share a web map using a selected configuration for more information. Checking the Use symbol types compatible with all clients check box converts the symbology to a format compatible with both ArcGIS API for JavaScript 3.x and ArcGIS Maps SDK for JavaScript 4.x.

Configure the symbology in ArcGIS Online Map Viewer Classic

In ArcGIS Online Map Viewer Classic, configure the symbology of the hosted feature layer to match the symbology in ArcGIS Pro. The symbology is retained and compatible with ArcGIS Web AppBuilder as ArcGIS Online Map Viewer Classic uses ArcGIS API for JavaScript 3.x. Refer to ArcGIS Online: Change Style reference (Map Viewer Classic) for more information.

Use compatible ArcGIS Online web apps to retain the hosted feature layer’s symbology

Create ArcGIS Online web apps that use ArcGIS Maps SDK for JavaScript 4.x, such as ArcGIS Experience Builder, ArcGIS Dashboards, and ArcGIS StoryMaps. Refer to ArcGIS Online: Create apps from maps for more information.

The image below shows the hosted feature layer’s symbology retained and displayed correctly in ArcGIS Web AppBuilder.